1307 lines
42 KiB
Vue
1307 lines
42 KiB
Vue
<template lang="pug">
|
|
div(:class="$style.container" @click="handleContainerClick")
|
|
div(:class="$style.lists" ref="dom_lists")
|
|
div(:class="$style.listHeader")
|
|
h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
|
|
button(:class="$style.listsAdd" @click="handleShowNewList" :tips="$t('view.list.lists_new_list_btn')")
|
|
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='70%' viewBox='0 0 24 24' space='preserve')
|
|
use(xlink:href='#icon-list-add')
|
|
ul.scroll(:class="$style.listsContent" ref="dom_lists_list")
|
|
li(:class="[$style.listsItem, defaultList.id == listId ? $style.active : null]" :tips="defaultList.name"
|
|
@contextmenu="handleListsItemRigthClick($event, -2)"
|
|
@click="handleListToggle(defaultList.id)")
|
|
span(:class="$style.listsLabel") {{defaultList.name}}
|
|
li(:class="[$style.listsItem, loveList.id == listId ? $style.active : null]" :tips="loveList.name"
|
|
@contextmenu="handleListsItemRigthClick($event, -1)"
|
|
@click="handleListToggle(loveList.id)")
|
|
span(:class="$style.listsLabel") {{loveList.name}}
|
|
li.user-list(
|
|
:class="[$style.listsItem, item.id == listId ? $style.active : null, listsData.rightClickItemIndex == index ? $style.clicked : null, fetchingListStatus[item.id] ? $style.fetching : null]"
|
|
@contextmenu="handleListsItemRigthClick($event, index)"
|
|
:tips="item.name" v-for="(item, index) in userList" :key="item.id")
|
|
span(:class="$style.listsLabel" @click="handleListToggle(item.id, index + 2)") {{item.name}}
|
|
input.key-bind(:class="$style.listsInput" @contextmenu.stop type="text" @keyup.enter="handleListsSave(index, $event)" @blur="handleListsSave(index, $event)" :value="item.name" :placeholder="item.name")
|
|
transition(enter-active-class="animated-fast slideInLeft" leave-active-class="animated-fast fadeOut" @after-leave="handleListsNewAfterLeave")
|
|
li(:class="[$style.listsItem, $style.listsNew, listsData.isNewLeave ? $style.newLeave : null]" v-if="listsData.isShowNewList")
|
|
input.key-bind(:class="$style.listsInput" @contextmenu.stop ref="dom_listsNewInput" type="text" @keyup.enter="handleListsCreate" @blur="handleListsCreate" :placeholder="$t('view.list.lists_new_list_input')")
|
|
div(:class="$style.list")
|
|
//- transition
|
|
div(:class="$style.thead")
|
|
table
|
|
thead
|
|
tr
|
|
th.nobreak.center(style="width: 5%;") #
|
|
th.nobreak {{$t('view.list.name')}}
|
|
th.nobreak(style="width: 22%;") {{$t('view.list.singer')}}
|
|
th.nobreak(style="width: 22%;") {{$t('view.list.album')}}
|
|
th.nobreak(style="width: 9%;") {{$t('view.list.time')}}
|
|
th.nobreak(style="width: 15%;") {{$t('view.list.action')}}
|
|
div(v-if="list.length" :class="$style.content" ref="dom_listContent")
|
|
material-virtualized-list(:list="list" key-name="songmid" ref="list" #default="{ item, index }" :item-height="37"
|
|
@scroll="handleScroll" containerClass="scroll" contentClass="list" @contextmenu.native.capture="handleContextMenu")
|
|
div.list-item(@click="handleDoubleClick($event, index)"
|
|
:class="[{ [$style.active]: isPlayList && playInfo.playIndex === index }, { selected: selectedIndex == index }, { active: selectdListDetailData.includes(item) }, { [$style.disabled]: !assertApiSupport(item.source) }]"
|
|
@contextmenu="handleListItemRigthClick($event, index)")
|
|
div.list-item-cell.nobreak.center(style="flex: 0 0 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
|
|
div.list-item-cell.auto.break(:tips="item.name")
|
|
span.select {{item.name}}
|
|
span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
|
|
div.list-item-cell.break(style="flex: 0 0 22%;")
|
|
span.select {{item.singer}}
|
|
div.list-item-cell.break(style="flex: 0 0 22%;")
|
|
span.select {{item.albumName}}
|
|
div.list-item-cell(style="flex: 0 0 9%;")
|
|
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
|
|
div.list-item-cell(style="flex: 0 0 15%; padding-left: 0; padding-right: 0;")
|
|
material-list-buttons(:index="index" @btn-click="handleListBtnClick" :download-btn="assertApiSupport(item.source)")
|
|
div(:class="$style.noItem" v-else)
|
|
p(v-text="$t('view.list.no_item')")
|
|
material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
|
|
material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdListDetailData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
|
|
//- material-flow-btn(:show="isShowEditBtn" :play-btn="false" @btn-click="handleFlowBtnClick")
|
|
material-list-add-modal(:show="isShowListAdd" :is-move="isMove" :from-list-id="listData.id" :musicInfo="musicInfo" :exclude-list-id="excludeListId" @close="handleListAddModalClose")
|
|
material-list-add-multiple-modal(:show="isShowListAddMultiple" :is-move="isMoveMultiple" :from-list-id="listData.id" :musicList="selectdListDetailData" :exclude-list-id="excludeListId" @close="handleListAddMultipleModalClose")
|
|
material-menu(:menus="listsItemMenu" :location="listsData.menuLocation" item-name="name" :isShow="listsData.isShowItemMenu" @menu-click="handleListsItemMenuClick")
|
|
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
|
|
material-search-list(:list="list" @action="handleMusicSearchAction" :visible="isVisibleMusicSearch")
|
|
material-list-sort-modal(:show="isShowListSortModal" :music-info="musicInfo" :selected-num="selectdListDetailData.length" @close="isShowListSortModal = false" @confirm="handleSortMusicInfo")
|
|
material-duplicate-music-modal(:visible.sync="isShowDuplicateMusicModal" :list-info="selectedListInfo")
|
|
</template>
|
|
|
|
<script>
|
|
import { mapMutations, mapGetters, mapActions } from 'vuex'
|
|
import { clipboardWriteText, assertApiSupport, openUrl, openSaveDir, saveLxConfigFile, selectDir, readLxConfigFile, filterFileName } from '../utils'
|
|
import musicSdk from '../utils/music'
|
|
import { setListPosition, getListPosition, getListPrevSelectId } from '@renderer/utils/data'
|
|
|
|
|
|
export default {
|
|
name: 'List',
|
|
data() {
|
|
return {
|
|
listId: null,
|
|
clickTime: window.performance.now(),
|
|
clickIndex: -1,
|
|
isShowDownload: false,
|
|
musicInfo: null,
|
|
selectdListDetailData: [],
|
|
selectdListData: [],
|
|
// isShowEditBtn: false,
|
|
isShowDownloadMultiple: false,
|
|
delayShow: false,
|
|
isShowListAdd: false,
|
|
isShowListAddMultiple: false,
|
|
isShowListSortModal: false,
|
|
isShowDuplicateMusicModal: false,
|
|
delayTimeout: null,
|
|
isToggleList: true,
|
|
focusTarget: 'listDetail',
|
|
keyEvent: {
|
|
isShiftDown: false,
|
|
isModDown: false,
|
|
},
|
|
lastSelectIndex: 0,
|
|
listsData: {
|
|
isShowItemMenu: false,
|
|
itemMenuControl: {
|
|
rename: true,
|
|
duplicate: true,
|
|
import: true,
|
|
export: true,
|
|
sync: false,
|
|
moveup: true,
|
|
movedown: true,
|
|
remove: true,
|
|
},
|
|
rightClickItemIndex: -1,
|
|
menuLocation: {
|
|
x: 0,
|
|
y: 0,
|
|
},
|
|
isShowNewList: false,
|
|
isNewLeave: false,
|
|
},
|
|
listMenu: {
|
|
isShowItemMenu: false,
|
|
itemMenuControl: {
|
|
play: true,
|
|
playLater: true,
|
|
copyName: true,
|
|
addTo: true,
|
|
moveTo: true,
|
|
sort: true,
|
|
download: true,
|
|
search: true,
|
|
remove: true,
|
|
sourceDetail: true,
|
|
},
|
|
menuLocation: {
|
|
x: 0,
|
|
y: 0,
|
|
},
|
|
},
|
|
isMove: false,
|
|
isMoveMultiple: false,
|
|
isVisibleMusicSearch: false,
|
|
fetchingListStatus: {},
|
|
selectedListInfo: {},
|
|
selectedIndex: -1,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['userInfo', 'setting']),
|
|
...mapGetters('list', ['isInitedList', 'defaultList', 'loveList', 'userList']),
|
|
...mapGetters('player', ['playInfo']),
|
|
playerListId() {
|
|
return this.playInfo.listId
|
|
},
|
|
isPlayList() {
|
|
return this.playInfo.listId == this.listId
|
|
},
|
|
list() {
|
|
return this.listData.list
|
|
},
|
|
listData() {
|
|
if (!this.listId) return this.defaultList
|
|
let targetList
|
|
switch (this.listId) {
|
|
case 'default':
|
|
targetList = this.defaultList
|
|
break
|
|
case 'love':
|
|
targetList = this.loveList
|
|
break
|
|
default:
|
|
targetList = this.userList.find(l => l.id === this.listId)
|
|
break
|
|
}
|
|
if (targetList) return targetList
|
|
this.handleListToggle(this.defaultList.id)
|
|
return this.defaultList
|
|
},
|
|
excludeListId() {
|
|
return [this.listId]
|
|
},
|
|
lists() {
|
|
return [this.defaultList, this.loveList, ...this.userList]
|
|
},
|
|
isShowSource() {
|
|
return this.setting.list.isShowSource
|
|
},
|
|
listsItemMenu() {
|
|
return [
|
|
{
|
|
name: this.$t('view.list.lists_rename'),
|
|
action: 'rename',
|
|
disabled: !this.listsData.itemMenuControl.rename,
|
|
},
|
|
{
|
|
name: this.$t('view.list.lists_sync'),
|
|
action: 'sync',
|
|
disabled: !this.listsData.itemMenuControl.sync,
|
|
},
|
|
{
|
|
name: this.$t('view.list.lists_duplicate'),
|
|
action: 'duplicate',
|
|
disabled: !this.listsData.itemMenuControl.duplicate,
|
|
},
|
|
{
|
|
name: this.$t('view.list.lists_import'),
|
|
action: 'import',
|
|
disabled: !this.listsData.itemMenuControl.export,
|
|
},
|
|
{
|
|
name: this.$t('view.list.lists_export'),
|
|
action: 'export',
|
|
disabled: !this.listsData.itemMenuControl.export,
|
|
},
|
|
{
|
|
name: this.$t('view.list.lists_moveup'),
|
|
action: 'moveup',
|
|
disabled: !this.listsData.itemMenuControl.moveup,
|
|
},
|
|
{
|
|
name: this.$t('view.list.lists_movedown'),
|
|
action: 'movedown',
|
|
disabled: !this.listsData.itemMenuControl.movedown,
|
|
},
|
|
{
|
|
name: this.$t('view.list.lists_remove'),
|
|
action: 'remove',
|
|
disabled: !this.listsData.itemMenuControl.remove,
|
|
},
|
|
]
|
|
},
|
|
listItemMenu() {
|
|
return [
|
|
{
|
|
name: this.$t('view.list.list_play'),
|
|
action: 'play',
|
|
disabled: !this.listMenu.itemMenuControl.play,
|
|
},
|
|
{
|
|
name: this.$t('view.list.list_download'),
|
|
action: 'download',
|
|
disabled: !this.listMenu.itemMenuControl.download,
|
|
},
|
|
{
|
|
name: this.$t('view.list.list_play_later'),
|
|
action: 'playLater',
|
|
disabled: !this.listMenu.itemMenuControl.playLater,
|
|
},
|
|
{
|
|
name: this.$t('view.list.list_add_to'),
|
|
action: 'addTo',
|
|
disabled: !this.listMenu.itemMenuControl.addTo,
|
|
},
|
|
{
|
|
name: this.$t('view.list.list_move_to'),
|
|
action: 'moveTo',
|
|
disabled: !this.listMenu.itemMenuControl.moveTo,
|
|
},
|
|
{
|
|
name: this.$t('view.list.list_sort'),
|
|
action: 'sort',
|
|
disabled: !this.listMenu.itemMenuControl.sort,
|
|
},
|
|
{
|
|
name: this.$t('view.list.list_copy_name'),
|
|
action: 'copyName',
|
|
disabled: !this.listMenu.itemMenuControl.copyName,
|
|
},
|
|
{
|
|
name: this.$t('view.list.list_source_detail'),
|
|
action: 'sourceDetail',
|
|
disabled: !this.listMenu.itemMenuControl.sourceDetail,
|
|
},
|
|
{
|
|
name: this.$t('view.list.list_search'),
|
|
action: 'search',
|
|
disabled: !this.listMenu.itemMenuControl.search,
|
|
},
|
|
{
|
|
name: this.$t('view.list.list_remove'),
|
|
action: 'remove',
|
|
disabled: !this.listMenu.itemMenuControl.remove,
|
|
},
|
|
]
|
|
},
|
|
},
|
|
watch: {
|
|
// selectdListDetailData(n) {
|
|
// const len = n.length
|
|
// if (len) {
|
|
// this.isShowEditBtn = true
|
|
// } else {
|
|
// this.isShowEditBtn = false
|
|
// }
|
|
// },
|
|
'listData.list'(n, o) {
|
|
if (n === o && n.length === o.length) return
|
|
this.removeAllSelectListDetail()
|
|
},
|
|
'$route.query.scrollIndex'(n) {
|
|
if (n == null || this.isToggleList) return
|
|
this.restoreScroll(this.$route.query.scrollIndex, true)
|
|
this.isToggleList = true
|
|
},
|
|
},
|
|
beforeRouteUpdate(to, from, next) {
|
|
this.setPrevSelectListId(to.query.id)
|
|
if (to.query.id == null) return
|
|
else if (to.query.id == this.listId) {
|
|
if (to.query.scrollIndex != null) this.isToggleList = false
|
|
return next()
|
|
}
|
|
this.delayShow = false
|
|
this.$nextTick(() => {
|
|
this.listId = to.query.id
|
|
this.$nextTick(() => {
|
|
this.restoreScroll(this.$route.query.scrollIndex, false)
|
|
})
|
|
})
|
|
this.isShowDownload = false
|
|
this.isShowDownloadMultiple = false
|
|
this.isShowListAdd = false
|
|
this.isShowListAddMultiple = false
|
|
this.isShowListSortModal = false
|
|
this.listMenu.isShowItemMenu = false
|
|
next()
|
|
},
|
|
// mounted() {
|
|
// console.log('mounted')
|
|
// if (this.$route.query.text === undefined) {
|
|
// let info = this.$store.getters['search/info']
|
|
// this.text = info.text
|
|
// this.page = info.page
|
|
// } else if (this.$route.query.text === '') {
|
|
// this.clearList()
|
|
// } else {
|
|
// this.text = this.$route.query.text
|
|
// this.page = 1
|
|
// this.handleSearch(this.text, this.page)
|
|
// }
|
|
// },
|
|
beforeRouteLeave(to, from, next) {
|
|
setListPosition(this.listId, (this.list.length && this.$refs.list.getScrollTop()) || 0)
|
|
next()
|
|
},
|
|
created() {
|
|
this.listId = this.$route.query.id || getListPrevSelectId() || this.defaultList.id
|
|
this.setPrevSelectListId(this.listId)
|
|
this.listenEvent()
|
|
},
|
|
mounted() {
|
|
this.restoreScroll(this.$route.query.scrollIndex, false)
|
|
},
|
|
beforeDestroy() {
|
|
this.unlistenEvent()
|
|
setListPosition(this.listId, (this.list.length && this.$refs.list.getScrollTop()) || 0)
|
|
},
|
|
methods: {
|
|
...mapMutations('list', [
|
|
'listRemove',
|
|
'listRemoveMultiple',
|
|
'setUserListName',
|
|
'createUserList',
|
|
'moveupUserList',
|
|
'movedownUserList',
|
|
'removeUserList',
|
|
'setList',
|
|
'setMusicPosition',
|
|
'setPrevSelectListId',
|
|
]),
|
|
...mapActions('songList', ['getListDetailAll']),
|
|
...mapActions('leaderboard', {
|
|
getBoardListAll: 'getListAll',
|
|
}),
|
|
...mapActions('download', ['createDownload', 'createDownloadMultiple']),
|
|
...mapMutations('player', {
|
|
setPlayList: 'setList',
|
|
setTempPlayList: 'setTempPlayList',
|
|
}),
|
|
listenEvent() {
|
|
window.eventHub.$on('key_shift_down', this.handle_key_shift_down)
|
|
window.eventHub.$on('key_shift_up', this.handle_key_shift_up)
|
|
window.eventHub.$on('key_mod_down', this.handle_key_mod_down)
|
|
window.eventHub.$on('key_mod_up', this.handle_key_mod_up)
|
|
window.eventHub.$on('key_mod+a_down', this.handle_key_mod_a_down)
|
|
window.eventHub.$on('key_mod+f_down', this.handle_key_mod_f_down)
|
|
},
|
|
unlistenEvent() {
|
|
window.eventHub.$off('key_shift_down', this.handle_key_shift_down)
|
|
window.eventHub.$off('key_shift_up', this.handle_key_shift_up)
|
|
window.eventHub.$off('key_mod_down', this.handle_key_mod_down)
|
|
window.eventHub.$off('key_mod_up', this.handle_key_mod_up)
|
|
window.eventHub.$off('key_mod+a_down', this.handle_key_mod_a_down)
|
|
window.eventHub.$off('key_mod+f_down', this.handle_key_mod_f_down)
|
|
},
|
|
handle_key_mod_f_down() {
|
|
this.isVisibleMusicSearch = true
|
|
},
|
|
handle_key_shift_down() {
|
|
if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
|
|
},
|
|
handle_key_shift_up() {
|
|
if (this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = false
|
|
},
|
|
handle_key_mod_down() {
|
|
if (!this.keyEvent.isModDown) this.keyEvent.isModDown = true
|
|
},
|
|
handle_key_mod_up() {
|
|
if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
|
|
},
|
|
handle_key_mod_a_down({ event }) {
|
|
if (event.target.tagName == 'INPUT') return
|
|
event.preventDefault()
|
|
if (event.repeat) return
|
|
this.keyEvent.isModDown = false
|
|
this.handleSelectAllData()
|
|
},
|
|
handleScroll() {
|
|
setListPosition(this.listId, this.$refs.list.getScrollTop())
|
|
},
|
|
clearDelayTimeout() {
|
|
if (this.delayTimeout) {
|
|
clearTimeout(this.delayTimeout)
|
|
this.delayTimeout = null
|
|
}
|
|
},
|
|
handleScrollList(index, isAnimation, callback = () => {}) {
|
|
this.$refs.list.scrollToIndex(index, -150, isAnimation).then(callback)
|
|
},
|
|
restoreScroll(index, isAnimation) {
|
|
if (!this.list.length) return
|
|
if (index == null) {
|
|
let location = getListPosition(this.listData.id) || 0
|
|
if (this.setting.list.isSaveScrollLocation && location) {
|
|
this.$nextTick(() => {
|
|
this.$refs.list.scrollTo(location)
|
|
})
|
|
}
|
|
return
|
|
}
|
|
|
|
this.$nextTick(() => {
|
|
this.handleScrollList(index, isAnimation)
|
|
this.$router.replace({
|
|
path: 'list',
|
|
query: {
|
|
id: this.listId,
|
|
},
|
|
})
|
|
})
|
|
},
|
|
handleDoubleClick(event, index) {
|
|
if (this.listMenu.rightClickItemIndex > -1) return
|
|
|
|
this.handleSelectListDetailData(event, index)
|
|
|
|
if (
|
|
window.performance.now() - this.clickTime > 400 ||
|
|
this.clickIndex !== index
|
|
) {
|
|
this.clickTime = window.performance.now()
|
|
this.clickIndex = index
|
|
return
|
|
}
|
|
this.testPlay(index)
|
|
this.clickTime = 0
|
|
this.clickIndex = -1
|
|
},
|
|
handleSelectListDetailData(event, clickIndex) {
|
|
if (this.focusTarget != 'listDetail' && this.selectdListDetailData.length) this.removeAllSelectListDetail()
|
|
|
|
if (this.keyEvent.isShiftDown) {
|
|
if (this.selectdListDetailData.length) {
|
|
let lastSelectIndex = this.lastSelectIndex
|
|
if (lastSelectIndex == clickIndex) return this.removeAllSelectListDetail()
|
|
this.removeAllSelectListDetail()
|
|
let isNeedReverse = false
|
|
if (clickIndex < lastSelectIndex) {
|
|
let temp = lastSelectIndex
|
|
lastSelectIndex = clickIndex
|
|
clickIndex = temp
|
|
isNeedReverse = true
|
|
}
|
|
this.selectdListDetailData = this.list.slice(lastSelectIndex, clickIndex + 1)
|
|
if (isNeedReverse) this.selectdListDetailData.reverse()
|
|
} else {
|
|
this.selectdListDetailData.push(this.list[clickIndex])
|
|
this.lastSelectIndex = clickIndex
|
|
}
|
|
} else if (this.keyEvent.isModDown) {
|
|
this.lastSelectIndex = clickIndex
|
|
let item = this.list[clickIndex]
|
|
let index = this.selectdListDetailData.indexOf(item)
|
|
if (index < 0) {
|
|
this.selectdListDetailData.push(item)
|
|
} else {
|
|
this.selectdListDetailData.splice(index, 1)
|
|
}
|
|
} else if (this.selectdListDetailData.length) this.removeAllSelectListDetail()
|
|
},
|
|
// handleSelectListData(event, clickIndex) {
|
|
// if (this.focusTarget != 'list' && this.selectdListData.length) this.removeAllSelectList()
|
|
|
|
// if (this.keyEvent.isShiftDown) {
|
|
// if (this.selectdListData.length) {
|
|
// let lastSelectIndex = this.list.indexOf(this.selectdListData[this.selectdListData.length - 1])
|
|
// if (lastSelectIndex == clickIndex) return this.removeAllSelectList()
|
|
// this.removeAllSelectList()
|
|
// let isNeedReverse = false
|
|
// if (clickIndex < lastSelectIndex) {
|
|
// let temp = lastSelectIndex
|
|
// lastSelectIndex = clickIndex
|
|
// clickIndex = temp
|
|
// isNeedReverse = true
|
|
// }
|
|
// this.selectdListData = this.list.slice(lastSelectIndex, clickIndex + 1)
|
|
// if (isNeedReverse) this.selectdListData.reverse()
|
|
// // let nodes = this.$refs.dom_tbody.childNodes
|
|
// // do {
|
|
// // nodes[lastSelectIndex].classList.add('active')
|
|
// // lastSelectIndex++
|
|
// // } while (lastSelectIndex <= clickIndex)
|
|
// } else {
|
|
// // event.currentTarget.classList.add('active')
|
|
// this.selectdListData.push(this.list[clickIndex])
|
|
// }
|
|
// } else if (this.keyEvent.isModDown) {
|
|
// let item = this.list[clickIndex]
|
|
// let index = this.selectdListData.indexOf(item)
|
|
// if (index < 0) {
|
|
// this.selectdListData.push(item)
|
|
// // event.currentTarget.classList.add('active')
|
|
// } else {
|
|
// this.selectdListData.splice(index, 1)
|
|
// // event.currentTarget.classList.remove('active')
|
|
// }
|
|
// } else if (this.selectdListData.length) this.removeAllSelectList()
|
|
// },
|
|
removeAllSelectListDetail() {
|
|
this.selectdListDetailData = []
|
|
// let dom_tbody = this.$refs.dom_tbody
|
|
// if (!dom_tbody) return
|
|
// let nodes = dom_tbody.querySelectorAll('.active')
|
|
// for (const node of nodes) {
|
|
// if (node.parentNode == dom_tbody) node.classList.remove('active')
|
|
// }
|
|
},
|
|
// removeAllSelectList() {
|
|
// this.selectdListData = []
|
|
// let dom_list = this.$refs.dom_lists_list
|
|
// if (!dom_list) return
|
|
// let nodes = dom_list.querySelectorAll('.selected')
|
|
// for (const node of nodes) {
|
|
// if (node.parentNode == dom_list) node.classList.remove('selected')
|
|
// }
|
|
// },
|
|
testPlay(index) {
|
|
// if (!this.assertApiSupport(this.list[index].source)) return
|
|
this.setPlayList({ list: this.listData, index })
|
|
},
|
|
handleRemove(index) {
|
|
this.listRemove({ listId: this.listId, id: this.list[index].songmid })
|
|
},
|
|
handleListBtnClick(info) {
|
|
switch (info.action) {
|
|
case 'download': {
|
|
const minfo = this.list[info.index]
|
|
// if (!this.assertApiSupport(minfo.source)) return
|
|
this.musicInfo = minfo
|
|
this.$nextTick(() => {
|
|
this.isShowDownload = true
|
|
})
|
|
break
|
|
}
|
|
case 'play':
|
|
this.testPlay(info.index)
|
|
break
|
|
case 'remove':
|
|
this.handleRemove(info.index)
|
|
break
|
|
case 'listAdd':
|
|
this.musicInfo = this.list[info.index]
|
|
this.$nextTick(() => {
|
|
this.isShowListAdd = true
|
|
})
|
|
break
|
|
}
|
|
},
|
|
handleAddDownload(type) {
|
|
this.createDownload({ musicInfo: this.musicInfo, type })
|
|
this.isShowDownload = false
|
|
},
|
|
handleSelectAllData() {
|
|
this.removeAllSelectListDetail()
|
|
this.selectdListDetailData = [...this.list]
|
|
// let nodes = this.$refs.dom_tbody.childNodes
|
|
// for (const node of nodes) {
|
|
// node.classList.add('active')
|
|
// }
|
|
// asyncSetArray(this.selectdListDetailData, isSelect ? [...this.list] : [])
|
|
},
|
|
handleAddDownloadMultiple(type) {
|
|
const list = this.selectdListDetailData.filter(s => this.assertApiSupport(s.source))
|
|
this.createDownloadMultiple({ list, type })
|
|
this.removeAllSelectListDetail()
|
|
this.isShowDownloadMultiple = false
|
|
},
|
|
// handleFlowBtnClick(action) {
|
|
// switch (action) {
|
|
// case 'download':
|
|
// this.isShowDownloadMultiple = true
|
|
// break
|
|
// case 'remove':
|
|
// this.listRemoveMultiple({ id: this.listId, list: this.selectdListDetailData })
|
|
// this.removeAllSelectListDetail()
|
|
// break
|
|
// case 'add':
|
|
// this.isShowListAddMultiple = true
|
|
// break
|
|
// }
|
|
// },
|
|
handleListAddModalClose() {
|
|
this.isShowListAdd = false
|
|
if (this.isMove) this.isMove = false
|
|
},
|
|
handleListAddMultipleModalClose(isClearSelect) {
|
|
if (isClearSelect) this.removeAllSelectListDetail()
|
|
this.isShowListAddMultiple = false
|
|
if (this.isMoveMultiple) this.isMoveMultiple = false
|
|
},
|
|
getMusicLocation(index) {
|
|
let dom = document.getElementById('mid_' + this.list[index].songmid)
|
|
return dom ? dom.offsetTop : 0
|
|
},
|
|
// handleScroll(e) {
|
|
// console.log(e.target.scrollTop)
|
|
// },
|
|
handleContextMenu(event) {
|
|
if (!event.target.classList.contains('select')) return
|
|
event.stopImmediatePropagation()
|
|
let classList = this.$refs.dom_listContent.classList
|
|
classList.add(this.$style.copying)
|
|
window.requestAnimationFrame(() => {
|
|
let str = window.getSelection().toString()
|
|
classList.remove(this.$style.copying)
|
|
str = str.split(/\n\n/).map(s => s.replace(/\n/g, ' ')).join('\n').trim()
|
|
if (!str.length) return
|
|
clipboardWriteText(str)
|
|
})
|
|
},
|
|
assertApiSupport(source) {
|
|
return assertApiSupport(source)
|
|
},
|
|
handleContainerClick(event) {
|
|
if (!this.$refs.dom_lists) return
|
|
let isFocusList = event.target == this.$refs.dom_lists || this.$refs.dom_lists.contains(event.target)
|
|
this.focusTarget = isFocusList ? 'list' : 'listDetail'
|
|
},
|
|
handleListsSave(index, event) {
|
|
let dom_target = this.$refs.dom_lists_list.querySelector('.' + this.$style.editing)
|
|
if (dom_target) dom_target.classList.remove(this.$style.editing)
|
|
let name = event.target.value.trim()
|
|
const targetList = this.userList[index]
|
|
if (name.length) return this.setUserListName({ id: targetList.id, name })
|
|
event.target.value = targetList.name
|
|
},
|
|
handleListsCreate(event) {
|
|
if (event.target.readonly) return
|
|
let name = event.target.value.trim()
|
|
event.target.readonly = true
|
|
|
|
if (name == '') {
|
|
this.listsData.isShowNewList = false
|
|
return
|
|
}
|
|
|
|
this.listsData.isNewLeave = true
|
|
this.$nextTick(() => {
|
|
this.listsData.isShowNewList = false
|
|
})
|
|
|
|
this.createUserList({ name })
|
|
},
|
|
handleShowNewList() {
|
|
this.listsData.isShowNewList = true
|
|
this.$nextTick(() => {
|
|
this.$refs.dom_listsNewInput.focus()
|
|
})
|
|
},
|
|
handleListsNewAfterLeave() {
|
|
this.listsData.isNewLeave = false
|
|
},
|
|
handleListToggle(id) {
|
|
if (id == this.listId) return
|
|
this.$router.push({
|
|
path: 'list',
|
|
query: { id },
|
|
}).catch(_ => _)
|
|
},
|
|
handleListsItemRigthClick(event, index) {
|
|
let source
|
|
switch (index) {
|
|
case -1:
|
|
case -2:
|
|
this.listsData.itemMenuControl.rename = false
|
|
this.listsData.itemMenuControl.remove = false
|
|
this.listsData.itemMenuControl.sync = false
|
|
this.listsData.itemMenuControl.moveup = false
|
|
this.listsData.itemMenuControl.movedown = false
|
|
break
|
|
default:
|
|
this.listsData.itemMenuControl.rename = true
|
|
this.listsData.itemMenuControl.remove = true
|
|
source = this.userList[index].source
|
|
this.listsData.itemMenuControl.sync = !!source && !!musicSdk[source]?.songList
|
|
this.listsData.itemMenuControl.moveup = index > 0
|
|
this.listsData.itemMenuControl.movedown = index < this.userList.length - 1
|
|
break
|
|
}
|
|
this.listsData.rightClickItemIndex = index
|
|
this.listsData.menuLocation.x = event.currentTarget.offsetLeft + event.offsetX
|
|
this.listsData.menuLocation.y = event.currentTarget.offsetTop + event.offsetY - this.$refs.dom_lists_list.scrollTop
|
|
this.hideListMenu()
|
|
this.$nextTick(() => {
|
|
this.listsData.isShowItemMenu = true
|
|
})
|
|
},
|
|
handleListItemRigthClick(event, index) {
|
|
this.listMenu.itemMenuControl.sourceDetail = !!musicSdk[this.list[index].source].getMusicDetailPageUrl
|
|
// this.listMenu.itemMenuControl.play =
|
|
// this.listMenu.itemMenuControl.playLater =
|
|
this.listMenu.itemMenuControl.download = this.assertApiSupport(this.list[index].source)
|
|
let dom_container = event.target.closest('.' + this.$style.container)
|
|
// let dom_listItemCell = event.target.closest('.list-item-cell')
|
|
const getOffsetValue = (target, x = 0, y = 0) => {
|
|
if (target === dom_container) return { x, y }
|
|
if (!target) return { x: 0, y: 0 }
|
|
x += target.offsetLeft
|
|
y += target.offsetTop
|
|
return getOffsetValue(target.offsetParent, x, y)
|
|
}
|
|
this.listMenu.rightClickItemIndex = index
|
|
this.selectedIndex = index
|
|
let { x, y } = getOffsetValue(event.target)
|
|
this.listMenu.menuLocation.x = x + event.offsetX
|
|
this.listMenu.menuLocation.y = y + event.offsetY - this.$refs.list.getScrollTop()
|
|
this.hideListsMenu()
|
|
this.$nextTick(() => {
|
|
this.listMenu.isShowItemMenu = true
|
|
})
|
|
},
|
|
hideListsMenu() {
|
|
this.listsData.isShowItemMenu = false
|
|
this.listsData.rightClickItemIndex = -1
|
|
},
|
|
handleListsItemMenuClick(action) {
|
|
// console.log(action)
|
|
let index = this.listsData.rightClickItemIndex
|
|
this.hideListsMenu()
|
|
this.listsData.isShowItemMenu = false
|
|
let dom
|
|
switch (action && action.action) {
|
|
case 'rename':
|
|
dom = this.$refs.dom_lists_list.querySelectorAll('.user-list')[index]
|
|
this.$nextTick(() => {
|
|
dom.classList.add(this.$style.editing)
|
|
dom.querySelector('input').focus()
|
|
})
|
|
break
|
|
case 'duplicate':
|
|
this.selectedListInfo = this.getTargetListInfo(index)
|
|
this.isShowDuplicateMusicModal = true
|
|
break
|
|
case 'import':
|
|
this.handleImportList(index)
|
|
break
|
|
case 'export':
|
|
this.handleExportList(index)
|
|
break
|
|
case 'sync':
|
|
this.handleSyncSourceList(index)
|
|
break
|
|
case 'moveup':
|
|
this.moveupUserList({ id: this.userList[index].id })
|
|
break
|
|
case 'movedown':
|
|
this.movedownUserList({ id: this.userList[index].id })
|
|
break
|
|
case 'remove':
|
|
this.$dialog.confirm({
|
|
message: this.$t('view.list.lists_remove_tip', { name: this.userList[index].name }),
|
|
confirmButtonText: this.$t('view.list.lists_remove_tip_button'),
|
|
}).then(isRemove => {
|
|
if (!isRemove) return
|
|
this.removeUserList({ id: this.userList[index].id })
|
|
})
|
|
break
|
|
}
|
|
},
|
|
hideListMenu() {
|
|
this.selectedIndex = -1
|
|
this.listMenu.isShowItemMenu = false
|
|
this.listMenu.rightClickItemIndex = -1
|
|
},
|
|
handleListItemMenuClick(action) {
|
|
// console.log(action)
|
|
let index = this.listMenu.rightClickItemIndex
|
|
this.hideListMenu()
|
|
let minfo
|
|
let url
|
|
switch (action && action.action) {
|
|
case 'play':
|
|
this.testPlay(index)
|
|
break
|
|
case 'playLater':
|
|
if (this.selectdListDetailData.length) {
|
|
this.setTempPlayList(this.selectdListDetailData.map(s => ({ listId: this.listId, musicInfo: s })))
|
|
this.removeAllSelectListDetail()
|
|
} else {
|
|
this.setTempPlayList([{ listId: this.listId, musicInfo: this.list[index] }])
|
|
}
|
|
break
|
|
case 'copyName':
|
|
minfo = this.list[index]
|
|
clipboardWriteText(this.setting.download.fileName.replace('歌名', minfo.name).replace('歌手', minfo.singer))
|
|
break
|
|
case 'addTo':
|
|
if (this.selectdListDetailData.length) {
|
|
this.$nextTick(() => {
|
|
this.isShowListAddMultiple = true
|
|
})
|
|
} else {
|
|
this.musicInfo = this.list[index]
|
|
this.$nextTick(() => {
|
|
this.isShowListAdd = true
|
|
})
|
|
}
|
|
break
|
|
case 'moveTo':
|
|
if (this.selectdListDetailData.length) {
|
|
this.isMoveMultiple = true
|
|
this.$nextTick(() => {
|
|
this.isShowListAddMultiple = true
|
|
})
|
|
} else {
|
|
this.musicInfo = this.list[index]
|
|
this.isMove = true
|
|
this.$nextTick(() => {
|
|
this.isShowListAdd = true
|
|
})
|
|
}
|
|
break
|
|
case 'download':
|
|
if (this.selectdListDetailData.length) {
|
|
this.isShowDownloadMultiple = true
|
|
} else {
|
|
minfo = this.list[index]
|
|
if (!this.assertApiSupport(minfo.source)) return
|
|
this.musicInfo = minfo
|
|
this.$nextTick(() => {
|
|
this.isShowDownload = true
|
|
})
|
|
}
|
|
break
|
|
case 'sort':
|
|
this.isShowListSortModal = true
|
|
this.musicInfo = this.list[index]
|
|
// if (this.selectdListDetailData.length) {
|
|
// this.isShowDownloadMultiple = true
|
|
// } else {
|
|
// minfo = this.list[index]
|
|
// if (!this.assertApiSupport(minfo.source)) return
|
|
// this.musicInfo = minfo
|
|
// this.$nextTick(() => {
|
|
// this.isShowDownload = true
|
|
// })
|
|
// }
|
|
break
|
|
case 'search':
|
|
minfo = this.list[index]
|
|
this.handleSearch(minfo)
|
|
break
|
|
case 'remove':
|
|
if (this.selectdListDetailData.length) {
|
|
this.listRemoveMultiple({ listId: this.listId, ids: this.selectdListDetailData.map(m => m.songmid) })
|
|
this.removeAllSelectListDetail()
|
|
} else {
|
|
this.handleRemove(index)
|
|
}
|
|
break
|
|
case 'sourceDetail':
|
|
minfo = this.list[index]
|
|
url = musicSdk[minfo.source].getMusicDetailPageUrl(minfo)
|
|
if (!url) return
|
|
openUrl(url)
|
|
}
|
|
},
|
|
handleMusicSearchAction({ action, data: { index, isPlay } = {} }) {
|
|
this.isVisibleMusicSearch = false
|
|
switch (action) {
|
|
case 'listClick':
|
|
if (index < 0) return
|
|
this.handleScrollList(index, true, () => {
|
|
this.selectedIndex = index
|
|
setTimeout(() => {
|
|
this.selectedIndex = -1
|
|
if (isPlay) this.testPlay(index)
|
|
}, 600)
|
|
})
|
|
break
|
|
}
|
|
},
|
|
fetchList(id, source, sourceListId) {
|
|
if (this.fetchingListStatus[id] == null) {
|
|
this.$set(this.fetchingListStatus, id, true)
|
|
} else {
|
|
this.fetchingListStatus[id] = true
|
|
}
|
|
|
|
let promise
|
|
if (/board__/.test(sourceListId)) {
|
|
const id = sourceListId.replace(/board__/, '')
|
|
promise = this.getBoardListAll(id)
|
|
} else {
|
|
promise = this.getListDetailAll({ source, id: sourceListId })
|
|
}
|
|
return promise.finally(() => {
|
|
this.fetchingListStatus[id] = false
|
|
})
|
|
},
|
|
async handleSyncSourceList(index) {
|
|
const targetListInfo = this.userList[index]
|
|
const list = await this.fetchList(targetListInfo.id, targetListInfo.source, targetListInfo.sourceListId)
|
|
// console.log(targetListInfo.list.length, list.length)
|
|
this.removeAllSelectListDetail()
|
|
this.setList({
|
|
...targetListInfo,
|
|
list,
|
|
})
|
|
},
|
|
handleSortMusicInfo(num) {
|
|
num = Math.min(num, this.list.length)
|
|
this.setMusicPosition({
|
|
id: this.listId,
|
|
position: num,
|
|
list: this.selectdListDetailData.length ? [...this.selectdListDetailData] : [this.musicInfo],
|
|
})
|
|
this.removeAllSelectListDetail()
|
|
this.isShowListSortModal = false
|
|
},
|
|
handleSearch(musicInfo) {
|
|
this.$router.push({
|
|
path: 'search',
|
|
query: {
|
|
text: `${musicInfo.name} ${musicInfo.singer}`,
|
|
},
|
|
})
|
|
},
|
|
getTargetListInfo(index) {
|
|
let list
|
|
switch (index) {
|
|
case -2:
|
|
list = this.defaultList
|
|
break
|
|
case -1:
|
|
list = this.loveList
|
|
break
|
|
default:
|
|
list = this.userList[index]
|
|
break
|
|
}
|
|
return list
|
|
},
|
|
handleExportList(index) {
|
|
const list = this.getTargetListInfo(index)
|
|
if (!list) return
|
|
openSaveDir({
|
|
title: this.$t('view.list.lists_export_part_desc'),
|
|
defaultPath: `lx_list_part_${filterFileName(list.name)}.lxmc`,
|
|
}).then(async result => {
|
|
if (result.canceled) return
|
|
const data = JSON.parse(JSON.stringify({
|
|
type: 'playListPart',
|
|
data: list,
|
|
}))
|
|
for await (const item of data.data.list) {
|
|
if (item.otherSource) delete item.otherSource
|
|
if (item.lrc) delete item.lrc
|
|
}
|
|
saveLxConfigFile(result.filePath, data)
|
|
})
|
|
},
|
|
handleImportList(index) {
|
|
const list = this.getTargetListInfo(index)
|
|
|
|
selectDir({
|
|
title: this.$t('view.list.lists_import_part_desc'),
|
|
properties: ['openFile'],
|
|
filters: [
|
|
{ name: 'Play List Part', extensions: ['json', 'lxmc'] },
|
|
{ name: 'All Files', extensions: ['*'] },
|
|
],
|
|
}).then(async result => {
|
|
if (result.canceled) return
|
|
let listData
|
|
try {
|
|
listData = await readLxConfigFile(result.filePaths[0])
|
|
} catch (error) {
|
|
return
|
|
}
|
|
if (listData.type !== 'playListPart') return
|
|
const targetList = this.lists.find(l => l.id == listData.data.id)
|
|
if (targetList) {
|
|
const confirm = await this.$dialog.confirm({
|
|
message: this.$t('view.list.lists_import_part_confirm', { importName: listData.data.name, localName: targetList.name }),
|
|
cancelButtonText: this.$t('view.list.lists_import_part_button_cancel'),
|
|
confirmButtonText: this.$t('view.list.lists_import_part_button_confirm'),
|
|
})
|
|
if (confirm) {
|
|
listData.data.name = list.name
|
|
this.setList({
|
|
name: listData.data.name,
|
|
id: listData.data.id,
|
|
list: listData.data.list,
|
|
source: listData.data.source,
|
|
sourceListId: listData.data.sourceListId,
|
|
})
|
|
return
|
|
}
|
|
listData.data.id += `__${Date.now()}`
|
|
}
|
|
this.createUserList({
|
|
name: listData.data.name,
|
|
id: listData.data.id,
|
|
list: listData.data.list,
|
|
source: listData.data.source,
|
|
sourceListId: listData.data.sourceListId,
|
|
position: Math.max(index, -1),
|
|
})
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" module>
|
|
@import '../assets/styles/layout.less';
|
|
|
|
.container {
|
|
overflow: hidden;
|
|
height: 100%;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
|
|
@lists-item-height: 36px;
|
|
.lists {
|
|
flex: none;
|
|
width: 16%;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
}
|
|
.listHeader {
|
|
position: relative;
|
|
&:hover {
|
|
.listsAdd {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
.listsTitle {
|
|
font-size: 12px;
|
|
line-height: 38px;
|
|
padding: 0 10px;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
|
flex: none;
|
|
}
|
|
.listsAdd {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 8px;
|
|
background: none;
|
|
height: 30px;
|
|
border: none;
|
|
outline: none;
|
|
border-radius: @radius-border;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: opacity @transition-theme;
|
|
color: @color-btn;
|
|
svg {
|
|
vertical-align: bottom;
|
|
}
|
|
&:active {
|
|
opacity: .7 !important;
|
|
}
|
|
}
|
|
.listsContent {
|
|
flex: auto;
|
|
min-width: 0;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
// border-right: 1px solid rgba(0, 0, 0, 0.12);
|
|
}
|
|
.listsItem {
|
|
position: relative;
|
|
transition: .3s ease;
|
|
transition-property: color, background-color, opacity;
|
|
background-color: transparent;
|
|
&:hover:not(.active) {
|
|
background-color: @color-theme_2-hover;
|
|
cursor: pointer;
|
|
}
|
|
&.active {
|
|
// background-color:
|
|
color: @color-theme;
|
|
}
|
|
&.selected {
|
|
background-color: @color-theme_2-active;
|
|
}
|
|
&.clicked {
|
|
background-color: @color-theme_2-hover;
|
|
}
|
|
&.fetching {
|
|
opacity: .5;
|
|
}
|
|
&.editing {
|
|
padding: 0 10px;
|
|
background-color: @color-theme_2-hover;
|
|
.listsLabel {
|
|
display: none;
|
|
}
|
|
.listsInput {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
.listsLabel {
|
|
display: block;
|
|
height: @lists-item-height;
|
|
padding: 0 10px;
|
|
font-size: 13px;
|
|
line-height: @lists-item-height;
|
|
.mixin-ellipsis-1;
|
|
}
|
|
.listsInput {
|
|
width: 100%;
|
|
height: @lists-item-height;
|
|
border: none;
|
|
padding: 0;
|
|
// padding-bottom: 1px;
|
|
line-height: @lists-item-height;
|
|
background: none;
|
|
outline: none;
|
|
font-size: 13px;
|
|
display: none;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.listsNew {
|
|
padding: 0 10px;
|
|
background-color: @color-theme_2-hover;
|
|
.listsInput {
|
|
display: block;
|
|
}
|
|
}
|
|
.newLeave {
|
|
margin-top: -@lists-item-height;
|
|
z-index: -1;
|
|
}
|
|
|
|
.list {
|
|
overflow: hidden;
|
|
height: 100%;
|
|
flex: auto;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
// .noItem {
|
|
|
|
// }
|
|
}
|
|
.content {
|
|
min-height: 0;
|
|
font-size: 14px;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
// table {
|
|
// position: relative;
|
|
// thead {
|
|
// position: fixed;
|
|
// width: 100%;
|
|
// th {
|
|
// width: 100%;
|
|
// }
|
|
// }
|
|
// }
|
|
&.copying {
|
|
.no-select {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.thead {
|
|
flex: none;
|
|
tr > th:first-child {
|
|
color: @color-theme_2-font-label;
|
|
// padding-left: 10px;
|
|
}
|
|
}
|
|
:global(.list) {
|
|
flex: auto;
|
|
:global(.list-item) {
|
|
&.active {
|
|
color: @color-btn;
|
|
}
|
|
}
|
|
:global(.list-item-cell) {
|
|
font-size: 12px !important;
|
|
|
|
&:first-child {
|
|
// padding-left: 10px;
|
|
font-size: 11px !important;
|
|
color: @color-theme_2-font-label !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.labelSource {
|
|
color: @color-theme;
|
|
padding: 5px;
|
|
font-size: .8em;
|
|
line-height: 1;
|
|
opacity: .75;
|
|
display: inline-block;
|
|
}
|
|
|
|
.disabled {
|
|
opacity: .5;
|
|
}
|
|
|
|
.no-item {
|
|
position: relative;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
p {
|
|
font-size: 24px;
|
|
color: @color-theme_2-font-label;
|
|
}
|
|
}
|
|
|
|
each(@themes, {
|
|
:global(#container.@{value}) {
|
|
.listsAdd {
|
|
color: ~'@{color-@{value}-btn}';
|
|
}
|
|
.listsItem {
|
|
&:hover:not(.active) {
|
|
background-color: ~'@{color-@{value}-theme_2-hover}';
|
|
}
|
|
&.active {
|
|
color: ~'@{color-@{value}-theme}';
|
|
}
|
|
&.select {
|
|
background-color: ~'@{color-@{value}-theme_2-active}';
|
|
}
|
|
&.clicked {
|
|
background-color: ~'@{color-@{value}-theme_2-hover}';
|
|
}
|
|
&.editing {
|
|
background-color: ~'@{color-@{value}-theme_2-hover}';
|
|
}
|
|
}
|
|
.listsNew {
|
|
background-color: ~'@{color-@{value}-theme_2-hover}';
|
|
}
|
|
:global(.list) {
|
|
:global(.list-item) {
|
|
&.active {
|
|
color: ~'@{color-@{value}-btn}';
|
|
}
|
|
}
|
|
:global(.list-item-cell) {
|
|
&:first-child {
|
|
color: ~'@{color-@{value}-theme_2-font-label}' !important;
|
|
}
|
|
}
|
|
}
|
|
.labelSource {
|
|
color: ~'@{color-@{value}-theme}';
|
|
}
|
|
.no-item {
|
|
p {
|
|
color: ~'@{color-@{value}-theme_2-font-label}';
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
</style>
|