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-04-26 22:06:13 +08:00
parent 3d52fa059e
commit cdbedf3d64
13 changed files with 608 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/List.vue
+131 -28
View File
@@ -6,9 +6,7 @@
table
thead
tr
th.nobreak.center(style="width: 37px;")
material-checkbox(id="search_select_all" v-model="isSelectAll" @change="handleSelectAllData"
:indeterminate="isIndeterminate" :title="isSelectAll && !isIndeterminate ? $t('view.list.unselect_all') : $t('view.list.select_all')")
th.nobreak.center(style="width: 10px;") #
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')}}
@@ -16,14 +14,13 @@
th.nobreak(style="width: 10%;") {{$t('view.list.time')}}
div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent")
table
tbody(@contextmenu="handleContextMenu")
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 : '', (isAPITemp && item.source != 'kw') ? $style.disabled : '']")
td.nobreak.center(style="width: 37px;" @click.stop)
material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
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" v-if="isShowSource") {{item.source}}
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
@@ -40,7 +37,7 @@
//- 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)') ＋
td(style="width: 10%;")
span(:class="$style.time") {{item.interval || '--/--'}}
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
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")
@@ -63,8 +60,6 @@ export default {
isShowDownload: false,
musicInfo: null,
selectdData: [],
isSelectAll: false,
isIndeterminate: false,
isShowEditBtn: false,
isShowDownloadMultiple: false,
delayShow: false,
@@ -73,6 +68,11 @@ export default {
isShowListAddMultiple: false,
delayTimeout: null,
isToggleList: true,
keyEvent: {
isShiftDown: false,
isAltDown: false,
isADown: false,
},
}
},
computed: {
@@ -118,16 +118,13 @@ export default {
selectdData(n) {
const len = n.length
if (len) {
this.isSelectAll = true
this.isIndeterminate = len !== this.list.length
this.isShowEditBtn = true
} else {
this.isSelectAll = false
this.isShowEditBtn = false
}
},
list() {
this.resetSelect()
this.removeAllSelect()
},
'$route.query.scrollIndex'(n) {
if (n == null || this.isToggleList) return
@@ -178,10 +175,14 @@ export default {
this.setListScroll({ id: this.listId, location: e.target.scrollTop })
}
}, 1000)
this.listenEvent()
},
mounted() {
this.handleDelayShow()
},
beforeDestroy() {
this.unlistenEvent()
},
methods: {
...mapMutations(['setListScroll']),
...mapMutations('list', ['listRemove', 'listRemoveMultiple']),
@@ -189,6 +190,43 @@ export default {
...mapMutations('player', {
setPlayList: 'setList',
}),
listenEvent() {
window.eventHub.$on('shift_down', this.handle_shift_down)
window.eventHub.$on('shift_up', this.handle_shift_up)
window.eventHub.$on('alt_down', this.handle_alt_down)
window.eventHub.$on('alt_up', this.handle_alt_up)
window.eventHub.$on('mod+a_down', this.handle_mod_a_down)
window.eventHub.$on('mod+a_up', this.handle_mod_a_up)
},
unlistenEvent() {
window.eventHub.$off('shift_down', this.handle_shift_down)
window.eventHub.$off('shift_up', this.handle_shift_up)
window.eventHub.$off('alt_down', this.handle_alt_down)
window.eventHub.$off('alt_up', this.handle_alt_up)
window.eventHub.$off('mod+a_down', this.handle_mod_a_down)
window.eventHub.$off('mod+a_up', this.handle_mod_a_up)
},
handle_shift_down() {
if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
},
handle_shift_up() {
if (this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = false
},
handle_alt_down() {
if (!this.keyEvent.isAltDown) this.keyEvent.isAltDown = true
},
handle_alt_up() {
if (this.keyEvent.isAltDown) this.keyEvent.isAltDown = false
},
handle_mod_a_down() {
if (!this.keyEvent.isADown) {
this.keyEvent.isADown = true
this.handleSelectAllData()
}
},
handle_mod_a_up() {
if (this.keyEvent.isADown) this.keyEvent.isADown = false
},
handleDelayShow() {
this.clearDelayTimeout()
if (this.list.length > 150) {
@@ -234,6 +272,9 @@ export default {
},
handleDoubleClick(event, index) {
if (event.target.classList.contains('select')) return
this.handleSelectData(event, index)
if (
window.performance.now() - this.clickTime > 400 ||
this.clickIndex !== index
@@ -246,6 +287,51 @@ export default {
this.clickTime = 0
this.clickIndex = -1
},
handleSelectData(event, clickIndex) {
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()
let isNeedReverse = false
if (clickIndex < lastSelectIndex) {
let temp = lastSelectIndex
lastSelectIndex = clickIndex
clickIndex = temp
isNeedReverse = true
}
this.selectdData = this.list.slice(lastSelectIndex, clickIndex + 1)
if (isNeedReverse) this.selectdData.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.selectdData.push(this.list[clickIndex])
}
} else if (this.keyEvent.isAltDown) {
let item = this.list[clickIndex]
let index = this.selectdData.indexOf(item)
if (index < 0) {
this.selectdData.push(item)
event.currentTarget.classList.add('active')
} else {
this.selectdData.splice(index, 1)
event.currentTarget.classList.remove('active')
}
} else if (this.selectdData.length) this.removeAllSelect()
},
removeAllSelect() {
this.selectdData = []
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')
}
},
testPlay(index) {
if (this.isAPITemp && this.list[index].source != 'kw') return
this.setPlayList({ list: this.list, listId: this.listId, index })
@@ -282,18 +368,19 @@ export default {
this.createDownload({ musicInfo: this.musicInfo, type })
this.isShowDownload = false
},
handleSelectAllData(isSelect) {
this.selectdData = isSelect ? [...this.list] : []
handleSelectAllData() {
this.removeAllSelect()
this.selectdData = [...this.list]
let nodes = this.$refs.dom_tbody.childNodes
for (const node of nodes) {
node.classList.add('active')
}
// asyncSetArray(this.selectdData, isSelect ? [...this.list] : [])
},
resetSelect() {
this.isSelectAll = false
this.selectdData = []
},
handleAddDownloadMultiple(type) {
const list = this.setting.apiSource == 'temp' ? this.selectdData.filter(s => s.source == 'kw') : [...this.selectdData]
this.createDownloadMultiple({ list, type })
this.resetSelect()
this.removeAllSelect()
this.isShowDownloadMultiple = false
},
handleFlowBtnClick(action) {
@@ -303,15 +390,15 @@ export default {
break
case 'remove':
this.listRemoveMultiple({ id: this.listId, list: this.selectdData })
this.resetSelect()
this.removeAllSelect()
break
case 'add':
this.isShowListAddMultiple = true
break
}
},
handleListAddModalClose(isSelect) {
if (isSelect) this.resetSelect()
handleListAddModalClose(isClearSelect) {
if (isClearSelect) this.removeAllSelect()
this.isShowListAddMultiple = false
},
getMusicLocation(index) {
@@ -365,21 +452,32 @@ export default {
}
.thead {
flex: none;
tr > th:first-child {
color: @color-theme_2-font-label;
// padding-left: 10px;
}
}
.tbody {
flex: auto;
overflow-y: auto;
td {
font-size: 12px;
}
tr {
&.active {
color: @color-theme;
}
}
td {
font-size: 12px;
&:first-child {
// padding-left: 10px;
font-size: 11px;
color: @color-theme_2-font-label;
}
}
&.copying {
.labelSource, .time {
.no-select {
display: none;
}
}
@@ -419,6 +517,11 @@ each(@themes, {
color: ~'@{color-@{value}-theme}';
}
}
td {
&:first-child {
color: ~'@{color-@{value}-theme_2-font-label}';
}
}
}
.labelSource {
color: ~'@{color-@{value}-theme}';