diff options
| -rw-r--r-- | src-vue/src/App.vue | 16 | ||||
| -rw-r--r-- | src-vue/src/plugins/store.ts | 17 | ||||
| -rw-r--r-- | src-vue/src/style.css | 5 | ||||
| -rw-r--r-- | src-vue/src/views/SettingsView.vue | 66 | ||||
| -rw-r--r-- | src-vue/src/views/mods/LocalModsView.vue | 60 | ||||
| -rw-r--r-- | src-vue/src/views/mods/ThunderstoreModsView.vue | 21 |
6 files changed, 102 insertions, 83 deletions
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue index 86a1bb37..f80e000d 100644 --- a/src-vue/src/App.vue +++ b/src-vue/src/App.vue @@ -93,8 +93,20 @@ export default { top: 0; width: 100%; height: var(--fc-menu_height); - background-image: radial-gradient(transparent 1px); - backdrop-filter: saturate(50%) blur(4px); +} + +#fc__menu_bar::before { + position: absolute; + content: ""; + inset: 0; /* same as { top: 0; right: 0; bottom: 0; left: 0; } */ + background-image: linear-gradient(to bottom, red, orange); + z-index: 1; + opacity: 0; + transition: opacity 1s linear; +} + +#fc__menu_bar:hover::before { + opacity: 1; } /* Borders reset */ diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts index 08f9b85f..60208879 100644 --- a/src-vue/src/plugins/store.ts +++ b/src-vue/src/plugins/store.ts @@ -51,6 +51,7 @@ export interface FlightCoreStore { let notification_handle: NotificationHandle; + export const store = createStore<FlightCoreStore>({ modules: { search: searchModule, @@ -87,13 +88,18 @@ export const store = createStore<FlightCoreStore>({ checkNorthstarUpdates(state) { _get_northstar_version_number(state); }, - toggleDeveloperMode(state) { + toggleDeveloperMode(state, affectMenuStyle = false) { state.developer_mode = !state.developer_mode; // Reset tab when closing dev mode. if (!state.developer_mode) { store.commit('updateCurrentTab', Tabs.PLAY); } + + let menu_bar_handle = document.querySelector('#fc_menu-bar'); + if (affectMenuStyle && menu_bar_handle !== null) { + menu_bar_handle.classList.toggle('developer_build'); + } }, initialize(state) { _initializeApp(state); @@ -331,14 +337,7 @@ export const store = createStore<FlightCoreStore>({ async function _initializeApp(state: any) { // Enable dev mode directly if application is in debug mode if (await invoke("is_debug_mode")) { - state.developer_mode = true; - - // Make menubar striped if debug build - let menu_bar_handle = document.querySelector('#fc_menu-bar'); - console.log(menu_bar_handle); - if (menu_bar_handle !== null) { - menu_bar_handle.classList.toggle('developer_build'); - } + store.commit('toggleDeveloperMode', true); } else { // Disable context menu in release build. document.addEventListener('contextmenu', event => event.preventDefault()); diff --git a/src-vue/src/style.css b/src-vue/src/style.css index 4401ac96..0366b0ed 100644 --- a/src-vue/src/style.css +++ b/src-vue/src/style.css @@ -41,3 +41,8 @@ body { height: 100%; color: white; } + +.noModMessage { + color: white; + margin: 30px 15px; +} diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue index 9a92865d..e526f821 100644 --- a/src-vue/src/views/SettingsView.vue +++ b/src-vue/src/views/SettingsView.vue @@ -3,17 +3,18 @@ <el-scrollbar> <div class="fc_settings__container"> <!-- Game folder location --> - <h3>{{ $t('settings.manage_install') }}</h3> - <el-input - v-model="$store.state.game_path" - class="w-50 m-2" - :placeholder="$t('settings.choose_folder')" - @click="updateGamePath" - > - <template #prepend> - <el-button icon="Folder" @click="updateGamePath"/> - </template> - </el-input> + <div class="fc_parameter__panel"> + <h3>{{ $t('settings.manage_install') }}</h3> + <el-input + v-model="$store.state.game_path" + :placeholder="$t('settings.choose_folder')" + @click="updateGamePath" + > + <template #prepend> + <el-button icon="Folder" @click="updateGamePath"/> + </template> + </el-input> + </div> <!-- Thunderstore mods per page configuration --> <div class="fc_parameter__panel"> @@ -40,25 +41,30 @@ <language-selector/> </div> - <h3>{{ $t('settings.repair.title') }}</h3> - <el-button type="primary" @click="openRepairWindow"> - {{ $t('settings.repair.open_window') }} - </el-button> + <!-- Repair window --> + <div class="fc_parameter__panel"> + <h3>{{ $t('settings.repair.title') }}</h3> + <el-button type="primary" @click="openRepairWindow"> + {{ $t('settings.repair.open_window') }} + </el-button> + </div> - <h3>{{ $t('settings.about') }}</h3> + <!-- About section --> + <div class="fc_parameter__panel"> + <h3>{{ $t('settings.about') }}</h3> + <div class="fc_northstar__version" @click="activateDeveloperMode"> + {{ $t('settings.flightcore_version') }} {{ flightcoreVersion === '' ? 'Unknown version' : `${flightcoreVersion}` }} + </div> + </div> - <div class="fc_northstar__version" @click="activateDeveloperMode"> - {{ $t('settings.flightcore_version') }} {{ flightcoreVersion === '' ? 'Unknown version' : `${flightcoreVersion}` }} + <!-- Testing section --> + <div class="fc_parameter__panel"> + <h3>{{ $t('settings.testing') }}</h3> + <span> + {{ $t('settings.enable_test_channels') }} + <el-switch v-model="enableReleasesSwitch"></el-switch> + </span> </div> - <br /> - <br /> - UI design inspired by <el-link :underline="false" target="_blank" href="https://github.com/TFORevive/tforevive_launcher/" type="primary">TFORevive Launcher</el-link> (not yet public) - - <h3>{{ $t('settings.testing') }}</h3> - <span> - {{ $t('settings.enable_test_channels') }} - <el-switch v-model="enableReleasesSwitch"></el-switch> - </span> </div> </el-scrollbar> </div> @@ -117,8 +123,8 @@ export default defineComponent({ methods: { activateDeveloperMode() { this.developerModeClicks += 1; - if (this.developerModeClicks >= 6) { - this.$store.state.developer_mode = true; + if (this.developerModeClicks >= 6 && !this.$store.state.developer_mode) { + this.$store.commit('toggleDeveloperMode'); ElNotification({ title: this.$t('settings.dev_mode_enabled_title'), message: this.$t('settings.dev_mode_enabled_text'), @@ -180,7 +186,7 @@ h3:first-of-type { /* Parameter panel styles */ .fc_parameter__panel { - margin: 30px 0; + margin-bottom: 30px; } .fc_parameter__panel h3 { diff --git a/src-vue/src/views/mods/LocalModsView.vue b/src-vue/src/views/mods/LocalModsView.vue index 4bc870fe..2cd253ae 100644 --- a/src-vue/src/views/mods/LocalModsView.vue +++ b/src-vue/src/views/mods/LocalModsView.vue @@ -1,33 +1,35 @@ <template> - <el-scrollbar> - <div> - <p v-if="mods.length === 0">{{ $t('mods.local.no_mods') }}</p> - <el-card v-else shadow="hover" v-for="mod in mods" v-bind:key="mod.name"> - <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #8957e5" v-model="mod.enabled" - :before-change="() => updateWhichModsEnabled(mod)" :loading="global_load_indicator" /> - <el-popconfirm - :title="$t('mods.local.delete_confirm')" - :confirm-button-text="$t('generic.yes')" - :cancel-button-text="$t('generic.no')" - @confirm="deleteMod(mod)" - > - <template #reference> - <el-button type="danger"> - {{ $t('mods.local.delete') }} - </el-button> - </template> - </el-popconfirm> - {{ mod.name }} - <span v-if="mod.version != null">(v{{ mod.version }})</span> - <img - v-if="mod.thunderstore_mod_string != null" - :title="$t('mods.local.part_of_ts_mod')" - src="/src/assets/thunderstore-icon.png" - class="image" - height="16" - /> - </el-card> - </div> + <!-- Message displayed if no mod matched searched words --> + <div v-if="mods.length === 0" class="noModMessage"> + {{ $t('mods.local.no_mods') }} + </div> + + <el-scrollbar v-else> + <el-card shadow="hover" v-for="mod in mods" v-bind:key="mod.name"> + <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #8957e5" v-model="mod.enabled" + :before-change="() => updateWhichModsEnabled(mod)" :loading="global_load_indicator" /> + <el-popconfirm + :title="$t('mods.local.delete_confirm')" + :confirm-button-text="$t('generic.yes')" + :cancel-button-text="$t('generic.no')" + @confirm="deleteMod(mod)" + > + <template #reference> + <el-button type="danger"> + {{ $t('mods.local.delete') }} + </el-button> + </template> + </el-popconfirm> + {{ mod.name }} + <span v-if="mod.version != null">(v{{ mod.version }})</span> + <img + v-if="mod.thunderstore_mod_string != null" + :title="$t('mods.local.part_of_ts_mod')" + src="/src/assets/thunderstore-icon.png" + class="image" + height="16" + /> + </el-card> </el-scrollbar> </template> diff --git a/src-vue/src/views/mods/ThunderstoreModsView.vue b/src-vue/src/views/mods/ThunderstoreModsView.vue index 0a0b9965..5a7270df 100644 --- a/src-vue/src/views/mods/ThunderstoreModsView.vue +++ b/src-vue/src/views/mods/ThunderstoreModsView.vue @@ -3,11 +3,17 @@ <div v-if="mods.length === 0" class="fc__changelog__container">
<el-progress :show-text="false" :percentage="50" :indeterminate="true" />
</div>
+
+ <!-- Message displayed if no mod matched searched words -->
+ <div v-else-if="filteredMods.length === 0" class="noModMessage">
+ {{ $t('mods.online.no_match') }}<br/>
+ {{ $t('mods.online.try_another_search') }}
+ </div>
+
<el-scrollbar v-else class="container" ref="scrollbar">
<div class="card-container">
- <div class="pagination_container">
+ <div class="pagination_container" v-if="shouldDisplayPagination">
<el-pagination
- v-if="shouldDisplayPagination"
:currentPage="currentPageIndex + 1"
layout="prev, pager, next"
:page-size="modsPerPage"
@@ -16,12 +22,6 @@ />
</div>
- <!-- Message displayed if no mod matched searched words -->
- <div v-if="filteredMods.length === 0" class="modMessage">
- {{ $t('mods.online.no_match') }}<br/>
- {{ $t('mods.online.try_another_search') }}
- </div>
-
<!-- Mod cards -->
<thunderstore-mod-card v-for="mod of currentPageMods" v-bind:key="mod.name" :mod="mod" />
</div>
@@ -199,11 +199,6 @@ export default defineComponent({ margin: 0 0 0 10px !important;
}
-.modMessage {
- color: white;
- margin: 20px 5px;
-}
-
.card-container {
margin: 0 auto;
}
|