aboutsummaryrefslogtreecommitdiff
path: root/src-vue
diff options
context:
space:
mode:
Diffstat (limited to 'src-vue')
-rw-r--r--src-vue/package-lock.json25
-rw-r--r--src-vue/package.json1
-rw-r--r--src-vue/src/App.vue52
-rw-r--r--src-vue/src/main.ts26
-rw-r--r--src-vue/src/plugins/store.ts5
-rw-r--r--src-vue/src/style.css2
-rw-r--r--src-vue/src/utils/Tabs.ts8
-rw-r--r--src-vue/src/views/DeveloperView.vue1
-rw-r--r--src-vue/src/views/SettingsView.vue1
9 files changed, 85 insertions, 36 deletions
diff --git a/src-vue/package-lock.json b/src-vue/package-lock.json
index bcae0ab6..ace5d0db 100644
--- a/src-vue/package-lock.json
+++ b/src-vue/package-lock.json
@@ -12,6 +12,7 @@
"element-plus": "^2.2.17",
"tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#dev",
"vue": "^3.2.37",
+ "vue-router": "^4.1.5",
"vuex": "^4.0.2"
},
"devDependencies": {
@@ -1131,6 +1132,20 @@
"@vue/shared": "3.2.39"
}
},
+ "node_modules/vue-router": {
+ "version": "4.1.5",
+ "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.5.tgz",
+ "integrity": "sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==",
+ "dependencies": {
+ "@vue/devtools-api": "^6.1.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/posva"
+ },
+ "peerDependencies": {
+ "vue": "^3.2.0"
+ }
+ },
"node_modules/vue-tsc": {
"version": "0.40.13",
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.40.13.tgz",
@@ -1840,7 +1855,7 @@
},
"tauri-plugin-store-api": {
"version": "git+ssh://git@github.com/tauri-apps/tauri-plugin-store.git#4326f75446b8b9e0cb9904c65f258b81e23e544e",
- "from": "tauri-plugin-store-api@https://github.com/tauri-apps/tauri-plugin-store#dev",
+ "from": "tauri-plugin-store-api@github:tauri-apps/tauri-plugin-store#dev",
"requires": {
"@tauri-apps/api": "1.1.0",
"tslib": "2.4.0"
@@ -1882,6 +1897,14 @@
"@vue/shared": "3.2.39"
}
},
+ "vue-router": {
+ "version": "4.1.5",
+ "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.5.tgz",
+ "integrity": "sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==",
+ "requires": {
+ "@vue/devtools-api": "^6.1.4"
+ }
+ },
"vue-tsc": {
"version": "0.40.13",
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.40.13.tgz",
diff --git a/src-vue/package.json b/src-vue/package.json
index 8f53ad27..186c44e0 100644
--- a/src-vue/package.json
+++ b/src-vue/package.json
@@ -13,6 +13,7 @@
"element-plus": "^2.2.17",
"tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#dev",
"vue": "^3.2.37",
+ "vue-router": "^4.1.5",
"vuex": "^4.0.2"
},
"devDependencies": {
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 2a2a176f..68372fc7 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -19,13 +19,6 @@ export default {
},
mounted: () => {
store.commit('initialize');
-
- // Enable dragging entire app by dragging menu bar.
- // https://github.com/tauri-apps/tauri/issues/1656#issuecomment-1161495124
- document.querySelector(".el-tabs__nav-scroll")!.addEventListener("mousedown", async e => {
- if ((e.target as Element).closest(".el-tabs__item")) return; // Disable drag when clicking menu items.
- await tauriWindow.appWindow.startDragging();
- });
},
methods: {
minimize() {
@@ -40,15 +33,22 @@ export default {
<template>
<div id="fc_bg__container" />
- <el-tabs v-model="$store.state.current_tab" class="fc_menu__tabs" type="card">
- <el-tab-pane name="Play" label="Play"><PlayView /></el-tab-pane>
- <el-tab-pane name="Changelog" label="Changelog"><ChangelogView /></el-tab-pane>
- <!-- <el-tab-pane label="Mods">Mods</el-tab-pane> -->
- <el-tab-pane name="Settings" label="Settings"><SettingsView/></el-tab-pane>
- <el-tab-pane v-if="$store.state.developer_mode" name="Dev" label="Dev">
- <DeveloperView/>
- </el-tab-pane>
- </el-tabs>
+
+ <el-menu
+ default-active="/"
+ router
+ mode="horizontal"
+ id="fc__menu_bar"
+ data-tauri-drag-region
+ >
+ <el-menu-item index="/">Play</el-menu-item>
+ <el-menu-item index="/changelog">Changelog</el-menu-item>
+ <el-menu-item index="/settings">Settings</el-menu-item>
+ <el-menu-item index="/dev" v-if="$store.state.developer_mode">Dev</el-menu-item>
+ </el-menu>
+
+ <router-view></router-view>
+
<div id="fc_window__controls">
<el-button color="white" icon="SemiSelect" @click="minimize" circle />
<el-button color="white" icon="CloseBold" @click="close" circle />
@@ -57,34 +57,36 @@ export default {
<style>
/* Borders reset */
-.fc_menu__tabs .el-tabs__nav, .fc_menu__tabs .el-tabs__header {
- border: none !important;
+#fc__menu_bar {
+ border: none !important;
}
/* Header item */
-.fc_menu__tabs .el-tabs__item {
+#fc__menu_bar .el-menu-item {
color: #b4b6b9;
text-transform: uppercase;
border: none !important;
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
font-weight: bold;
font-size: large;
- margin: 10px 0;
}
-.fc_menu__tabs .el-tabs__item:hover {
+#fc__menu_bar .el-menu-item:hover {
color: #c6c9ce;
+ background-color: transparent;
}
-.fc_menu__tabs .is-active {
+#fc__menu_bar .el-menu-item.is-active, #fc__menu_bar .el-menu-item:focus {
color: white !important;
+ background-color: transparent;
}
/* Header menu */
-.fc_menu__tabs .el-tabs__header {
+#fc__menu_bar {
background-image: radial-gradient(transparent 1px);
backdrop-filter: saturate(50%) blur(4px);
- height: auto !important;
+ background-color: transparent;
+ height: var(--fc-menu_height);
}
/* Window controls */
@@ -93,7 +95,7 @@ export default {
position: absolute;
top: 0;
right: 0;
- height: var(--el-tabs-header-height);
+ height: var(--fc-menu_height);
}
#fc_window__controls > button {
diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts
index 0ac31a2d..dc18b443 100644
--- a/src-vue/src/main.ts
+++ b/src-vue/src/main.ts
@@ -2,14 +2,21 @@ import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from "element-plus";
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import { store } from './plugins/store';
+import PlayView from "./views/PlayView.vue";
+import ChangelogView from "./views/ChangelogView.vue";
+import SettingsView from "./views/SettingsView.vue";
+import DeveloperView from "./views/DeveloperView.vue";
+import {createRouter, createWebHashHistory} from "vue-router";
+
+
+const app = createApp(App);
// styles
import 'element-plus/theme-chalk/index.css';
import './style.css'
-import { store } from './plugins/store';
-const app = createApp(App);
app.use(ElementPlus);
// icons
@@ -20,4 +27,19 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
// style
app.use( store, '$store' );
+
+// routes
+const routes = [
+ { path: '/', name: 'Main', component: async () => PlayView},
+ { path: '/changelog', name: 'Changelog', component: async () => ChangelogView},
+ { path: '/settings', name: 'Settings', component: async () => SettingsView},
+ { path: '/dev', name: 'Dev', component: async () => DeveloperView}
+];
+export const router = createRouter({
+ history: createWebHashHistory(),
+ routes, // short for `routes: routes`
+});
+app.use(router);
+
+
app.mount('#app')
diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
index ce0b0ded..4fdf50a3 100644
--- a/src-vue/src/plugins/store.ts
+++ b/src-vue/src/plugins/store.ts
@@ -10,12 +10,12 @@ import { NorthstarState } from '../utils/NorthstarState';
import { appDir } from '@tauri-apps/api/path';
import { open } from '@tauri-apps/api/dialog';
import { Store } from 'tauri-plugin-store-api';
+import {router} from "../main";
const persistentStore = new Store('flight-core-settings.json');
export interface FlightCoreStore {
- current_tab: Tabs,
developer_mode: boolean,
game_path: string,
install_type: InstallType,
@@ -35,7 +35,6 @@ let notification_handle: NotificationHandle;
export const store = createStore<FlightCoreStore>({
state (): FlightCoreStore {
return {
- current_tab: Tabs.PLAY,
developer_mode: false,
game_path: undefined as unknown as string,
install_type: undefined as unknown as InstallType,
@@ -68,7 +67,7 @@ export const store = createStore<FlightCoreStore>({
_initializeListeners(state);
},
updateCurrentTab(state: any, newTab: Tabs) {
- state.current_tab = newTab;
+ router.push({path: newTab});
},
async updateGamePath(state: FlightCoreStore) {
// Open a selection dialog for directories
diff --git a/src-vue/src/style.css b/src-vue/src/style.css
index eee68edd..6fd4a793 100644
--- a/src-vue/src/style.css
+++ b/src-vue/src/style.css
@@ -1,7 +1,7 @@
body {
margin: 0;
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
- --el-tabs-header-height: 60px;
+ --fc-menu_height: 50px;
user-select: none;
}
diff --git a/src-vue/src/utils/Tabs.ts b/src-vue/src/utils/Tabs.ts
index 5266da81..48320950 100644
--- a/src-vue/src/utils/Tabs.ts
+++ b/src-vue/src/utils/Tabs.ts
@@ -1,6 +1,6 @@
export enum Tabs {
- PLAY = 'Play',
- CHANGELOG = 'Changelog',
- SETTINGS = 'Settings',
- DEV = 'Dev'
+ PLAY = '/',
+ CHANGELOG = '/changelog',
+ SETTINGS = '/settings',
+ DEV = '/dev'
}
diff --git a/src-vue/src/views/DeveloperView.vue b/src-vue/src/views/DeveloperView.vue
index e1f9eb7c..dcc0c477 100644
--- a/src-vue/src/views/DeveloperView.vue
+++ b/src-vue/src/views/DeveloperView.vue
@@ -121,5 +121,6 @@ export default defineComponent({
.fc__developer__container {
padding: 20px 30px;
color: white;
+ position: relative;
}
</style>
diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
index acc1874d..0b0e52e4 100644
--- a/src-vue/src/views/SettingsView.vue
+++ b/src-vue/src/views/SettingsView.vue
@@ -47,6 +47,7 @@ export default defineComponent({
padding: 20px 30px;
margin: 0 auto;
color: white;
+ position: relative;
}
h3:first-of-type {
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-05 10:44:19 +0000