修改右边位置时的控制按钮为windows风格

publish/changeLog.md

@@ -16,6 +16,7 @@
 - 同步功能添加对列表顺序调整的控制，确保手动调整位置后的列表与不同的电脑同步时，列表位置不会被还原
 - 优化歌单详情、排行榜名右键的播放按钮的播放机制，现在不用等待整个列表（多页时）加载完成才能播放了
 - 为播放详情页、桌面歌词添加延迟滚动，播放详情页略微减小已激活歌词的缩放大小及桌面歌词翻译大小
+- 修改右边控制按钮为windows风格
 
 ### 修复
 

src/renderer/assets/styles/variables.less

@@ -20,7 +20,7 @@
 @color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 80%);
 @color-theme_2-active: fadeout(lighten(@color-theme, 10%), 70%);
 @color-theme_2-font:desaturate( darken(@color-theme_2, 70%), 90%);
-@color-theme_2-font-label: fadeout(@color-theme_2-font, 50%);
+@color-theme_2-font-label: fadeout(@color-theme_2-font, 55%);
 // @color-theme_2-line: transparent;
 @color-theme_2-line: lighten(@color-theme, 35%);
 @color-reply-floor: fadeout(@color-theme, 95%);
@@ -91,7 +91,7 @@
 @color-green-theme_2-hover: fadeout(lighten(@color-green-theme, 10%), 80%);
 @color-green-theme_2-active: fadeout(lighten(@color-green-theme, 10%), 70%);
 @color-green-theme_2-font: darken(desaturate(@color-green-theme_2, 70%), 90%);
-@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 50%);
+@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 55%);
 // @color-green-theme_2-line: transparent;
 @color-green-theme_2-line: lighten(@color-green-theme, 45%);
 @color-green-reply-floor: fadeout(@color-green-theme, 95%);
@@ -151,7 +151,7 @@
 @color-yellow-theme_2-hover: fadeout(lighten(@color-yellow-theme, 10%), 70%);
 @color-yellow-theme_2-active: fadeout(lighten(@color-yellow-theme, 10%), 60%);
 @color-yellow-theme_2-font: darken(desaturate(@color-yellow-theme_2, 70%), 90%);
-@color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 50%);
+@color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 55%);
 // @color-yellow-theme_2-line: transparent;
 @color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%);
 @color-yellow-reply-floor: fadeout(@color-yellow-theme, 94%);
@@ -210,7 +210,7 @@
 @color-orange-theme_2-hover: fadeout(darken(@color-orange-theme, 5%), 80%);
 @color-orange-theme_2-active: fadeout(darken(@color-orange-theme, 5%), 70%);
 @color-orange-theme_2-font: darken(desaturate(@color-orange-theme_2, 70%), 90%);
-@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 50%);
+@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 55%);
 // @color-orange-theme_2-line: transparent;
 @color-orange-theme_2-line: lighten(@color-orange-theme, 36%);
 @color-orange-reply-floor: fadeout(@color-orange-theme, 95%);
@@ -269,7 +269,7 @@
 @color-blue-theme_2-hover: fadeout(lighten(@color-blue-theme, 10%), 80%);
 @color-blue-theme_2-active: fadeout(lighten(@color-blue-theme, 10%), 70%);
 @color-blue-theme_2-font: darken(desaturate(@color-blue-theme_2, 70%), 90%);
-@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 50%);
+@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 55%);
 // @color-blue-theme_2-line: transparent;
 @color-blue-theme_2-line: lighten(@color-blue-theme, 42%);
 @color-blue-reply-floor: fadeout(@color-blue-theme, 95%);
@@ -328,7 +328,7 @@
 @color-red-theme_2-background_1: #fff;
 @color-red-theme_2-background_2: fadeout(@color-red-theme_2-background_1, 2%);
 @color-red-theme_2-font: darken(desaturate(@color-red-theme_2, 70%), 90%);
-@color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 50%);
+@color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 55%);
 // @color-red-theme_2-line: transparent;
 @color-red-theme_2-line: lighten(@color-red-theme, 42%);
 @color-red-reply-floor: fadeout(@color-red-theme, 95%);
@@ -389,7 +389,7 @@
 @color-pink-theme_2-hover: fadeout(lighten(@color-pink-theme, 10%), 75%);
 @color-pink-theme_2-active: fadeout(lighten(@color-pink-theme, 10%), 60%);
 @color-pink-theme_2-font: darken(desaturate(@color-pink-theme_2, 70%), 90%);
-@color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 50%);
+@color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 55%);
 // @color-pink-theme_2-line: transparent;
 @color-pink-theme_2-line: lighten(@color-pink-theme, 25%);
 @color-pink-reply-floor: fadeout(@color-pink-theme, 93%);
@@ -448,7 +448,7 @@
 @color-purple-theme_2-hover: fadeout(lighten(@color-purple-theme, 10%), 80%);
 @color-purple-theme_2-active: fadeout(lighten(@color-purple-theme, 10%), 70%);
 @color-purple-theme_2-font: darken(desaturate(@color-purple-theme_2, 70%), 90%);
-@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 50%);
+@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 55%);
 // @color-purple-theme_2-line: transparent;
 @color-purple-theme_2-line: lighten(@color-purple-theme, 43%);
 @color-purple-reply-floor: fadeout(@color-purple-theme, 95%);
@@ -507,7 +507,7 @@
 @color-grey-theme_2-hover: fadeout(lighten(@color-grey-theme, 10%), 80%);
 @color-grey-theme_2-active: fadeout(lighten(@color-grey-theme, 10%), 70%);
 @color-grey-theme_2-font: darken(desaturate(@color-grey-theme_2, 70%), 90%);
-@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 50%);
+@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 55%);
 // @color-grey-theme_2-line: transparent;
 @color-grey-theme_2-line: lighten(@color-grey-theme, 47%);
 @color-grey-reply-floor: fadeout(@color-grey-theme, 95%);
@@ -567,7 +567,7 @@
 @color-ming-theme_2-background_1: #fff;
 @color-ming-theme_2-background_2: fadeout(@color-ming-theme_2-background_1, 2%);
 @color-ming-theme_2-font: darken(desaturate(@color-ming-theme_2, 70%), 90%);
-@color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 50%);
+@color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 55%);
 // @color-ming-theme_2-line: transparent;
 @color-ming-theme_2-line: lighten(@color-ming-theme, 60%);
 @color-ming-reply-floor: fadeout(@color-ming-theme, 95%);
@@ -629,7 +629,7 @@
 @color-blue2-theme_2-hover: fadeout(lighten(@color-blue2-theme, 10%), 80%);
 @color-blue2-theme_2-active: fadeout(lighten(@color-blue2-theme, 10%), 70%);
 @color-blue2-theme_2-font: darken(desaturate(@color-blue2-theme_2, 70%), 90%);
-@color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 50%);
+@color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 55%);
 // @color-blue2-theme_2-line: transparent;
 @color-blue2-theme_2-line: lighten(@color-blue2-theme, 41%);
 @color-blue2-reply-floor: fadeout(@color-blue2-theme, 95%);

src/renderer/components/core/Icons.vue

@@ -162,10 +162,18 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
       //- 0 0 24 24
       path(d="M20,14H4V10H20")
 
+    g#icon-window-minimize-2(fill='currentColor')
+      //- 0 0 24 24
+      path(d="M19,13H5V11H19V13Z")
+
     g#icon-window-close(fill='currentColor')
       //- 0 0 24 24
       path(d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z")
 
+    g#icon-window-close-2(fill='currentColor')
+      //- 0 0 24 24
+      path(d="M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z")
+
 
     g#icon-list-loop(fill='currentColor')
       // 0 0 24 24

src/renderer/components/core/PlayDetail/index.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
 transition(enter-active-class="animated lightSpeedIn" leave-active-class="animated slideOutDown" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave")
-  div(:class="[$style.container, setting.controlBtnPosition == 'left' ? $style.controlBtnLeft : $style.controlBtnRight]" @contextmenu="handleContextMenu" v-if="isShowPlayerDetail")
+  div(:class="$style.container" @contextmenu="handleContextMenu" v-if="isShowPlayerDetail")
     //- div(:class="$style.bg" :style="bgStyle")
     //- div(:class="$style.bg2")
-    div(:class="$style.header")
+    div(:class="[$style.header, $style.controlBtnLeft]" v-if="setting.controlBtnPosition == 'left'")
       div(:class="$style.controBtn")
         button(type="button" :class="$style.hide" :tips="$t('player__hide_detail_tip')" @click="hide")
           svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='80%' viewBox='0 0 30.727 30.727' space='preserve')
@@ -16,6 +16,19 @@ transition(enter-active-class="animated lightSpeedIn" leave-active-class="animat
         button(type="button" :class="$style.close" :tips="$t('close')" @click="close")
           svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
             use(xlink:href='#icon-window-close')
+    div(:class="[$style.header, $style.controlBtnRight]" v-else)
+      div(:class="$style.controBtn")
+        button(type="button" :class="$style.hide" :tips="$t('player__hide_detail_tip')" @click="hide")
+          svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='35%' viewBox='0 0 30.727 30.727' space='preserve')
+            use(xlink:href='#icon-window-hide')
+        button(type="button" :class="$style.min" :tips="$t('min')" @click="min")
+          svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='60%' viewBox='0 0 24 24' space='preserve')
+            use(xlink:href='#icon-window-minimize-2')
+
+        //- button(type="button" :class="$style.max" @click="max")
+        button(type="button" :class="$style.close" :tips="$t('close')" @click="close")
+          svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='60%' viewBox='0 0 24 24' space='preserve')
+            use(xlink:href='#icon-window-close-2')
 
     div(:class="[$style.main, {[$style.showComment]: isShowPlayComment}]")
       div.left(:class="$style.left")
@@ -148,26 +161,6 @@ export default {
     box-sizing: border-box;
   }
 
-  &.controlBtnLeft {
-    .controBtn {
-      left: 0;
-      flex-direction: row-reverse;
-      height: @height-toolbar * .7;
-      button + button {
-        margin-right: @control-btn-width / 2;
-      }
-    }
-  }
-  &.controlBtnRight {
-    .controBtn {
-      right: @control-btn-width * .5;
-      button + button {
-        margin-left: @control-btn-width * 1.2;
-      }
-    }
-  }
-
-
 }
 .bg {
   position: absolute;
@@ -193,16 +186,22 @@ export default {
   position: relative;
   flex: 0 0 @height-toolbar;
   -webkit-app-region: drag;
-}
+  width: 100%;
 
-.controBtn {
+  .controBtn {
     position: absolute;
     top: 0;
     display: flex;
-  align-items: center;
-  height: @height-toolbar;
     -webkit-app-region: no-drag;
+  }
+
+  &.controlBtnLeft {
+    .controBtn {
+      align-items: center;
       padding: 0 @control-btn-width;
+      left: 0;
+      flex-direction: row-reverse;
+      height: @height-toolbar * .7;
       &:hover {
         .controBtnIcon {
           opacity: 1;
@@ -223,6 +222,9 @@ export default {
         display: flex;
         justify-content: center;
         align-items: center;
+        + button {
+          margin-right: (@control-btn-width / 2);
+        }
 
         &.hide {
           background-color: @color-hideBtn;
@@ -237,11 +239,43 @@ export default {
           background-color: @color-closeBtn;
         }
       }
-}
+    }
 
-.controBtnIcon {
+    .controBtnIcon {
       opacity: 0;
       transition: opacity 0.2s ease-in-out;
+    }
+  }
+  &.controlBtnRight {
+    align-self: flex-start;
+    .controBtn {
+      right: 0;
+      button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        width: 46px;
+        height: 30px;
+        background: none;
+        border: none;
+        outline: none;
+        padding: 1px;
+        cursor: pointer;
+        color: @color-theme;
+        transition: background-color 0.2s ease-in-out;
+
+        &:hover {
+          &.hide, &.min, &.max {
+            background-color: @color-btn-hover;
+          }
+          &.close {
+            background-color: @color-closeBtn;
+          }
+        }
+      }
+    }
+  }
 }
 
 .main {
@@ -465,6 +499,8 @@ each(@themes, {
         background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%);
       }
     }
+    .header {
+      &.controlBtnLeft {
         .controBtn {
           button {
             color: ~'@{color-@{value}-theme_2}';
@@ -485,6 +521,23 @@ each(@themes, {
             }
           }
         }
+      }
+      &.controlBtnRight {
+        .controBtn {
+          button {
+            color: ~'@{color-@{value}-theme_2-font-label}';
+            &:hover {
+              &.hide, &.min, &.max {
+                background-color: ~'@{color-@{value}-btn-hover}';
+              }
+              &.close {
+                background-color: ~'@{color-@{value}-closeBtn}';
+              }
+            }
+          }
+        }
+      }
+    }
     .img {
       box-shadow: 0 0 4px ~'@{color-@{value}-theme-hover}';
       // border-color: ~'@{color-@{value}-theme-hover}';

src/renderer/components/core/Toolbar/ControlBtns.vue

@@ -1,13 +1,13 @@
 <template>
 <div :class="$style.control">
   <button type="button" :class="[$style.btn, $style.min]" :tips="$t('min')" @click="min">
-    <svg :class="$style.controlBtniIcon" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 24 24" space="preserve">
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="60%" viewBox="0 0 24 24" space="preserve">
-      <use xlink:href="#icon-window-minimize"></use>
+      <use xlink:href="#icon-window-minimize-2"></use>
     </svg>
   </button>
   <button type="button" :class="[$style.btn, $style.close]" :tips="$t('close')" @click="close">
-    <svg :class="$style.controlBtniIcon" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 24 24" space="preserve">
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="60%" viewBox="0 0 24 24" space="preserve">
-      <use xlink:href="#icon-window-close"></use>
+      <use xlink:href="#icon-window-close-2"></use>
     </svg>
   </button>
 </div>
@@ -39,70 +39,50 @@ export default {
 <style lang="less" module>
 @import '@renderer/assets/styles/layout.less';
 
-@control-btn-width: @height-toolbar * .26;
-
 .control {
   display: flex;
-  align-items: center;
+  align-self: flex-start;
-  height: 100%;
-  left: 15px;
   -webkit-app-region: no-drag;
-  padding: 0 @control-btn-width * 1.5;
+  height: 30px;
-  &:hover {
-    .controlBtniIcon {
-      opacity: 1;
-    }
-  }
 
   .btn {
     display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
-    width: @control-btn-width;
+    width: 46px;
-    height: @control-btn-width;
+    height: 30px;
     background: none;
     border: none;
     outline: none;
     padding: 1px;
     cursor: pointer;
-    border-radius: 50%;
+    color: @color-theme;
-    color: @color-theme_2;
+    transition: background-color 0.2s ease-in-out;
-
+    &:hover {
-    + .btn {
+      &.min, &.max {
-      margin-left: @control-btn-width * 1.2;
+        background-color: @color-btn-hover;
-    }
-
-    &.min {
-      background-color: @color-minBtn;
-    }
-    &.max {
-      background-color: @color-maxBtn;
       }
       &.close {
         background-color: @color-closeBtn;
       }
     }
-}
+  }
-
-.controlBtniIcon {
-  opacity: 0;
-  transition: opacity 0.2s ease-in-out;
 }
 
 each(@themes, {
   :global(#root.@{value}) {
     .btn {
-      color: ~'@{color-@{value}-theme_2}';
+      color: ~'@{color-@{value}-theme_2-font-label}';
-
+      &:hover {
-      &.min {
+        &.min, &.max {
-        background-color: ~'@{color-@{value}-minBtn}';
+          background-color: ~'@{color-@{value}-btn-hover}';
-      }
-      &.max {
-        background-color: ~'@{color-@{value}-maxBtn}';
         }
         &.close {
           background-color: ~'@{color-@{value}-closeBtn}';
         }
       }
     }
+  }
 })
 </style>

src/renderer/plugins/Tips/index.js

@@ -71,11 +71,13 @@ document.body.addEventListener('click', updateTips)
 
 document.body.addEventListener('contextmenu', updateTips)
 
+window.eventHub.on(eventBaseName.focus, () => {
+  hideTips()
+})
 window.eventHub.on(eventBaseName.dragStart, () => {
   isDraging = true
   hideTips()
 })
-
 window.eventHub.on(eventBaseName.dragEnd, () => {
   isDraging = false
 })