From 3d5d40c476970ec42dd43454bc4237d645b796cc Mon Sep 17 00:00:00 2001
From: pan93412 <pan93412@gmail.com>
Date: Fri, 25 Feb 2022 07:36:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(components/Navbar):=20=E8=87=AA=E8=A8=82?=
 =?UTF-8?q?=E5=92=8C=E5=BE=AE=E8=AA=BF=E5=90=84=E7=B3=BB=E7=B5=B1=E7=9A=84?=
 =?UTF-8?q?=20titlebar=20(#1343)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: linux custom titlebar
* add settings init
* Update zh-TW.js
* fix: color

Co-authored-by: memorydream <34763046+memorydream@users.noreply.github.com>
---
 public/img/logos/yesplaymusic-white24x24.png | Bin 0 -> 750 bytes
 src/background.js                            |   5 +-
 src/components/LinuxTitlebar.vue             | 132 +++++++++++++++++++
 src/components/Navbar.vue                    | 125 ++++--------------
 src/components/Win32Titlebar.vue             | 123 +++++++++++++++++
 src/locale/lang/en.js                        |   1 +
 src/locale/lang/tr.js                        |   4 +-
 src/locale/lang/zh-CN.js                     |   1 +
 src/locale/lang/zh-TW.js                     |   1 +
 src/store/initLocalStorage.js                |   1 +
 src/store/mutations.js                       |   3 +
 src/store/state.js                           |   1 +
 src/utils/Player.js                          |   1 +
 src/views/settings.vue                       |  31 +++++
 14 files changed, 324 insertions(+), 105 deletions(-)
 create mode 100644 public/img/logos/yesplaymusic-white24x24.png
 create mode 100644 src/components/LinuxTitlebar.vue
 create mode 100644 src/components/Win32Titlebar.vue

diff --git a/public/img/logos/yesplaymusic-white24x24.png b/public/img/logos/yesplaymusic-white24x24.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8e4715d8dd1e1cc59b5be762f447f45186dedbf
GIT binary patch
literal 750
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x}o+VA|^G;uuoFc=w=hc1)^7!^7XU
z&wYeGc_uFj6}Xac_sXx00huL=td33cFVy~V{%?)`-}W-dD{S4a8NJ*WQ$;r(nJT?-
zvX52qvpwhE^6X)64_LB5davHU&qCf;q%4^D8gdsrJDHNe!lV3X$GX=(6E&0;vF&5z
z`^kP~^2wA>ACDb#OIx=np#O@qC@Pq`^YFoh0++y#)0t5vfV`<YnY-GQl(zkxzT&os
zXlvB!6+ke@{?whH@8;b9_aYz=4zj!2oSqie{YgD?_r3A`d;WLoc0N2joA<SL=l;c)
zvNb~Vf-}{F*#d)~9@+c*!{O#>{c&q6viGYkJ@VLvWp9_0D-ftEb(}C!^qsb>`J==>
zxpO~Wy|d)6o4*JQKt_a2TPff)d*Q1MTuMe0)BpS_I5pkgx8na+Uc1`&n$uQ(k>V1a
znyNLi`CF3PI~K)HJ$YuSHuH)M&;6-N^}7Bx;JT^p)Hr8B!4*2eCoPK$&D27Lm72<|
z9zP09%QpS-ChYXv?dt^vmrQx#%Cfi3$u)JR*SVRS+tZ)$yw$mQ#q|B18J`ZWHJw-c
z%yQedZ62BnF9p9e6%jm`s%3fjh0cUo()uZOmFC5NkFI|6=FNs}+uUNW>#X>q)D-8u
zuxRF~&)0?WWBm903pzb}eN19``Sh<}OJ^-pT-tIfRSRg@*)uDbObLkG@#~9Pe9gSb
z$jHRv;>iaS9K1SNMW;>?($Z8FyW(>(V1@Ej)~WYiz0#_#t_}%x1<TGm)pW|qrAI@H
zt8@h@q&5YFigIhgLF{#2O)ajk7D|30XyDd1+sxbFW+-iZ^5x5xdDdQ<vP-6HYn-J%
q`Rc_SGwHI}@;&?a&;NP<hp@w&@=wbCBA0>bn8DN4&t;ucLK6TQ!&J-w

literal 0
HcmV?d00001

diff --git a/src/background.js b/src/background.js
index 8af41eb..276d790 100644
--- a/src/background.js
+++ b/src/background.js
@@ -180,7 +180,10 @@ class Background {
       minWidth: 1080,
       minHeight: 720,
       titleBarStyle: 'hiddenInset',
-      frame: !isWindows,
+      frame: !(
+        isWindows ||
+        (isLinux && this.store.get('settings.linuxEnableCustomTitlebar'))
+      ),
       title: 'YesPlayMusic',
       show: false,
       webPreferences: {
diff --git a/src/components/LinuxTitlebar.vue b/src/components/LinuxTitlebar.vue
new file mode 100644
index 0000000..8575c6c
--- /dev/null
+++ b/src/components/LinuxTitlebar.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="linux-titlebar">
+    <div class="logo">
+      <img src="img/logos/yesplaymusic-white24x24.png" />
+    </div>
+    <div class="title">{{ title }}</div>
+    <div class="controls">
+      <div
+        class="button minimize codicon codicon-chrome-minimize"
+        @click="windowMinimize"
+      ></div>
+      <div
+        class="button max-restore codicon"
+        :class="{
+          'codicon-chrome-restore': !isShowMaximized,
+          'codicon-chrome-maximize': isShowMaximized,
+        }"
+        @click="windowMaxRestore"
+      ></div>
+      <div
+        class="button close codicon codicon-chrome-close"
+        @click="windowClose"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+// icons by https://github.com/microsoft/vscode-codicons
+import 'vscode-codicons/dist/codicon.css';
+
+import { mapState } from 'vuex';
+
+const electron =
+  process.env.IS_ELECTRON === true ? window.require('electron') : null;
+const ipcRenderer =
+  process.env.IS_ELECTRON === true ? electron.ipcRenderer : null;
+
+export default {
+  name: 'LinuxTitlebar',
+  data() {
+    return {
+      isShowMaximized: true,
+    };
+  },
+  computed: {
+    ...mapState(['title']),
+  },
+  created() {
+    if (process.env.IS_ELECTRON === true) {
+      ipcRenderer.on('isMaximized', (_, value) => {
+        // 当窗口最大化时，value为false
+        // 当窗口还原时，value为true
+        this.isShowMaximized = value;
+      });
+    }
+  },
+  methods: {
+    windowMinimize() {
+      ipcRenderer.send('minimize');
+    },
+    windowMaxRestore() {
+      ipcRenderer.send('maximizeOrUnmaximize');
+    },
+    windowClose() {
+      ipcRenderer.send('close');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.linux-titlebar {
+  color: var(--color-text);
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  -webkit-app-region: drag;
+  display: flex;
+  align-items: center;
+  --hover: #e6e6e6;
+  --active: #cccccc;
+
+  .logo {
+    padding: 0 8px;
+  }
+
+  .title {
+    padding: 8px;
+    font-size: 12px;
+    font-family: 'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif;
+    justify-self: center;
+    margin: 0 auto;
+  }
+  .controls {
+    height: 32px;
+    //margin-left: auto;
+    justify-content: flex-end;
+    display: flex;
+    .button {
+      height: 100%;
+      width: 46px;
+      font-size: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      -webkit-app-region: no-drag;
+      &:hover {
+        background: var(--hover);
+      }
+      &:active {
+        background: var(--active);
+      }
+      &.close {
+        &:hover {
+          background: #c42c1b;
+          color: rgba(255, 255, 255, 0.8);
+        }
+        &:active {
+          background: #f1707a;
+          color: #000;
+        }
+      }
+    }
+  }
+}
+[data-theme='dark'] .linux-titlebar {
+  --hover: #191919;
+  --active: #333333;
+}
+</style>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 6b01a48..b6af865 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,27 +1,8 @@
 <template>
   <div>
-    <nav>
-      <div class="win32-titlebar">
-        <div class="title">YesPlayMusic</div>
-        <div class="controls">
-          <div
-            class="button minimize codicon codicon-chrome-minimize"
-            @click="windowMinimize"
-          ></div>
-          <div
-            class="button max-restore codicon"
-            :class="{
-              'codicon-chrome-restore': !isWindowMaximized,
-              'codicon-chrome-maximize': isWindowMaximized,
-            }"
-            @click="windowMaxRestore"
-          ></div>
-          <div
-            class="button close codicon codicon-chrome-close"
-            @click="windowClose"
-          ></div>
-        </div>
-      </div>
+    <nav :class="{ 'has-custom-titlebar': hasCustomTitlebar }">
+      <Win32Titlebar v-if="enableWin32Titlebar" />
+      <LinuxTitlebar v-if="enableLinuxTitlebar" />
       <div class="navigation-buttons">
         <button-icon @click.native="go('back')"
           ><svg-icon icon-class="arrow-left"
@@ -96,17 +77,16 @@ import { isLooseLoggedIn, doLogout } from '@/utils/auth';
 // icons by https://github.com/microsoft/vscode-codicons
 import 'vscode-codicons/dist/codicon.css';
 
+import Win32Titlebar from '@/components/Win32Titlebar.vue';
+import LinuxTitlebar from '@/components/LinuxTitlebar.vue';
 import ContextMenu from '@/components/ContextMenu.vue';
 import ButtonIcon from '@/components/ButtonIcon.vue';
 
-const electron =
-  process.env.IS_ELECTRON === true ? window.require('electron') : null;
-const ipcRenderer =
-  process.env.IS_ELECTRON === true ? electron.ipcRenderer : null;
-
 export default {
   name: 'Navbar',
   components: {
+    Win32Titlebar,
+    LinuxTitlebar,
     ButtonIcon,
     ContextMenu,
   },
@@ -115,7 +95,8 @@ export default {
       inputFocus: false,
       langs: ['zh-CN', 'zh-TW', 'en', 'tr'],
       keywords: '',
-      isWindowMaximized: false,
+      enableWin32Titlebar: false,
+      enableLinuxTitlebar: false,
     };
   },
   computed: {
@@ -128,12 +109,18 @@ export default {
         ? `${this.data?.user?.avatarUrl}?param=512y512`
         : 'http://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=60y60';
     },
+    hasCustomTitlebar() {
+      return this.enableWin32Titlebar || this.enableLinuxTitlebar;
+    },
   },
   created() {
-    if (process.env.IS_ELECTRON === true) {
-      ipcRenderer.on('isMaximized', (event, value) => {
-        this.isWindowMaximized = value;
-      });
+    if (process.platform === 'win32') {
+      this.enableWin32Titlebar = true;
+    } else if (
+      process.platform === 'linux' &&
+      this.settings.linuxEnableCustomTitlebar
+    ) {
+      this.enableLinuxTitlebar = true;
     }
   },
   methods: {
@@ -175,15 +162,6 @@ export default {
         this.$router.push({ name: 'login' });
       }
     },
-    windowMinimize() {
-      ipcRenderer.send('minimize');
-    },
-    windowMaxRestore() {
-      ipcRenderer.send('maximizeOrUnmaximize');
-    },
-    windowClose() {
-      ipcRenderer.send('close');
-    },
   },
 };
 </script>
@@ -221,68 +199,9 @@ nav {
   }
 }
 
-.win32-titlebar {
-  display: none;
-}
-
-[data-electron-os='win32'] {
-  nav {
-    padding-top: 20px;
-    -webkit-app-region: no-drag;
-  }
-  .win32-titlebar {
-    color: var(--color-text);
-    position: fixed;
-    left: 0;
-    top: 0;
-    right: 0;
-    -webkit-app-region: drag;
-    display: flex;
-    align-items: center;
-    --hover: #e6e6e6;
-    --active: #cccccc;
-
-    .title {
-      padding: 8px;
-      font-size: 12px;
-      font-family: 'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei',
-        sans-serif;
-    }
-    .controls {
-      height: 32px;
-      margin-left: auto;
-      justify-content: flex-end;
-      display: flex;
-      .button {
-        height: 100%;
-        width: 46px;
-        font-size: 16px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        -webkit-app-region: no-drag;
-        &:hover {
-          background: var(--hover);
-        }
-        &:active {
-          background: var(--active);
-        }
-        &.close {
-          &:hover {
-            background: rgba(232, 17, 35, 0.9);
-          }
-          &:active {
-            background: #f1707a;
-            color: #000;
-          }
-        }
-      }
-    }
-  }
-  &[data-theme='dark'] .win32-titlebar {
-    --hover: #191919;
-    --active: #333333;
-  }
+nav.has-custom-titlebar {
+  padding-top: 20px;
+  -webkit-app-region: no-drag;
 }
 
 .navigation-buttons {
diff --git a/src/components/Win32Titlebar.vue b/src/components/Win32Titlebar.vue
new file mode 100644
index 0000000..1a6cae3
--- /dev/null
+++ b/src/components/Win32Titlebar.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="win32-titlebar">
+    <div class="title">{{ title }}</div>
+    <div class="controls">
+      <div
+        class="button minimize codicon codicon-chrome-minimize"
+        @click="windowMinimize"
+      ></div>
+      <div
+        class="button max-restore codicon"
+        :class="{
+          'codicon-chrome-restore': !isShowMaximized,
+          'codicon-chrome-maximize': isShowMaximized,
+        }"
+        @click="windowMaxRestore"
+      ></div>
+      <div
+        class="button close codicon codicon-chrome-close"
+        @click="windowClose"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+// icons by https://github.com/microsoft/vscode-codicons
+import 'vscode-codicons/dist/codicon.css';
+
+import { mapState } from 'vuex';
+
+const electron =
+  process.env.IS_ELECTRON === true ? window.require('electron') : null;
+const ipcRenderer =
+  process.env.IS_ELECTRON === true ? electron.ipcRenderer : null;
+
+export default {
+  name: 'Win32Titlebar',
+  data() {
+    return {
+      isShowMaximized: true,
+    };
+  },
+  computed: {
+    ...mapState(['title']),
+  },
+  created() {
+    if (process.env.IS_ELECTRON === true) {
+      ipcRenderer.on('isMaximized', (_, value) => {
+        // 当窗口最大化时，value为false
+        // 当窗口还原时，value为true
+        this.isShowMaximized = value;
+      });
+    }
+  },
+  methods: {
+    windowMinimize() {
+      ipcRenderer.send('minimize');
+    },
+    windowMaxRestore() {
+      ipcRenderer.send('maximizeOrUnmaximize');
+    },
+    windowClose() {
+      ipcRenderer.send('close');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.win32-titlebar {
+  color: var(--color-text);
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  -webkit-app-region: drag;
+  display: flex;
+  align-items: center;
+  --hover: #e6e6e6;
+  --active: #cccccc;
+
+  .title {
+    padding: 8px 12px;
+    font-size: 12px;
+    font-family: 'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif;
+  }
+  .controls {
+    height: 32px;
+    margin-left: auto;
+    justify-content: flex-end;
+    display: flex;
+    .button {
+      height: 100%;
+      width: 46px;
+      font-size: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      -webkit-app-region: no-drag;
+      &:hover {
+        background: var(--hover);
+      }
+      &:active {
+        background: var(--active);
+      }
+      &.close {
+        &:hover {
+          background: #c42c1b;
+          color: rgba(255, 255, 255, 0.8);
+        }
+        &:active {
+          background: #f1707a;
+          color: #000;
+        }
+      }
+    }
+  }
+}
+[data-theme='dark'] .win32-titlebar {
+  --hover: #191919;
+  --active: #333333;
+}
+</style>
diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js
index 087f7c5..eac25c1 100644
--- a/src/locale/lang/en.js
+++ b/src/locale/lang/en.js
@@ -158,6 +158,7 @@ export default {
     showLibraryDefault: 'Show Library after App Launched',
     subTitleDefault: 'Show Alias for Subtitle by default',
     enableReversedMode: 'Enable Reversed Mode (Experimental)',
+    enableCustomTitlebar: 'Enable custom title bar (Need restart)',
     lyricsBackground: {
       text: 'Show Lyrics Background',
       off: 'Off',
diff --git a/src/locale/lang/tr.js b/src/locale/lang/tr.js
index 56d5e4d..66b3b6e 100644
--- a/src/locale/lang/tr.js
+++ b/src/locale/lang/tr.js
@@ -150,7 +150,9 @@ export default {
     showPlaylistsByAppleMusic: "Apple Music'in Çalma Listelerini Göster",
     enableDiscordRichPresence: 'Discord gösterimini aktifleştir',
     showLibraryDefault: 'Kitaplık Varsayılanını göster',
-    subTitleDefault: 'Sub title alia default',
+    subTitleDefault: 'Show Alias for Subtitle by default',
+    enableReversedMode: 'Enable Reversed Mode (Experimental)',
+    enableCustomTitlebar: 'Enable custom title bar (Need restart)',
     lyricsBackground: {
       text: 'Şarkı Sözleri Arka Planını Göster',
       off: 'kapalı',
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index cb077ad..99bdf43 100644
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -159,6 +159,7 @@ export default {
     showLibraryDefault: '启动后显示音乐库',
     subTitleDefault: '副标题使用别名',
     enableReversedMode: '启用倒序播放功能 (实验性功能)',
+    enableCustomTitlebar: '启用自定义标题栏 (重启后生效)',
     lyricsBackground: {
       text: '显示歌词背景',
       off: '关闭',
diff --git a/src/locale/lang/zh-TW.js b/src/locale/lang/zh-TW.js
index 55fa5d3..088d815 100644
--- a/src/locale/lang/zh-TW.js
+++ b/src/locale/lang/zh-TW.js
@@ -156,6 +156,7 @@ export default {
     showLibraryDefault: '啟動後顯示音樂庫',
     subTitleDefault: '副標題使用別名',
     enableReversedMode: '啟用倒序播放功能 (實驗性功能)',
+    enableCustomTitlebar: '啟用自訂標題列（重新啟動後生效）',
     lyricsBackground: {
       text: '顯示歌詞背景',
       off: '關閉',
diff --git a/src/store/initLocalStorage.js b/src/store/initLocalStorage.js
index b16e847..d5b3005 100644
--- a/src/store/initLocalStorage.js
+++ b/src/store/initLocalStorage.js
@@ -28,6 +28,7 @@ let localStorage = {
     enableGlobalShortcut: true,
     showLibraryDefault: false,
     subTitleDefault: false,
+    linuxEnableCustomTitlebar: false,
     enabledPlaylistCategories,
     proxyConfig: {
       protocol: 'noProxy',
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 9a66c39..d6a4b3b 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -72,4 +72,7 @@ export default {
   enableScrolling(state, status = null) {
     state.enableScrolling = status ? status : !state.enableScrolling;
   },
+  updateTitle(state, title) {
+    state.title = title;
+  },
 };
diff --git a/src/store/state.js b/src/store/state.js
index 4de913a..1a3f349 100644
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -13,6 +13,7 @@ updateApp();
 export default {
   showLyrics: false,
   enableScrolling: true,
+  title: 'YesPlayMusic',
   liked: {
     songs: [],
     songsWithDetails: [], // 只有前12首
diff --git a/src/utils/Player.js b/src/utils/Player.js
index c07eac7..908d3e8 100644
--- a/src/utils/Player.js
+++ b/src/utils/Player.js
@@ -34,6 +34,7 @@ function setTitle(track) {
   if (isCreateTray) {
     ipcRenderer.send('updateTrayTooltip', document.title);
   }
+  store.commit('updateTitle', document.title);
 }
 
 function setTrayLikeState(isLiked) {
diff --git a/src/views/settings.vue b/src/views/settings.vue
index a36ec7b..2201b8c 100644
--- a/src/views/settings.vue
+++ b/src/views/settings.vue
@@ -331,6 +331,23 @@
         </div>
       </div>
 
+      <div v-if="isElectron && isLinux" class="item">
+        <div class="left">
+          <div class="title"> {{ $t('settings.enableCustomTitlebar') }} </div>
+        </div>
+        <div class="right">
+          <div class="toggle">
+            <input
+              id="enable-custom-titlebar"
+              v-model="enableCustomTitlebar"
+              type="checkbox"
+              name="enable-custom-titlebar"
+            />
+            <label for="enable-custom-titlebar"></label>
+          </div>
+        </div>
+      </div>
+
       <div v-if="isElectron" class="item">
         <div class="left">
           <div class="title"> {{ $t('settings.showLibraryDefault') }}</div>
@@ -592,6 +609,9 @@ export default {
     isMac() {
       return /macintosh|mac os x/i.test(navigator.userAgent);
     },
+    isLinux() {
+      return process.platform === 'linux';
+    },
     version() {
       return pkg.version;
     },
@@ -928,6 +948,17 @@ export default {
         });
       },
     },
+    enableCustomTitlebar: {
+      get() {
+        return this.settings.linuxEnableCustomTitlebar;
+      },
+      set(value) {
+        this.$store.commit('updateSettings', {
+          key: 'linuxEnableCustomTitlebar',
+          value,
+        });
+      },
+    },
     isLastfmConnected() {
       return this.lastfm.key !== undefined;
     },