新增软件最小化、关闭按钮位置设置
This commit is contained in:
lyswhut
@@ -1,13 +1,20 @@
|
||||
<template lang="pug">
|
||||
div(:class="$style.container" @contextmenu="handleContextMenu")
|
||||
div(:class="[$style.container, setting.controlBtnPosition == 'left' ? $style.controlBtnLeft : $style.controlBtnRight]" @contextmenu="handleContextMenu")
|
||||
//- div(:class="$style.bg" :style="bgStyle")
|
||||
//- div(:class="$style.bg2")
|
||||
div(:class="$style.header")
|
||||
div(:class="$style.control")
|
||||
div(:class="$style.controBtn")
|
||||
button(type="button" :class="$style.hide" :title="$t('core.player.hide_detail')" @click="visiblePlayerDetail(false)")
|
||||
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')
|
||||
use(xlink:href='#icon-window-hide')
|
||||
button(type="button" :class="$style.min" :title="$t('core.toolbar.min')" @click="min")
|
||||
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-minimize')
|
||||
|
||||
//- button(type="button" :class="$style.max" @click="max")
|
||||
button(type="button" :class="$style.close" :title="$t('core.toolbar.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.main")
|
||||
div(:class="$style.left")
|
||||
@@ -59,7 +66,7 @@
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapMutations } from 'vuex'
|
||||
import { rendererSend, NAMES } from 'common/ipc'
|
||||
import { base as eventBaseName } from '../../event/names'
|
||||
import { scrollTo } from '../../utils'
|
||||
|
||||
let cancelScrollFn = null
|
||||
@@ -215,6 +222,7 @@ export default {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['setting']),
|
||||
...mapGetters('player', ['isShowPlayerDetail']),
|
||||
},
|
||||
methods: {
|
||||
@@ -299,13 +307,13 @@ export default {
|
||||
this.lyricEvent.timeout = null
|
||||
},
|
||||
min() {
|
||||
rendererSend(NAMES.mainWindow.min)
|
||||
window.eventHub.$emit(eventBaseName.min)
|
||||
},
|
||||
max() {
|
||||
rendererSend(NAMES.mainWindow.max)
|
||||
window.eventHub.$emit(eventBaseName.max)
|
||||
},
|
||||
close() {
|
||||
rendererSend(NAMES.mainWindow.close)
|
||||
window.eventHub.$emit(eventBaseName.close)
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -315,7 +323,7 @@ export default {
|
||||
<style lang="less" module>
|
||||
@import '../../assets/styles/layout.less';
|
||||
|
||||
@control-btn-width: @height-toolbar * .5;
|
||||
@control-btn-width: @height-toolbar * .26;
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
@@ -332,6 +340,25 @@ export default {
|
||||
border-radius: @radius-border;
|
||||
color: @color-theme_2-font;
|
||||
border-left: 12px solid @color-theme;
|
||||
|
||||
&.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;
|
||||
@@ -358,17 +385,17 @@ export default {
|
||||
flex: 0 0 @height-toolbar;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
.control {
|
||||
|
||||
.controBtn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: @height-toolbar;
|
||||
-webkit-app-region: no-drag;
|
||||
padding: 0 @control-btn-width * 0.6;
|
||||
padding: 0 @control-btn-width;
|
||||
&:hover {
|
||||
button:before {
|
||||
.controBtnIcon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -379,94 +406,33 @@ export default {
|
||||
height: @control-btn-width;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 1px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
+ button {
|
||||
margin-left: @control-btn-width * .4;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: opacity @transition-theme;
|
||||
}
|
||||
|
||||
&.hide:after {
|
||||
&.hide {
|
||||
background-color: @color-hideBtn;
|
||||
}
|
||||
&.min:after {
|
||||
&.min {
|
||||
background-color: @color-minBtn;
|
||||
}
|
||||
&.max:after {
|
||||
&.max {
|
||||
background-color: @color-maxBtn;
|
||||
}
|
||||
&.close:after {
|
||||
&.close {
|
||||
background-color: @color-closeBtn;
|
||||
}
|
||||
|
||||
&.hide:hover:after {
|
||||
background-color: @color-hideBtn-hover;
|
||||
}
|
||||
&.min:hover:after {
|
||||
background-color: @color-minBtn-hover;
|
||||
opacity: 1;
|
||||
}
|
||||
&.max:hover:after {
|
||||
background-color: @color-maxBtn-hover;
|
||||
}
|
||||
&.close:hover:after {
|
||||
background-color: @color-closeBtn-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hide {
|
||||
&:before {
|
||||
content: '∨';
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.min {
|
||||
&:before {
|
||||
content: ' ';
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
left: @control-btn-width / 2 - 4;
|
||||
top: @control-btn-width / 2 - 1;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
&:before {
|
||||
content: '×';
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
}
|
||||
.controBtnIcon {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.main {
|
||||
@@ -684,31 +650,18 @@ each(@themes, {
|
||||
// &.hide:after {
|
||||
// background-color: ~'@{color-@{value}-hideBtn}';
|
||||
// }
|
||||
&.hide:after {
|
||||
&.hide {
|
||||
background-color: ~'@{color-@{value}-hideBtn}';
|
||||
}
|
||||
&.min:after {
|
||||
&.min {
|
||||
background-color: ~'@{color-@{value}-minBtn}';
|
||||
}
|
||||
&.max:after {
|
||||
&.max {
|
||||
background-color: ~'@{color-@{value}-maxBtn}';
|
||||
}
|
||||
&.close:after {
|
||||
&.close {
|
||||
background-color: ~'@{color-@{value}-closeBtn}';
|
||||
}
|
||||
|
||||
&.hide:hover:after {
|
||||
background-color: ~'@{color-@{value}-hideBtn-hover}';
|
||||
}
|
||||
&.min:hover:after {
|
||||
background-color: ~'@{color-@{value}-minBtn-hover}';
|
||||
}
|
||||
&.max:hover:after {
|
||||
background-color: ~'@{color-@{value}-maxBtn-hover}';
|
||||
}
|
||||
&.close:hover:after {
|
||||
background-color: ~'@{color-@{value}-closeBtn-hover}';
|
||||
}
|
||||
}
|
||||
}
|
||||
.img {
|
||||
|
||||
Reference in New Issue
Block a user