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

新增软件最小化、关闭按钮位置设置

Browse Source
This commit is contained in:
lyswhut
2020-06-11 21:41:15 +08:00
parent 2a81d41c2c
commit b811906bae
18 changed files with 335 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/core/Aside.vue
+95 -14
View File
@@ -1,6 +1,14 @@
<template lang="pug">
div(:class="$style.aside")
div(:class="['animated', logoAnimate, $style.logo]") L X
div(:class="$style.controlBtn" v-if="setting.controlBtnPosition == 'left'")
button(type="button" :class="$style.close" :title="$t('core.toolbar.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')
button(type="button" :class="$style.min" :title="$t('core.toolbar.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')
div(:class="['animated', logoAnimate, $style.logo]" v-else) L X
//- svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 127 61' space='preserve')
use(xlink:href='#icon-logo')
@@ -49,6 +57,7 @@ div(:class="$style.aside")
<script>
import { mapGetters } from 'vuex'
import { base as eventBaseName } from '../../event/names'
// import { getRandom } from '../../utils'
export default {
data() {
@@ -77,12 +86,21 @@ export default {
// mounted() {
// this.logoAnimate = this.animates[getRandom(0, this.animates.length)]
// },
// methods: {
// handleMouseEnter() {
// console.log('object')
// this.logoAnimate = this.animates[getRandom(0, this.animates.length)]
// },
// },
methods: {
// handleMouseEnter() {
// console.log('object')
// this.logoAnimate = this.animates[getRandom(0, this.animates.length)]
// },
min() {
window.eventHub.$emit(eventBaseName.min)
},
max() {
window.eventHub.$emit(eventBaseName.max)
},
close() {
window.eventHub.$emit(eventBaseName.close)
},
},
}
</script>
@@ -102,11 +120,58 @@ export default {
display: flex;
flex-flow: column nowrap;
}
:global(.nd) {
.aside {
-webkit-app-region: no-drag;
@control-btn-width: @height-toolbar * .26;
@control-btn-height: 6%;
.controlBtn {
box-sizing: border-box;
padding: 0 7px;
display: flex;
align-items: center;
justify-content: space-evenly;
width: 100%;
height: @control-btn-height;
-webkit-app-region: no-drag;
opacity: .5;
transition: opacity @transition-theme;
&:hover {
opacity: .8;
.controlBtniIcon {
opacity: 1;
}
}
button {
position: relative;
width: @control-btn-width;
height: @control-btn-width;
background: none;
border: none;
// display: flex;
// justify-content: center;
// align-items: center;
outline: none;
padding: 1px;
cursor: pointer;
border-radius: 50%;
color: #fff;
&.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;
}
.logo {
box-sizing: border-box;
padding: 0 13%;
@@ -115,15 +180,18 @@ export default {
flex: none;
text-align: center;
line-height: 50px;
font-weight: bold;
// -webkit-app-region: no-drag;
}
.menu {
flex: auto;
// display: flex;
// flex-flow: column nowrap;
// justify-content: center;
// padding-bottom: 50px;
// &.controlBtnLeft {
// display: flex;
// flex-flow: column nowrap;
// justify-content: center;
// padding-bottom: @control-btn-height;
// }
// padding: 5px;
dl {
-webkit-app-region: no-drag;
@@ -187,6 +255,19 @@ each(@themes, {
.aside {
background-color: ~'@{color-@{value}-theme-sidebar}';
}
.controlBtn {
button {
&.min {
background-color: ~'@{color-@{value}-minBtn}';
}
&.max {
background-color: ~'@{color-@{value}-maxBtn}';
}
&.close {
background-color: ~'@{color-@{value}-closeBtn}';
}
}
}
.logo {
color: ~'@{color-@{value}-theme-font}';
}