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-16 19:21:21 +08:00
parent eed8b36dc1
commit afc3f48f51
39 changed files with 1486 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/List.vue
+422 -73
View File
@@ -1,7 +1,24 @@
<template lang="pug">
div(:class="$style.list")
//- transition
div(v-if="delayShow && list.length" :class="$style.content")
div(:class="$style.container" @click="handleContainerClick($event)")
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" :title="$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]" :title="defaultList.name" @click="handleListToggle(defaultList.id)")
span(:class="$style.listsLabel") {{defaultList.name}}
li(:class="[$style.listsItem, loveList.id == listId ? $style.active : null]" :title="loveList.name" @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]" @contextmenu="handleListsItemRigthClick($event, index)" :title="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" 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" ref="dom_listsNewInput" type="text" @keyup.enter="handleListsCreate($event)" @blur="handleListsCreate($event)" :placeholder="$t('view.list.lists_new_list_input')")
div(:class="$style.list")
//- transition
div(:class="$style.thead")
table
thead
@@ -10,41 +27,43 @@
th.nobreak(style="width: 25%;") {{$t('view.list.name')}}
th.nobreak(style="width: 20%;") {{$t('view.list.singer')}}
th.nobreak(style="width: 20%;") {{$t('view.list.album')}}
th.nobreak(style="width: 10%;") {{$t('view.list.time')}}
th.nobreak(style="width: 20%;") {{$t('view.list.action')}}
div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent")
table
tbody(@contextmenu="handleContextMenu" ref="dom_tbody")
tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid"
@click="handleDoubleClick($event, index)" :class="[isPlayList && playIndex === index ? $style.active : '', assertApiSupport(item.source) ? null : $style.disabled]")
td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}}
td.break(style="width: 25%;")
span.select {{item.name}}
span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
//- span.badge.badge-light(v-if="item._types['128k']") 128K
//- span.badge.badge-light(v-if="item._types['192k']") 192K
//- span.badge.badge-secondary(v-if="item._types['320k']") 320K
//- span.badge.badge-theme-info(v-if="item._types.ape") APE
//- span.badge.badge-theme-success(v-if="item._types.flac") FLAC
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" @btn-click="handleListBtnClick")
//- 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-secondary(type='button' @click.stop='handleRemove(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.noItem" v-else)
p(v-text="list.length ? $t('view.list.loding_list') : $t('view.list.no_item')")
th.nobreak(style="width: 9%;") {{$t('view.list.time')}}
th.nobreak(style="width: 21%;") {{$t('view.list.action')}}
div(v-if="delayShow && list.length" :class="$style.content")
div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent")
table
tbody(@contextmenu="handleContextMenu" ref="dom_tbody")
tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid"
@click="handleDoubleClick($event, index)" :class="[isPlayList && playIndex === index ? $style.active : '', assertApiSupport(item.source) ? null : $style.disabled]")
td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}}
td.break(style="width: 25%;")
span.select {{item.name}}
span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
//- span.badge.badge-light(v-if="item._types['128k']") 128K
//- span.badge.badge-light(v-if="item._types['192k']") 192K
//- span.badge.badge-secondary(v-if="item._types['320k']") 320K
//- span.badge.badge-theme-info(v-if="item._types.ape") APE
//- span.badge.badge-theme-success(v-if="item._types.flac") FLAC
td.break(style="width: 20%;")
span.select {{item.singer}}
td.break(style="width: 20%;")
span.select {{item.albumName}}
td(style="width: 9%;")
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
td(style="width: 21%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" @btn-click="handleListBtnClick")
//- 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-secondary(type='button' @click.stop='handleRemove(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.noItem" v-else)
p(v-text="list.length ? $t('view.list.loding_list') : $t('view.list.no_item')")
material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = 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" :musicInfo="musicInfo" :exclude-list-id="excludeListId" @close="isShowListAdd = false")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" :exclude-list-id="excludeListId" @close="handleListAddModalClose")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdListDetailData" :exclude-list-id="excludeListId" @close="handleListAddModalClose")
material-menu(:menus="listsItemMenu" :location="listsData.menuLocation" item-name="name" :isShow="listsData.isShowItemMenu" @menu-click="handleListsItemMenuClick")
</template>
<script>
@@ -59,7 +78,8 @@ export default {
clickIndex: -1,
isShowDownload: false,
musicInfo: null,
selectdData: [],
selectdListDetailData: [],
selectdListData: [],
isShowEditBtn: false,
isShowDownloadMultiple: false,
delayShow: false,
@@ -68,15 +88,32 @@ export default {
isShowListAddMultiple: false,
delayTimeout: null,
isToggleList: true,
focusTarget: 'listDetail',
keyEvent: {
isShiftDown: false,
isModDown: false,
},
listsData: {
isShowItemMenu: false,
itemMenuControl: {
rename: true,
moveup: true,
movedown: true,
remove: true,
},
rightClickItemIndex: -1,
menuLocation: {
x: 0,
y: 0,
},
isShowNewList: false,
isNewLeave: false,
},
}
},
computed: {
...mapGetters(['userInfo', 'setting']),
...mapGetters('list', ['defaultList', 'loveList', 'userList']),
...mapGetters('list', ['isInitedList', 'defaultList', 'loveList', 'userList']),
...mapGetters('player', {
playerListId: 'listId',
playIndex: 'playIndex',
@@ -101,17 +138,46 @@ export default {
targetList = this.userList.find(l => l.id === this.listId)
break
}
return targetList
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_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,
},
]
},
},
watch: {
selectdData(n) {
selectdListDetailData(n) {
const len = n.length
if (len) {
this.isShowEditBtn = true
@@ -119,8 +185,9 @@ export default {
this.isShowEditBtn = false
}
},
list() {
this.removeAllSelect()
'listData.list'(n, o) {
if (n === o && n.length === o.length) return
this.removeAllSelectListDetail()
},
'$route.query.scrollIndex'(n) {
if (n == null || this.isToggleList) return
@@ -129,6 +196,7 @@ export default {
},
},
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
@@ -163,7 +231,8 @@ export default {
next()
},
created() {
this.listId = this.$route.query.id
this.listId = this.$route.query.id || this.defaultList.id
this.setPrevSelectListId(this.listId)
this.handleScroll = throttle(e => {
if (this.routeLeaveLocation) {
this.setListScroll({ id: this.listId, location: this.routeLeaveLocation })
@@ -175,13 +244,14 @@ export default {
},
mounted() {
this.handleDelayShow()
this.setListsScroll()
},
beforeDestroy() {
this.unlistenEvent()
},
methods: {
...mapMutations(['setListScroll']),
...mapMutations('list', ['listRemove', 'listRemoveMultiple']),
...mapMutations(['setPrevSelectListId']),
...mapMutations('list', ['listRemove', 'listRemoveMultiple', 'setUserListName', 'createUserList', 'moveupUserList', 'movedownUserList', 'removeUserList', 'setListScroll']),
...mapActions('download', ['createDownload', 'createDownloadMultiple']),
...mapMutations('player', {
setPlayList: 'setList',
@@ -213,6 +283,8 @@ export default {
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()
@@ -239,8 +311,8 @@ export default {
restoreScroll(isAnimation) {
if (!this.list.length) return
if (this.$route.query.scrollIndex == null) {
let location = this.setting.list.scroll.locations[this.listId]
if (this.setting.list.scroll.enable && location) {
let location = this.listData.location || 0
if (this.setting.list.isSaveScrollLocation && location) {
this.$nextTick(() => {
this.$refs.dom_scrollContent.scrollTo(0, location)
})
@@ -263,7 +335,7 @@ export default {
handleDoubleClick(event, index) {
if (event.target.classList.contains('select')) return
this.handleSelectData(event, index)
this.handleSelectListDetailData(event, index)
if (
window.performance.now() - this.clickTime > 400 ||
@@ -277,12 +349,14 @@ export default {
this.clickTime = 0
this.clickIndex = -1
},
handleSelectData(event, clickIndex) {
handleSelectListDetailData(event, clickIndex) {
if (this.focusTarget != 'listDetail' && this.selectdListDetailData.length) this.removeAllSelectListDetail()
if (this.keyEvent.isShiftDown) {
if (this.selectdData.length) {
let lastSelectIndex = this.list.indexOf(this.selectdData[this.selectdData.length - 1])
if (lastSelectIndex == clickIndex) return this.removeAllSelect()
this.removeAllSelect()
if (this.selectdListDetailData.length) {
let lastSelectIndex = this.list.indexOf(this.selectdListDetailData[this.selectdListDetailData.length - 1])
if (lastSelectIndex == clickIndex) return this.removeAllSelectListDetail()
this.removeAllSelectListDetail()
let isNeedReverse = false
if (clickIndex < lastSelectIndex) {
let temp = lastSelectIndex
@@ -290,8 +364,8 @@ export default {
clickIndex = temp
isNeedReverse = true
}
this.selectdData = this.list.slice(lastSelectIndex, clickIndex + 1)
if (isNeedReverse) this.selectdData.reverse()
this.selectdListDetailData = this.list.slice(lastSelectIndex, clickIndex + 1)
if (isNeedReverse) this.selectdListDetailData.reverse()
let nodes = this.$refs.dom_tbody.childNodes
do {
nodes[lastSelectIndex].classList.add('active')
@@ -299,22 +373,60 @@ export default {
} while (lastSelectIndex <= clickIndex)
} else {
event.currentTarget.classList.add('active')
this.selectdData.push(this.list[clickIndex])
this.selectdListDetailData.push(this.list[clickIndex])
}
} else if (this.keyEvent.isModDown) {
let item = this.list[clickIndex]
let index = this.selectdData.indexOf(item)
let index = this.selectdListDetailData.indexOf(item)
if (index < 0) {
this.selectdData.push(item)
this.selectdListDetailData.push(item)
event.currentTarget.classList.add('active')
} else {
this.selectdData.splice(index, 1)
this.selectdListDetailData.splice(index, 1)
event.currentTarget.classList.remove('active')
}
} else if (this.selectdData.length) this.removeAllSelect()
} else if (this.selectdListDetailData.length) this.removeAllSelectListDetail()
},
removeAllSelect() {
this.selectdData = []
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')
@@ -322,9 +434,18 @@ export default {
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.list, listId: this.listId, index })
this.setPlayList({ list: this.listData, index })
},
handleRemove(index) {
this.listRemove({ id: this.listId, index })
@@ -359,18 +480,18 @@ export default {
this.isShowDownload = false
},
handleSelectAllData() {
this.removeAllSelect()
this.selectdData = [...this.list]
this.removeAllSelectListDetail()
this.selectdListDetailData = [...this.list]
let nodes = this.$refs.dom_tbody.childNodes
for (const node of nodes) {
node.classList.add('active')
}
// asyncSetArray(this.selectdData, isSelect ? [...this.list] : [])
// asyncSetArray(this.selectdListDetailData, isSelect ? [...this.list] : [])
},
handleAddDownloadMultiple(type) {
const list = this.selectdData.filter(s => this.assertApiSupport(s.source))
const list = this.selectdListDetailData.filter(s => this.assertApiSupport(s.source))
this.createDownloadMultiple({ list, type })
this.removeAllSelect()
this.removeAllSelectListDetail()
this.isShowDownloadMultiple = false
},
handleFlowBtnClick(action) {
@@ -379,8 +500,8 @@ export default {
this.isShowDownloadMultiple = true
break
case 'remove':
this.listRemoveMultiple({ id: this.listId, list: this.selectdData })
this.removeAllSelect()
this.listRemoveMultiple({ id: this.listId, list: this.selectdListDetailData })
this.removeAllSelectListDetail()
break
case 'add':
this.isShowListAddMultiple = true
@@ -388,7 +509,7 @@ export default {
}
},
handleListAddModalClose(isClearSelect) {
if (isClearSelect) this.removeAllSelect()
if (isClearSelect) this.removeAllSelectListDetail()
this.isShowListAddMultiple = false
},
getMusicLocation(index) {
@@ -413,6 +534,91 @@ export default {
assertApiSupport(source) {
return assertApiSupport(source)
},
handleContainerClick(event) {
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()
if (name.length) return this.setUserListName({ index, name })
event.target.value = this.userList[index].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
},
setListsScroll() {
let target = this.$refs.dom_lists_list.querySelector('.' + this.$style.active)
if (!target) return
let offsetTop = target.offsetTop
let location = offsetTop - 150
if (location > 0) this.$refs.dom_lists_list.scrollTop = location
},
handleListToggle(id) {
if (id == this.listId) return
this.$router.push({
path: 'list',
query: { id },
}).catch(_ => _)
},
handleListsItemRigthClick(event, index) {
this.listsData.itemMenuControl.moveup = index > 0
this.listsData.itemMenuControl.movedown = index < this.userList.length - 1
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.$nextTick(() => {
this.listsData.isShowItemMenu = true
})
},
handleListsItemMenuClick(action) {
// console.log(action)
this.listsData.isShowItemMenu = false
let dom
switch (action && action.action) {
case 'rename':
dom = this.$refs.dom_lists_list.querySelectorAll('.user-list')[this.listsData.rightClickItemIndex]
this.$nextTick(() => {
dom.classList.add(this.$style.editing)
dom.querySelector('input').focus()
})
break
case 'moveup':
this.moveupUserList(this.listsData.rightClickItemIndex)
break
case 'movedown':
this.movedownUserList(this.listsData.rightClickItemIndex)
break
case 'remove':
this.removeUserList(this.listsData.rightClickItemIndex)
break
}
this.listsData.rightClickItemIndex = -1
},
},
}
</script>
@@ -420,15 +626,135 @@ export default {
<style lang="less" module>
@import '../assets/styles/layout.less';
.container {
overflow: hidden;
height: 100%;
display: flex;
position: relative;
}
.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;
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;
}
&.editing {
padding: 0 10px;
background-color: @color-theme_2-hover;
.listsLabel {
display: none;
}
.listsInput {
display: block;
}
}
}
.listsLabel {
display: block;
height: 100%;
padding: 0 10px;
font-size: 13px;
line-height: 36px;
.mixin-ellipsis-1;
}
.listsInput {
width: 100%;
height: 36px;
border: none;
padding: 0;
line-height: 36px;
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: -36px;
z-index: -1;
}
.list {
overflow: hidden;
height: 100%;
flex: auto;
display: flex;
flex-flow: column nowrap;
// .noItem {
// }
}
.content {
height: 100%;
min-height: 0;
font-size: 14px;
display: flex;
flex-flow: column nowrap;
@@ -456,7 +782,7 @@ export default {
tr {
&.active {
color: @color-theme;
color: @color-btn;
}
}
td {
@@ -504,10 +830,33 @@ export default {
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}';
}
.tbody {
tr {
&.active {
color: ~'@{color-@{value}-theme}';
color: ~'@{color-@{value}-btn}';
}
}
td {