aboutsummaryrefslogtreecommitdiff
path: root/src-vue/src
diff options
context:
space:
mode:
Diffstat (limited to 'src-vue/src')
-rw-r--r--src-vue/src/App.vue16
-rw-r--r--src-vue/src/plugins/store.ts17
-rw-r--r--src-vue/src/style.css5
-rw-r--r--src-vue/src/views/SettingsView.vue66
-rw-r--r--src-vue/src/views/mods/LocalModsView.vue60
-rw-r--r--src-vue/src/views/mods/ThunderstoreModsView.vue21
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;
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 09:59:36 +0000