新增软件最小化、关闭按钮位置设置
This commit is contained in:
lyswhut
@@ -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}';
|
||||
}
|
||||
|
||||
@@ -124,5 +124,17 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
|
||||
g#icon-list-add(fill='currentColor')
|
||||
//- 0 0 24 24
|
||||
path(d='M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z')
|
||||
|
||||
g#icon-window-hide(fill='currentColor')
|
||||
//- 0 0 30.727 30.727
|
||||
path(d="M29.994,10.183L15.363,24.812L0.733,10.184c-0.977-0.978-0.977-2.561,0-3.536c0.977-0.977,2.559-0.976,3.536,0l11.095,11.093L26.461,6.647c0.977-0.976,2.559-0.976,3.535,0C30.971,7.624,30.971,9.206,29.994,10.183z")
|
||||
|
||||
g#icon-window-minimize(fill='currentColor')
|
||||
//- 0 0 24 24
|
||||
path(d="M20,14H4V10H20")
|
||||
|
||||
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")
|
||||
</template>
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -1,21 +1,28 @@
|
||||
<template lang="pug">
|
||||
div(:class="$style.toolbar")
|
||||
div(:class="[$style.toolbar, setting.controlBtnPosition == 'left' ? $style.controlBtnLeft : $style.controlBtnRight]")
|
||||
//- img(v-if="icon")
|
||||
//- h1 {{title}}
|
||||
material-search-input(:class="$style.input"
|
||||
@event="handleEvent" :list="tipList" :visibleList="visibleList"
|
||||
v-model="searchText")
|
||||
div(:class="$style.control")
|
||||
|
||||
div(:class="$style.logo" v-if="setting.controlBtnPosition == 'left'") L X
|
||||
div(:class="$style.control" v-else)
|
||||
button(type="button" :class="$style.min" :title="$t('core.toolbar.min')" @click="min")
|
||||
svg(:class="$style.icon" 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.icon" 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')
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { rendererSend, NAMES } from 'common/ipc'
|
||||
import { mapGetters, mapMutations } from 'vuex'
|
||||
import music from '../../utils/music'
|
||||
import { debounce } from '../../utils'
|
||||
import { base as eventBaseName } from '../../event/names'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -113,13 +120,13 @@ export default {
|
||||
},
|
||||
|
||||
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)
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -129,51 +136,48 @@ export default {
|
||||
<style lang="less" module>
|
||||
@import '../../assets/styles/layout.less';
|
||||
|
||||
@control-btn-width: @height-toolbar * .5;
|
||||
@control-btn-width: @height-toolbar * .26;
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
height: @height-toolbar;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 15px;
|
||||
-webkit-app-region: drag;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
:global(.nd) {
|
||||
.toolbar {
|
||||
-webkit-app-region: no-drag;
|
||||
|
||||
&.controlBtnLeft {
|
||||
.control {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.controlBtnRight {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.input {
|
||||
-webkit-app-region: no-drag;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 13px;
|
||||
|
||||
.logo {
|
||||
box-sizing: border-box;
|
||||
padding: 0 @height-toolbar * .4;
|
||||
height: @height-toolbar;
|
||||
color: @color-theme;
|
||||
flex: none;
|
||||
text-align: center;
|
||||
line-height: @height-toolbar;
|
||||
font-weight: bold;
|
||||
// -webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
// img {
|
||||
// flex: none;
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
// h1 {
|
||||
// text-align: center;
|
||||
// padding: 8px;
|
||||
// flex: auto;
|
||||
// -webkit-app-region: drag;
|
||||
// -webkit-user-select: none;
|
||||
// }
|
||||
|
||||
.control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
left: 15px;
|
||||
-webkit-app-region: no-drag;
|
||||
padding: 0 @control-btn-width * 0.6;
|
||||
padding: 0 @control-btn-width * 1.5;
|
||||
&:hover {
|
||||
button:before {
|
||||
.icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -184,100 +188,52 @@ export default {
|
||||
height: @control-btn-width;
|
||||
background: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
padding: 1px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
|
||||
+ button {
|
||||
margin-left: @control-btn-width * 0.4;
|
||||
margin-left: @control-btn-width * 1.2;
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
&.min:after {
|
||||
&.min {
|
||||
background-color: @color-minBtn;
|
||||
}
|
||||
&.max:after {
|
||||
&.max {
|
||||
background-color: @color-maxBtn;
|
||||
}
|
||||
&.close:after {
|
||||
&.close {
|
||||
background-color: @color-closeBtn;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.icon {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
each(@themes, {
|
||||
:global(#container.@{value}) {
|
||||
.control {
|
||||
button {
|
||||
&.min:after {
|
||||
&.min {
|
||||
background-color: ~'@{color-@{value}-minBtn}';
|
||||
}
|
||||
&.max:after {
|
||||
&.max {
|
||||
background-color: ~'@{color-@{value}-maxBtn}';
|
||||
}
|
||||
&.close:after {
|
||||
&.close {
|
||||
background-color: ~'@{color-@{value}-closeBtn}';
|
||||
}
|
||||
&.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}';
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo {
|
||||
color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
}
|
||||
})
|
||||
</style>
|
||||
|
||||
@@ -1,24 +1,25 @@
|
||||
<template lang="pug">
|
||||
div(:class="[$style.search, focus ? $style.active : '', big ? $style.big : '', small ? $style.small : '']")
|
||||
div(:class="$style.form")
|
||||
input(:placeholder="placeholder" v-model.trim="text" ref="dom_input"
|
||||
@focus="handleFocus" @blur="handleBlur" @input="$emit('input', text)"
|
||||
@change="sendEvent('change')"
|
||||
@keyup.enter="handleSearch"
|
||||
@keyup.40.prevent="handleKeyDown"
|
||||
@keyup.38.prevent="handleKeyUp"
|
||||
@contextmenu="handleContextMenu")
|
||||
button(type="button" @click="handleSearch")
|
||||
slot
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 30.239 30.239' space='preserve')
|
||||
use(xlink:href='#icon-search')
|
||||
//- transition(name="custom-classes-transition"
|
||||
//- enter-active-class="animated flipInX"
|
||||
//- leave-active-class="animated flipOutX")
|
||||
div(v-if="list" :class="$style.list" :style="listStyle")
|
||||
ul(ref="dom_list")
|
||||
li(v-for="(item, index) in list" :key="item" :class="selectIndex === index ? $style.select : null" @mouseenter="selectIndex = index" @click="handleTemplistClick(index)")
|
||||
span {{item}}
|
||||
div(:class="$style.container")
|
||||
div(:class="[$style.search, focus ? $style.active : '', big ? $style.big : '', small ? $style.small : '']")
|
||||
div(:class="$style.form")
|
||||
input(:placeholder="placeholder" v-model.trim="text" ref="dom_input"
|
||||
@focus="handleFocus" @blur="handleBlur" @input="$emit('input', text)"
|
||||
@change="sendEvent('change')"
|
||||
@keyup.enter="handleSearch"
|
||||
@keyup.40.prevent="handleKeyDown"
|
||||
@keyup.38.prevent="handleKeyUp"
|
||||
@contextmenu="handleContextMenu")
|
||||
button(type="button" @click="handleSearch")
|
||||
slot
|
||||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 30.239 30.239' space='preserve')
|
||||
use(xlink:href='#icon-search')
|
||||
//- transition(name="custom-classes-transition"
|
||||
//- enter-active-class="animated flipInX"
|
||||
//- leave-active-class="animated flipOutX")
|
||||
div(v-if="list" :class="$style.list" :style="listStyle")
|
||||
ul(ref="dom_list")
|
||||
li(v-for="(item, index) in list" :key="item" :class="selectIndex === index ? $style.select : null" @mouseenter="selectIndex = index" @click="handleTemplistClick(index)")
|
||||
span {{item}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -135,12 +136,20 @@ export default {
|
||||
<style lang="less" module>
|
||||
@import '../../assets/styles/layout.less';
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 35%;
|
||||
height: @height-toolbar * 0.52;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.search {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
border-radius: @form-radius;
|
||||
transition: box-shadow .4s ease, background-color @transition-theme;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
width: 35%;
|
||||
background-color: @color-search-form-background;
|
||||
|
||||
&.active {
|
||||
|
||||
Reference in New Issue
Block a user