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-05-20 22:52:37 +08:00
parent 88b416c949
commit 0332b81d58
39 changed files with 1175 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/material/Btn.vue
+4 -4
View File
@@ -37,10 +37,10 @@ export default {
}
&:hover {
background-color: @color-theme_2-hover;
background-color: @color-btn-hover;
}
&:active {
background-color: @color-theme_2-active;
background-color: @color-btn-active;
}
}
@@ -55,10 +55,10 @@ each(@themes, {
color: ~'@{color-@{value}-btn}';
background-color: ~'@{color-@{value}-btn-background}';
&:hover {
background-color: ~'@{color-@{value}-theme_2-hover}';
background-color: ~'@{color-@{value}-btn-hover}';
}
&:active {
background-color: ~'@{color-@{value}-theme_2-active}';
background-color: ~'@{color-@{value}-btn-active}';
}
}
}
src/renderer/components/material/ListButtons.vue
+11 -11
View File
@@ -1,27 +1,27 @@
<template lang="pug">
div(:class="$style.btns")
button(type="button" v-if="playBtn" :title="$t('material.list_buttons.play')" @click.stop="handleClick('play')")
button(type="button" v-if="playBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.play')" @click.stop="handleClick('play')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 287.386 287.386' space='preserve')
use(xlink:href='#icon-testPlay')
button(type="button" v-if="listAddBtn" :title="$t('material.list_buttons.add_to')" @click.stop="handleClick('listAdd')")
button(type="button" v-if="listAddBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.add_to')" @click.stop="handleClick('listAdd')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 42 42' space='preserve')
use(xlink:href='#icon-addTo')
button(type="button" v-if="downloadBtn" :title="$t('material.list_buttons.download')" @click.stop="handleClick('download')")
button(type="button" v-if="downloadBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.download')" @click.stop="handleClick('download')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 475.078 475.077' space='preserve')
use(xlink:href='#icon-download')
button(type="button" :title="$t('material.list_buttons.add')" v-if="userInfo" @click.stop="handleClick('add')")
//- button(type="button" :title="$t('material.list_buttons.add')" v-if="userInfo" @click.stop="handleClick('add')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 42 42' space='preserve')
use(xlink:href='#icon-addTo')
button(type="button" v-if="startBtn" :title="$t('material.list_buttons.start')" @click.stop="handleClick('start')")
button(type="button" v-if="startBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.start')" @click.stop="handleClick('start')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
use(xlink:href='#icon-play')
button(type="button" v-if="pauseBtn" :title="$t('material.list_buttons.pause')" @click.stop="handleClick('pause')")
button(type="button" v-if="pauseBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.pause')" @click.stop="handleClick('pause')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
use(xlink:href='#icon-pause')
button(type="button" v-if="fileBtn" :title="$t('material.list_buttons.file')" @click.stop="handleClick('file')")
button(type="button" v-if="fileBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.file')" @click.stop="handleClick('file')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='-61 0 512 512' space='preserve')
use(xlink:href='#icon-musicFile')
button(type="button" v-if="searchBtn" :title="$t('material.list_buttons.search')" @click.stop="handleClick('search')")
button(type="button" v-if="searchBtn" @contextmenu.capture.stop :title="$t('material.list_buttons.search')" @click.stop="handleClick('search')")
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')
button(type="button" v-if="removeBtn" :title="$t('material.list_buttons.remove')" @click.stop="handleClick('remove')")
@@ -31,7 +31,7 @@ div(:class="$style.btns")
</template>
<script>
import { mapGetters } from 'vuex'
// import { mapGetters } from 'vuex'
export default {
props: {
@@ -49,7 +49,7 @@ export default {
},
removeBtn: {
type: Boolean,
default: true,
default: false,
},
downloadBtn: {
type: Boolean,
@@ -73,7 +73,7 @@ export default {
},
},
computed: {
...mapGetters(['userInfo']),
// ...mapGetters(['userInfo']),
},
methods: {
handleClick(action) {
src/renderer/components/material/Menu.vue
+19 -10
View File
@@ -1,6 +1,6 @@
<template lang="pug">
ul(:class="$style.list" :style="listStyles" ref="dom_list")
li(v-for="item in menus" @click="handleClick(item)" :disabled="item.disabled") {{item[itemName]}}
li(v-for="item in menus" @click="handleClick(item)" v-if="!item.hide" :disabled="item.disabled") {{item[itemName]}}
</template>
<script>
@@ -41,7 +41,7 @@ export default {
this.listStyles.top = n.y + 'px'
if (this.show) {
if (this.listStyles.transitionProperty != this.transition2) this.listStyles.transitionProperty = this.transition2
this.listStyles.transform = `scaleY(1) translateY(${this.handleGetOffset(n.y)}px)`
this.listStyles.transform = `scaleY(1) translate(${this.handleGetOffsetXY(n.x, n.y)})`
}
},
deep: true,
@@ -55,7 +55,7 @@ export default {
top: 0,
opacity: 0,
transitionProperty: 'transform, opacity',
transform: 'scale(0) translateY(0)',
transform: 'scale(0) translate(0,0)',
},
transition1: 'transform, opacity',
transition2: 'transform, opacity, top, left',
@@ -72,21 +72,30 @@ export default {
handleShow() {
this.show = true
this.listStyles.opacity = 1
this.listStyles.transform = `scaleY(1) translateY(${this.handleGetOffset(this.location.y)}px)`
this.listStyles.transform = `scaleY(1) translate(${this.handleGetOffsetXY(this.location.x, this.location.y)})`
},
handleHide(e) {
this.listStyles.opacity = 0
this.listStyles.transform = 'scale(0) translateY(0)'
this.listStyles.transform = 'scale(0) translate(0, 0)'
this.show = false
},
handleGetOffset(top) {
handleGetOffsetXY(left, top) {
const listWidth = this.$refs.dom_list.clientWidth
const listHeight = this.$refs.dom_list.clientHeight
const dom_container = this.$refs.dom_list.offsetParent
const containerWidth = dom_container.clientWidth
const containerHeight = dom_container.clientHeight
if (containerHeight < listHeight) return 0
const offsetWidth = containerWidth - left - listWidth
const offsetHeight = containerHeight - top - listHeight
if (offsetHeight > 0) return 0
return offsetHeight - 5
let x = 0
let y = 0
if (containerWidth > listWidth && offsetWidth < 0) {
x = offsetWidth - 15
}
if (containerHeight > listHeight && offsetHeight < 0) {
y = offsetHeight - 5
}
return `${x}px, ${y}px`
},
handleDocumentClick(event) {
if (!this.show) return
@@ -121,7 +130,7 @@ export default {
background-color: @color-theme_2-background_2;
box-shadow: 0 1px 8px 0 rgba(0,0,0,.2);
z-index: 10;
overflow: hidden;
li {
cursor: pointer;
min-width: 80px;
src/renderer/components/material/Select.vue
+8 -8
View File
@@ -86,10 +86,10 @@ export default {
.mixin-ellipsis-1;
&:hover {
background-color: @color-theme_2-hover;
background-color: @color-btn-hover;
}
&:active {
background-color: @color-theme_2-active;
background-color: @color-btn-active;
}
}
@@ -121,10 +121,10 @@ export default {
.mixin-ellipsis-1;
&:hover {
background-color: @color-theme_2-hover;
background-color: @color-btn-hover;
}
&:active {
background-color: @color-theme_2-active;
background-color: @color-btn-active;
}
}
}
@@ -137,10 +137,10 @@ each(@themes, {
border-left-color: ~'@{color-@{value}-tab-border-bottom}';
color: ~'@{color-@{value}-btn}';
&:hover {
background-color: ~'@{color-@{value}-theme_2-hover}';
background-color: ~'@{color-@{value}-btn-hover}';
}
&:active {
background-color: ~'@{color-@{value}-theme_2-active}';
background-color: ~'@{color-@{value}-btn-active}';
}
}
@@ -152,10 +152,10 @@ each(@themes, {
// color: ~'@{color-@{value}-btn}';
background-color: ~'@{color-@{value}-btn-background}';
&:hover {
background-color: ~'@{color-@{value}-theme_2-hover}';
background-color: ~'@{color-@{value}-btn-hover}';
}
&:active {
background-color: ~'@{color-@{value}-theme_2-active}';
background-color: ~'@{color-@{value}-btn-active}';
}
}
}
src/renderer/components/material/Selection.vue
+13 -13
View File
@@ -1,11 +1,11 @@
<template lang="pug">
div(:class="[$style.select, show ? $style.active : '']")
div(:class="$style.label" ref="dom_btn" @click="handleShow")
span {{label}}
div(:class="$style.icon")
div.content(:class="[$style.select, show ? $style.active : '']")
div.label-content(:class="$style.label" ref="dom_btn" @click="handleShow")
span.label {{label}}
div.icon(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.847 451.847' space='preserve')
use(xlink:href='#icon-down')
ul.scroll(:class="$style.list" :style="listStyles" ref="dom_list")
ul.list.scroll(:class="$style.list" :style="listStyles" ref="dom_list")
li(v-for="item in list" :class="(itemKey ? item[itemKey] : item) == value ? $style.active : null" @click="handleClick(item)" :title="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}}
</template>
@@ -140,10 +140,10 @@ export default {
}
&:hover {
background-color: @color-theme_2-hover;
background-color: @color-btn-hover;
}
&:active {
background-color: @color-theme_2-active;
background-color: @color-btn-active;
}
}
@@ -176,10 +176,10 @@ export default {
.mixin-ellipsis-1;
&:hover {
background-color: @color-theme_2-hover;
background-color: @color-btn-hover;
}
&:active {
background-color: @color-theme_2-active;
background-color: @color-btn-active;
}
&.active {
color: @color-btn;
@@ -194,10 +194,10 @@ each(@themes, {
color: ~'@{color-@{value}-btn}';
background-color: ~'@{color-@{value}-btn-background}';
&:hover {
background-color: ~'@{color-@{value}-theme_2-hover}';
background-color: ~'@{color-@{value}-btn-hover}';
}
&:active {
background-color: ~'@{color-@{value}-theme_2-active}';
background-color: ~'@{color-@{value}-btn-active}';
}
}
@@ -207,10 +207,10 @@ each(@themes, {
// color: ~'@{color-@{value}-btn}';
background-color: ~'@{color-@{value}-btn-background}';
&:hover {
background-color: ~'@{color-@{value}-theme_2-hover}';
background-color: ~'@{color-@{value}-btn-hover}';
}
&:active {
background-color: ~'@{color-@{value}-theme_2-active}';
background-color: ~'@{color-@{value}-btn-active}';
}
&.active {
color: ~'@{color-@{value}-btn}';
src/renderer/components/material/SongList.vue
+137 -52
View File
@@ -1,52 +1,54 @@
<template lang="pug">
div(:class="$style.songList")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div(v-show="list.length" :class="$style.list")
div(:class="$style.list")
div(:class="$style.thead")
table
thead
tr
th.nobreak.center(style="width: 10px;") #
th.nobreak(style="width: 25%;") {{$t('material.song_list.name')}}
th.nobreak(style="width: 20%;") {{$t('material.song_list.singer')}}
th.nobreak(style="width: 20%;") {{$t('material.song_list.album')}}
th.nobreak(style="width: 10%;") {{$t('material.song_list.time')}}
th.nobreak(style="width: 20%;") {{$t('material.song_list.action')}}
div.scroll(:class="$style.tbody" ref="dom_scrollContent")
table
tbody(@contextmenu="handleContextMenu" ref="dom_tbody")
tr(v-for='(item, index) in list' :key='item.songmid' @click="handleDoubleClick($event, index)")
td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}}
td.break(style="width: 25%;")
span.select {{item.name}}
span.badge.badge-theme-success(:class="[$style.labelQuality, $style.noSelect]" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('material.song_list.lossless')}}
span.badge.badge-theme-info(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item._types['320k']") {{$t('material.song_list.high_quality')}}
td.break(style="width: 20%;")
span.select {{item.singer}}
td.break(style="width: 20%;")
span.select {{item.albumName}}
td(style="width: 10%;")
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
td(style="width: 20%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" :search-btn="true" :class="$style.btns"
:remove-btn="false" @btn-click="handleListBtnClick"
:listAdd-btn="assertApiSupport(item.source)"
:play-btn="assertApiSupport(item.source)"
:download-btn="assertApiSupport(item.source)")
//- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
//- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
//- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
div(:class="$style.pagination")
material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div(v-show="!list.length" :class="$style.noitem")
p(v-html="noItem")
material-flow-btn(:show="isShowEditBtn && assertApiSupport(source)" :remove-btn="false" @btn-click="handleFlowBtnClick")
th.nobreak.center(:style="{ width: rowWidth.r1 }") #
th.nobreak(:style="{ width: rowWidth.r2 }") {{$t('material.song_list.name')}}
th.nobreak(:style="{ width: rowWidth.r3 }") {{$t('material.song_list.singer')}}
th.nobreak(:style="{ width: rowWidth.r4 }") {{$t('material.song_list.album')}}
th.nobreak(:style="{ width: rowWidth.r5 }") {{$t('material.song_list.time')}}
th.nobreak(:style="{ width: rowWidth.r6 }") {{$t('material.song_list.action')}}
div(:class="$style.content")
div.scroll(v-show="list.length" :class="$style.tbody" ref="dom_scrollContent")
table
tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
tr(v-for='(item, index) in list' :key='item.songmid' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)")
td.nobreak.center(:style="{ width: rowWidth.r1 }" style="padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
td.break(:style="{ width: rowWidth.r2 }")
span.select {{item.name}}
span.badge.badge-theme-success(:class="[$style.labelQuality, $style.noSelect]" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('material.song_list.lossless')}}
span.badge.badge-theme-info(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item._types['320k']") {{$t('material.song_list.high_quality')}}
td.break(:style="{ width: rowWidth.r3 }")
span.select {{item.singer}}
td.break(:style="{ width: rowWidth.r4 }")
span.select {{item.albumName}}
td(:style="{ width: rowWidth.r5 }")
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
td(:style="{ width: rowWidth.r6 }" style="padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" :class="$style.btns"
:remove-btn="false" @btn-click="handleListBtnClick"
:listAdd-btn="assertApiSupport(item.source)"
:play-btn="assertApiSupport(item.source)"
:download-btn="assertApiSupport(item.source)")
//- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
//- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
//- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
div(:class="$style.pagination")
material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div(v-show="!list.length" :class="$style.noitem")
p(v-html="noItem")
//- material-flow-btn(:show="isShowEditBtn && assertApiSupport(source)" :remove-btn="false" @btn-click="handleFlowBtnClick")
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
</template>
<script>
import { mapGetters } from 'vuex'
import { scrollTo, clipboardWriteText, assertApiSupport } from '../../utils'
import { scrollTo, clipboardWriteText, assertApiSupport, findParentNode } from '../../utils'
export default {
name: 'MaterialSongList',
model: {
@@ -83,26 +85,63 @@ export default {
type: String,
default: '列表加载中...',
},
rowWidth: {
type: Object,
default() {
return {
r1: '5%',
r2: 'auto',
r3: '22%',
r4: '22%',
r5: '8%',
r6: '13%',
}
},
},
},
computed: {
...mapGetters(['setting']),
listItemMenu() {
return [
{
name: this.$t('material.song_list.list_play'),
action: 'play',
disabled: !this.listMenu.itemMenuControl.play,
},
{
name: this.$t('material.song_list.list_download'),
action: 'download',
disabled: !this.listMenu.itemMenuControl.download,
},
{
name: this.$t('material.song_list.list_add_to'),
action: 'addTo',
disabled: !this.listMenu.itemMenuControl.addTo,
},
{
name: this.$t('material.song_list.list_search'),
action: 'search',
disabled: !this.listMenu.itemMenuControl.search,
},
]
},
},
watch: {
selectdList(n) {
const len = n.length
if (len) {
this.isShowEditBtn = true
} else {
this.isShowEditBtn = false
}
},
// selectdList(n) {
// const len = n.length
// if (len) {
// this.isShowEditBtn = true
// } else {
// this.isShowEditBtn = false
// }
// },
selectdData(n) {
const len = n.length
if (len) {
this.isShowEditBtn = true
// this.isShowEditBtn = true
this.selectdList = [...n]
} else {
this.isShowEditBtn = false
// this.isShowEditBtn = false
this.removeAllSelect()
}
},
@@ -122,6 +161,19 @@ export default {
isShiftDown: false,
isModDown: false,
},
listMenu: {
isShowItemMenu: false,
itemMenuControl: {
play: true,
addTo: true,
download: true,
search: true,
},
menuLocation: {
x: 0,
y: 0,
},
},
}
},
created() {
@@ -245,9 +297,9 @@ export default {
handleTogglePage(page) {
this.emitEvent('togglePage', page)
},
handleFlowBtnClick(action) {
this.emitEvent('flowBtnClick', action)
},
// handleFlowBtnClick(action) {
// this.emitEvent('flowBtnClick', action)
// },
emitEvent(action, data) {
this.$emit('action', { action, data })
},
@@ -256,6 +308,7 @@ export default {
},
handleContextMenu(event) {
if (!event.target.classList.contains('select')) return
event.stopImmediatePropagation()
let classList = this.$refs.dom_scrollContent.classList
classList.add(this.$style.copying)
window.requestAnimationFrame(() => {
@@ -269,6 +322,32 @@ export default {
assertApiSupport(source) {
return assertApiSupport(source)
},
handleListItemRigthClick(event, index) {
let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
if (dom_selected) dom_selected.classList.remove('selected')
this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
let dom_td = findParentNode(event.target, 'TD')
this.listMenu.rightClickItemIndex = index
this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
this.listMenu.menuLocation.y = dom_td.offsetParent.offsetTop + dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
this.$nextTick(() => {
this.listMenu.isShowItemMenu = true
})
},
hideListMenu() {
let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
if (dom_selected) dom_selected.classList.remove('selected')
this.listMenu.isShowItemMenu = false
this.listMenu.rightClickItemIndex = -1
},
handleListItemMenuClick(action) {
// console.log(action)
let index = this.listMenu.rightClickItemIndex
this.hideListMenu()
if (!action) return
this.emitEvent('menuClick', { action: action.action, index })
},
},
}
</script>
@@ -290,6 +369,7 @@ export default {
overflow: hidden;
display: flex;
flex-flow: column nowrap;
height: 100%;
}
.thead {
flex: none;
@@ -298,8 +378,13 @@ export default {
// padding-left: 10px;
}
}
.tbody {
.content {
flex: auto;
min-height: 0;
position: relative;
}
.tbody {
height: 100%;
overflow-y: auto;
td {
font-size: 12px;
src/renderer/components/material/TagList.vue
+12 -12
View File
@@ -123,10 +123,10 @@ export default {
}
&:hover {
background-color: @color-theme_2-hover;
background-color: @color-btn-hover;
}
&:active {
background-color: @color-theme_2-active;
background-color: @color-btn-active;
}
}
@@ -161,10 +161,10 @@ export default {
box-sizing: border-box;
&:hover {
background-color: @color-theme_2-hover;
background-color: @color-btn-hover;
}
&:active {
background-color: @color-theme_2-active;
background-color: @color-btn-active;
}
}
}
@@ -184,10 +184,10 @@ export default {
transition: background-color @transition-theme;
cursor: pointer;
&:hover {
background-color: @color-theme_2-hover;
background-color: @color-btn-hover;
}
&:active {
background-color: @color-theme_2-active;
background-color: @color-btn-active;
}
}
@@ -199,10 +199,10 @@ each(@themes, {
// border-left-color: ~'@{color-@{value}-tab-border-bottom}';
color: ~'@{color-@{value}-btn}';
&:hover {
background-color: ~'@{color-@{value}-theme_2-hover}';
background-color: ~'@{color-@{value}-btn-hover}';
}
&:active {
background-color: ~'@{color-@{value}-theme_2-active}';
background-color: ~'@{color-@{value}-btn-active}';
}
}
@@ -215,10 +215,10 @@ each(@themes, {
// color: ~'@{color-@{value}-btn}';
background-color: ~'@{color-@{value}-btn-background}';
&:hover {
background-color: ~'@{color-@{value}-theme_2-hover}';
background-color: ~'@{color-@{value}-btn-hover}';
}
&:active {
background-color: ~'@{color-@{value}-theme_2-active}';
background-color: ~'@{color-@{value}-btn-active}';
}
}
}
@@ -226,10 +226,10 @@ each(@themes, {
.tag {
background-color: ~'@{color-@{value}-btn-background}';
&:hover {
background-color: ~'@{color-@{value}-theme_2-hover}';
background-color: ~'@{color-@{value}-btn-hover}';
}
&:active {
background-color: ~'@{color-@{value}-theme_2-active}';
background-color: ~'@{color-@{value}-btn-active}';
}
}
src/renderer/components/material/listAddModal.vue
+13 -3
View File
@@ -2,7 +2,7 @@
material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
main(:class="$style.main")
h2
| {{$t('material.list_add_modal.title_first')}}&nbsp;
| {{$t('material.list_add_modal.' + (isMove ? 'title_first_move' : 'title_first_add'))}}&nbsp;
span(:class="$style.name") {{this.musicInfo && `${musicInfo.name}`}}
| &nbsp;{{$t('material.list_add_modal.title_last')}}
div.scroll(:class="$style.btnContent")
@@ -39,6 +39,14 @@ export default {
type: String,
default: '',
},
fromListId: {
type: String,
default: null,
},
isMove: {
type: Boolean,
default: false,
},
},
data() {
return {
@@ -60,9 +68,11 @@ export default {
},
},
methods: {
...mapMutations('list', ['listAdd', 'createUserList']),
...mapMutations('list', ['listAdd', 'listMove', 'createUserList']),
handleClick(index) {
this.listAdd({ id: this.lists[index].id, musicInfo: this.musicInfo })
this.isMove
? this.listMove({ fromId: this.fromListId, toId: this.lists[index].id, musicInfo: this.musicInfo })
: this.listAdd({ id: this.lists[index].id, musicInfo: this.musicInfo })
this.$nextTick(() => {
this.handleClose()
})
src/renderer/components/material/listAddMultipleModal.vue
+13 -3
View File
@@ -1,7 +1,7 @@
<template lang="pug">
material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
main(:class="$style.main")
h2 {{$t('material.list_add_multiple_modal.title', { num: musicList.length })}}
h2 {{$t('material.list_add_multiple_modal.' + (isMove ? 'title_move' : 'title_add'), { num: musicList.length })}}
div.scroll(:class="$style.btnContent")
material-btn(:class="$style.btn" :title="$t('material.list_add_multiple_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :title="$t('view.list.lists_new_list_btn')")
@@ -39,6 +39,14 @@ export default {
type: String,
default: '',
},
fromListId: {
type: String,
default: null,
},
isMove: {
type: Boolean,
default: false,
},
},
data() {
return {
@@ -61,9 +69,11 @@ export default {
},
},
methods: {
...mapMutations('list', ['listAddMultiple', 'createUserList']),
...mapMutations('list', ['listAddMultiple', 'listMoveMultiple', 'createUserList']),
handleClick(index) {
this.listAddMultiple({ id: this.lists[index].id, list: this.musicList })
this.isMove
? this.listMoveMultiple({ fromId: this.fromListId, toId: this.lists[index].id, list: this.musicList })
: this.listAddMultiple({ id: this.lists[index].id, list: this.musicList })
this.$nextTick(() => {
this.handleClose(true)
})