From 732cf68fe6fd2a9ed043b0795145039943351c1b Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 01:21:55 +0200
Subject: refactor: replace tabs with app menu + router view

---
 src-vue/src/App.vue | 31 ++++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)

(limited to 'src-vue/src/App.vue')

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 2a2a176f..97a11539 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -23,7 +23,7 @@ export default {
     // 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.
+        if ((e.target as Element).closest(".el-menu-item")) return; // Disable drag when clicking menu items.
         await tauriWindow.appWindow.startDragging();
     });
   },
@@ -33,22 +33,31 @@ export default {
     },
     close() {
       appWindow.close()
-    }
+    },
+      handleSelect(key: string, keyPath: string[]) {
+        this.$router.push({path: key});
+      }
   }
 }
 </script>
 
 <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="/"
+        mode="horizontal"
+        @select="handleSelect"
+        class="el-menu-demo fc_menu__tabs el-tabs__nav-scroll"
+    >
+        <el-menu-item active 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">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 />
-- 
cgit v1.2.3


From 1aad4ef2346e336af82268ebf6dcddad1a4bde0e Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 01:42:13 +0200
Subject: refactor: apply style to new app menu

---
 src-vue/src/App.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

(limited to 'src-vue/src/App.vue')

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 97a11539..45329fc1 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -22,7 +22,7 @@ export default {
 
     // 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 => {
+    document.querySelector("#fc__menu_bar")!.addEventListener("mousedown", async e => {
         if ((e.target as Element).closest(".el-menu-item")) return; // Disable drag when clicking menu items.
         await tauriWindow.appWindow.startDragging();
     });
@@ -48,7 +48,8 @@ export default {
         default-active="/"
         mode="horizontal"
         @select="handleSelect"
-        class="el-menu-demo fc_menu__tabs el-tabs__nav-scroll"
+        id="fc__menu_bar"
+        class="el-menu-demo el-tabs__nav-scroll"
     >
         <el-menu-item active index="/">Play</el-menu-item>
         <el-menu-item index="/changelog">Changelog</el-menu-item>
@@ -66,33 +67,35 @@ 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 {
   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);
+  background-color: transparent;
   height: auto !important;
 }
 
-- 
cgit v1.2.3


From b098b5a32298df84ed4763698eeda7a9126ad7c6 Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 01:57:50 +0200
Subject: refactor: use el-menu router configuration directly

---
 src-vue/src/App.vue | 7 ++-----
 src-vue/src/main.ts | 1 -
 2 files changed, 2 insertions(+), 6 deletions(-)

(limited to 'src-vue/src/App.vue')

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 45329fc1..fd716364 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -33,10 +33,7 @@ export default {
     },
     close() {
       appWindow.close()
-    },
-      handleSelect(key: string, keyPath: string[]) {
-        this.$router.push({path: key});
-      }
+    }
   }
 }
 </script>
@@ -46,8 +43,8 @@ export default {
 
     <el-menu
         default-active="/"
+        router
         mode="horizontal"
-        @select="handleSelect"
         id="fc__menu_bar"
         class="el-menu-demo el-tabs__nav-scroll"
     >
diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts
index 758fe747..cd1936b2 100644
--- a/src-vue/src/main.ts
+++ b/src-vue/src/main.ts
@@ -40,7 +40,6 @@ const router = createRouter({
     routes, // short for `routes: routes`
 });
 app.use(router);
-router.push({path: '/'});
 
 
 app.mount('#app')
-- 
cgit v1.2.3


From 0834704abcdf84d819b9d1273dec72d892e3dc61 Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 02:07:19 +0200
Subject: refactor: remove useless CSS classes

---
 src-vue/src/App.vue | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src-vue/src/App.vue')

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index fd716364..be76ec1d 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -46,7 +46,6 @@ export default {
         router
         mode="horizontal"
         id="fc__menu_bar"
-        class="el-menu-demo el-tabs__nav-scroll"
     >
         <el-menu-item active index="/">Play</el-menu-item>
         <el-menu-item index="/changelog">Changelog</el-menu-item>
-- 
cgit v1.2.3


From a336c03cc80f2e2848de32aa8fb979abc9538993 Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 02:15:08 +0200
Subject: fix: display dev button only when dev mode is enabled

---
 src-vue/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-vue/src/App.vue')

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index be76ec1d..6f9542fa 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -50,7 +50,7 @@ export default {
         <el-menu-item active 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">Dev</el-menu-item>
+        <el-menu-item index="/dev" v-if="$store.state.developer_mode">Dev</el-menu-item>
     </el-menu>
 
     <router-view></router-view>
-- 
cgit v1.2.3


From 12e5223d6f501babc2fedd55198b954417b673e9 Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 02:31:34 +0200
Subject: fix: adjust focus style

---
 src-vue/src/App.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src-vue/src/App.vue')

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 6f9542fa..7c95cff5 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -47,7 +47,7 @@ export default {
         mode="horizontal"
         id="fc__menu_bar"
     >
-        <el-menu-item active index="/">Play</el-menu-item>
+        <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>
@@ -82,7 +82,7 @@ export default {
   background-color: transparent;
 }
 
-#fc__menu_bar .el-menu-item.is-active {
+#fc__menu_bar .el-menu-item.is-active, #fc__menu_bar .el-menu-item:focus{
   color: white !important;
   background-color: transparent;
 }
-- 
cgit v1.2.3


From c34db477a4c33882afbb86972c3bf2521b31957c Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 02:36:50 +0200
Subject: fix: restore native bar drag region

---
 src-vue/src/App.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

(limited to 'src-vue/src/App.vue')

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 7c95cff5..1b96abc3 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("#fc__menu_bar")!.addEventListener("mousedown", async e => {
-        if ((e.target as Element).closest(".el-menu-item")) return; // Disable drag when clicking menu items.
-        await tauriWindow.appWindow.startDragging();
-    });
   },
   methods: {
     minimize() {
@@ -46,6 +39,7 @@ export default {
         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>
@@ -82,7 +76,7 @@ export default {
   background-color: transparent;
 }
 
-#fc__menu_bar .el-menu-item.is-active, #fc__menu_bar .el-menu-item:focus{
+#fc__menu_bar .el-menu-item.is-active, #fc__menu_bar .el-menu-item:focus {
   color: white !important;
   background-color: transparent;
 }
-- 
cgit v1.2.3


From 8edfb16aba17f082a3a0da891d8e49658bf36530 Mon Sep 17 00:00:00 2001
From: Remy Raes <raes.remy@gmail.com>
Date: Thu, 20 Oct 2022 02:40:42 +0200
Subject: feat: apply same height to all menu components

---
 src-vue/src/App.vue   | 4 ++--
 src-vue/src/style.css | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src-vue/src/App.vue')

diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 1b96abc3..68372fc7 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -86,7 +86,7 @@ export default {
   background-image: radial-gradient(transparent 1px);
   backdrop-filter: saturate(50%) blur(4px);
   background-color: transparent;
-  height: auto !important;
+  height: var(--fc-menu_height);
 }
 
 /* Window controls */
@@ -95,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/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;
 }
 
-- 
cgit v1.2.3