ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
lyswhut
2021-12-31 10:07:05 +08:00
parent 2a679c914b
commit f8d06d38ab
6 changed files with 183 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/core/Icons.vue
+8
View File
@@ -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
+133 -80
View File
@@ -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,55 +186,96 @@ export default {
position: relative;
flex: 0 0 @height-toolbar;
-webkit-app-region: drag;
}
width: 100%;
.controBtn {
position: absolute;
top: 0;
display: flex;
align-items: center;
height: @height-toolbar;
-webkit-app-region: no-drag;
padding: 0 @control-btn-width;
&:hover {
.controBtnIcon {
opacity: 1;
}
}
button {
position: relative;
width: @control-btn-width;
height: @control-btn-width;
background: none;
border: none;
outline: none;
padding: 1px;
cursor: pointer;
border-radius: 50%;
color: @color-theme_2;
.controBtn {
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
-webkit-app-region: no-drag;
}
&.hide {
background-color: @color-hideBtn;
&.controlBtnLeft {
.controBtn {
align-items: center;
padding: 0 @control-btn-width;
left: 0;
flex-direction: row-reverse;
height: @height-toolbar * .7;
&:hover {
.controBtnIcon {
opacity: 1;
}
}
button {
position: relative;
width: @control-btn-width;
height: @control-btn-width;
background: none;
border: none;
outline: none;
padding: 1px;
cursor: pointer;
border-radius: 50%;
color: @color-theme_2;
display: flex;
justify-content: center;
align-items: center;
+ button {
margin-right: (@control-btn-width / 2);
}
&.hide {
background-color: @color-hideBtn;
}
&.min {
background-color: @color-minBtn;
}
&.max {
background-color: @color-maxBtn;
}
&.close {
background-color: @color-closeBtn;
}
}
}
&.min {
background-color: @color-minBtn;
}
&.max {
background-color: @color-maxBtn;
}
&.close {
background-color: @color-closeBtn;
.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;
.controBtnIcon {
opacity: 0;
transition: opacity 0.2s ease-in-out;
&:hover {
&.hide, &.min, &.max {
background-color: @color-btn-hover;
}
&.close {
background-color: @color-closeBtn;
}
}
}
}
}
}
.main {
@@ -465,23 +499,42 @@ each(@themes, {
background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%);
}
}
.controBtn {
button {
color: ~'@{color-@{value}-theme_2}';
// &.hide:after {
// background-color: ~'@{color-@{value}-hideBtn}';
// }
&.hide {
background-color: ~'@{color-@{value}-hideBtn}';
.header {
&.controlBtnLeft {
.controBtn {
button {
color: ~'@{color-@{value}-theme_2}';
// &.hide:after {
// background-color: ~'@{color-@{value}-hideBtn}';
// }
&.hide {
background-color: ~'@{color-@{value}-hideBtn}';
}
&.min {
background-color: ~'@{color-@{value}-minBtn}';
}
&.max {
background-color: ~'@{color-@{value}-maxBtn}';
}
&.close {
background-color: ~'@{color-@{value}-closeBtn}';
}
}
}
&.min {
background-color: ~'@{color-@{value}-minBtn}';
}
&.max {
background-color: ~'@{color-@{value}-maxBtn}';
}
&.close {
background-color: ~'@{color-@{value}-closeBtn}';
}
&.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}';
}
}
}
}
}
}
src/renderer/components/core/Toolbar/ControlBtns.vue
+27 -47
View File
@@ -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">
<use xlink:href="#icon-window-minimize"></use>
<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-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">
<use xlink:href="#icon-window-close"></use>
<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-2"></use>
</svg>
</button>
</div>
@@ -39,68 +39,48 @@ export default {
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
@control-btn-width: @height-toolbar * .26;
.control {
display: flex;
align-items: center;
height: 100%;
left: 15px;
align-self: flex-start;
-webkit-app-region: no-drag;
padding: 0 @control-btn-width * 1.5;
&:hover {
.controlBtniIcon {
opacity: 1;
}
}
height: 30px;
.btn {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: @control-btn-width;
height: @control-btn-width;
width: 46px;
height: 30px;
background: none;
border: none;
outline: none;
padding: 1px;
cursor: pointer;
border-radius: 50%;
color: @color-theme_2;
+ .btn {
margin-left: @control-btn-width * 1.2;
}
&.min {
background-color: @color-minBtn;
}
&.max {
background-color: @color-maxBtn;
}
&.close {
background-color: @color-closeBtn;
color: @color-theme;
transition: background-color 0.2s ease-in-out;
&:hover {
&.min, &.max {
background-color: @color-btn-hover;
}
&.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}';
&.min {
background-color: ~'@{color-@{value}-minBtn}';
}
&.max {
background-color: ~'@{color-@{value}-maxBtn}';
}
&.close {
background-color: ~'@{color-@{value}-closeBtn}';
color: ~'@{color-@{value}-theme_2-font-label}';
&:hover {
&.min, &.max {
background-color: ~'@{color-@{value}-btn-hover}';
}
&.close {
background-color: ~'@{color-@{value}-closeBtn}';
}
}
}
}