From be030c2ae9af2572da688d25b2094da2a835e277 Mon Sep 17 00:00:00 2001
From: cast1e <rooger233@gmail.com>
Date: Wed, 16 Oct 2024 21:12:46 +0800
Subject: [PATCH] titlebar-style

---
 wallitor-gui/src/App.vue                 |  2 +-
 wallitor-gui/src/components/TitleBar.vue | 71 ++++++++++++++----------
 wallitor-gui/src/store/index.ts          |  3 +
 wallitor-gui/src/ts/types.d.ts           |  6 ++
 4 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/wallitor-gui/src/App.vue b/wallitor-gui/src/App.vue
index 7d714f9..1011ab6 100644
--- a/wallitor-gui/src/App.vue
+++ b/wallitor-gui/src/App.vue
@@ -16,6 +16,6 @@ isDarkTheme.addEventListener('change', (event) => {
 </script>
 
 <template>
-  <title-bar mode="win"></title-bar>
+  <title-bar mode="mac"></title-bar>
   <router-view></router-view>
 </template>
diff --git a/wallitor-gui/src/components/TitleBar.vue b/wallitor-gui/src/components/TitleBar.vue
index f2ea9af..1891f31 100644
--- a/wallitor-gui/src/components/TitleBar.vue
+++ b/wallitor-gui/src/components/TitleBar.vue
@@ -1,45 +1,33 @@
 <template>
   <div data-tauri-drag-region class="titlebar colbox">
-    <template v-if="mode == 'mac'">
-      <div class="titlebar-button-wrapper colbox">
-        <div class="titlebar-button" id="titlebar-minimize" @click="minimize">
-          <svg-icon name="window-minimize" color="red"></svg-icon>
-        </div>
-        <div class="titlebar-button" id="titlebar-maximize" @click="toggleMaximize">
-          <template v-if="maximized">
-            <svg-icon name="window-maximized"></svg-icon>
-          </template>
-          <template v-else>
-            <svg-icon name="window-maximize" width="13px"></svg-icon>
-          </template>
-        </div>
-        <div class="titlebar-button" id="titlebar-close" @click="close">
-          <svg-icon name="window-close"></svg-icon>
-        </div>
-      </div>
-    </template>
     <div class="titlebar-icon-wrapper colbox">
+      <template v-if="mode == 'mac'">
+        <div class="titlebar-button titlebar-close button-style-mac" @click="close"></div>
+        <div class="titlebar-button titlebar-minimize button-style-mac" @click="minimize"></div>
+        <div class="titlebar-button titlebar-maximize button-style-mac" @click="toggleMaximize"></div> 
+    </template>
       <img src="@/assets/vw.png" class="titlebar-icon">
       <div class="titlebar-icon-title">
         Wallitor
       </div>
     </div>
-    <template v-if="mode == 'win'">
+    
       <div class="titlebar-button-wrapper colbox">
         <div class="titlebar-button" id="titlebar-settings" @click="openSettings">
           <div class="titlebar-button-rect">
             <svg-icon name="setting" :size="button_size_default"></svg-icon>
           </div>
         </div>
-        <div class="titlebar-button" id="titlebar-minimize" @click="minimize">
+        <template v-if="mode == 'win'">
+        <div class="titlebar-button titlebar-minimize button-style-win" @click="minimize">
           <div class="titlebar-button-rect">
             <svg-icon name="window-minimize" :size="button_size_default"></svg-icon>
           </div>
         </div>
-        <div class="titlebar-button" id="titlebar-maximize" @click="toggleMaximize">
+        <div class="titlebar-button titlebar-maximize button-style-win" @click="toggleMaximize">
           <template v-if="maximized">
             <div class="titlebar-button-rect">
-              <svg-icon name="window-maximized" :size="button_size_alter"></svg-icon>
+              <svg-icon name="window-maximized button-style-win" :size="button_size_alter"></svg-icon>
             </div>
           </template>
           <template v-else>
@@ -48,13 +36,13 @@
             </div>
           </template>
         </div>
-        <div class="titlebar-button" id="titlebar-close" @click="close">
+        <div class="titlebar-button titlebar-close button-style-win" @click="close">
           <div class="titlebar-button-rect">
             <svg-icon name="window-close" :size="button_size_default"></svg-icon>
           </div>
         </div>
+      </template>
       </div>
-    </template>
   </div>
 </template>
 
@@ -140,7 +128,7 @@ function openSettings() {
   z-index: 300;
 }
 
-.titlebar-button {
+.button-style-win.titlebar-button {
   height: 30px;
   width: 30px;
   padding-top: 3px;
@@ -157,21 +145,44 @@ function openSettings() {
   justify-content: center;
 }
 
-#titlebar-settings {
+#titlebar-settings{
+  cursor: pointer;
+}
+
+.button-style-win#titlebar-settings {
   padding-left: 5px;
 }
 
-#titlebar-close {
+.button-style-win.titlebar-close {
   padding-right: 5px;
 }
 
 #titlebar-settings .titlebar-button-rect:hover,
-#titlebar-minimize .titlebar-button-rect:hover,
-#titlebar-maximize .titlebar-button-rect:hover {
+.button-style-win.titlebar-minimize .titlebar-button-rect:hover,
+.button-style-win.titlebar-maximize .titlebar-button-rect:hover {
   background-color: var(--bg-hover-fill);
 }
 
-#titlebar-close .titlebar-button-rect:hover {
+.button-style-win.titlebar-close .titlebar-button-rect:hover {
   background-color: var(--bg-hover-fill-close);
 }
+
+
+.button-style-mac.titlebar-button{
+  width: 14px;
+  height: 14px;
+  border-radius: 100%;
+  margin-left: 6px;
+}
+
+.button-style-mac.titlebar-minimize {
+  background-color: red;
+}
+.button-style-mac.titlebar-maximize {
+  background-color: green;
+  margin-right: 6px;
+}
+.button-style-mac.titlebar-close {
+  background-color: yellow;
+}
 </style>
\ No newline at end of file
diff --git a/wallitor-gui/src/store/index.ts b/wallitor-gui/src/store/index.ts
index c37a2bd..446e04b 100644
--- a/wallitor-gui/src/store/index.ts
+++ b/wallitor-gui/src/store/index.ts
@@ -23,6 +23,9 @@ export const store = createStore({
     return {
       wpList: [] as Cell[],
       videoWindow: null as VideoWindow,
+      settings:{
+        
+      }
     }
   },
   mutations: {
diff --git a/wallitor-gui/src/ts/types.d.ts b/wallitor-gui/src/ts/types.d.ts
index 238e156..392a18b 100644
--- a/wallitor-gui/src/ts/types.d.ts
+++ b/wallitor-gui/src/ts/types.d.ts
@@ -44,3 +44,9 @@ interface EditInfo {
   description: string
   mute: boolean
 }
+
+export interface settings{
+  title_bar:"win"|"mac",
+  auto_start:boolean,
+  auto_pause:boolean
+}