feat(gui): simplify launcher group header

CyanSalt · Aug 9, 2020 · e545c13 · e545c13
1 parent 2a78ffd
commit e545c13
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 21 deletions.
diff --git a/main/lib/updater.js b/main/lib/updater.js
@@ -62,10 +62,10 @@ function checkForUpdates() {
   autoUpdater.on('update-downloaded', async (event, notes, name) => {
     const response = await notify({
       title: name,
-      body: translate('A new version has been downloaded. Restart the application to apply the updates.#!7'),
+      body: translate('A new version has been downloaded. Restart the application to apply the updates.#!6'),
       actions: [
-        translate('Restart#!8'),
-        translate('Later#!9'),
+        translate('Restart#!7'),
+        translate('Later#!8'),
       ],
     })
     if (response === 0) autoUpdater.quitAndInstall()

diff --git a/renderer/components/tab-list.vue b/renderer/components/tab-list.vue
@@ -23,27 +23,25 @@
               <span class="feather-icon icon-plus"></span>
             </div>
           </div>
-          <div class="launcher-folder" @click="toggleCollapsing">
-            <div v-i18n class="group-name">Launchers#!5</div>
+          <div class="launcher-folder">
+            <div :class="['group-name', { collapsed: isCollapsed }]" @click="toggleCollapsing">
+              <span class="feather-icon icon-grid"></span>
+            </div>
             <div class="buttons">
               <div
                 :class="['button', 'find', { active: isFinding }]"
-                @click.stop="toggleFinding"
+                @click="toggleFinding"
               >
-                <span class="feather-icon icon-search"></span>
-              </div>
-              <div class="button indicator">
-                <span v-if="isCollapsed" class="feather-icon icon-chevron-down"></span>
-                <span v-else class="feather-icon icon-chevron-up"></span>
+                <span class="feather-icon icon-filter"></span>
               </div>
             </div>
-            <div v-show="isFinding" class="find-launcher" @click.stop>
+            <div v-show="isFinding" class="find-launcher">
               <input
                 ref="searcher"
                 v-model="keyword"
                 v-i18n:placeholder
                 class="keyword"
-                placeholder="Find...#!6"
+                placeholder="Find...#!5"
                 autofocus
                 @keyup.esc="toggleFinding"
               >
@@ -280,8 +278,18 @@ export default {
 }
 .tab-list .group-name {
   flex: auto;
+  opacity: 1;
+  transition: opacity 0.2s, color 0.2s;
+}
+.tab-list .group-name.collapsed {
+  opacity: 0.5;
+}
+.tab-list .group-name:not(.collapsed) {
   color: var(--design-magenta);
 }
+.tab-list .group-name.collapsed:hover {
+  opacity: 1;
+}
 .tab-list .launcher-folder .buttons {
   flex: none;
   display: flex;
@@ -290,13 +298,12 @@ export default {
   width: 18px;
   text-align: center;
   opacity: 0.5;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s, color 0.2s;
 }
 .tab-list .launcher-folder .button + .button {
   margin-left: 3px;
 }
-.tab-list .launcher-folder .find:hover,
-.tab-list .launcher-folder:hover .indicator {
+.tab-list .launcher-folder .find:hover {
   opacity: 1;
 }
 .tab-list .find.active {

diff --git a/resources/locales/zh-CN.json b/resources/locales/zh-CN.json
@@ -3,9 +3,8 @@
   "All tabs in this window will be closed.#!2": "当前窗口的全部标签都将被关闭。",
   "Confirm#!3": "确认",
   "Cancel#!4": "取消",
-  "Launchers#!5": "启动项",
-  "Find...#!6": "查找...",
-  "A new version has been downloaded. Restart the application to apply the updates.#!7": "新版本已下载完毕，重启以应用更新。",
-  "Restart#!8": "立即重启",
-  "Later#!9": "稍后重启"
+  "Find...#!5": "查找...",
+  "A new version has been downloaded. Restart the application to apply the updates.#!6": "新版本已下载完毕，重启以应用更新。",
+  "Restart#!7": "立即重启",
+  "Later#!8": "稍后重启"
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -49,6 +49,10 @@ module.exports = {
     }),
     new VueLoaderPlugin(),
     new webpack.ProgressPlugin(),
+    new webpack.DefinePlugin({
+      __VUE_OPTIONS_API__: false,
+      __VUE_PROD_DEVTOOLS__: false,
+    }),
   ],
   optimization: {
     minimize: false,