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/components/core/Aside.vue
+16 -25
View File
@@ -1,26 +1,25 @@
<template lang="pug">
div(:class="$style.aside")
div(:class="['animated', logoAnimate, $style.logo]")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 127 61' space='preserve')
div(:class="['animated', logoAnimate, $style.logo]") L X
//- svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 127 61' space='preserve')
use(xlink:href='#icon-logo')
div(:class="$style.menu")
dl
//- dt {{$t('core.aside.online_music')}}
dd
router-link(:active-class="$style.active" to="search")
router-link(:active-class="$style.active" to="search" :title="$t('core.aside.search')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 801.99 811.98' space='preserve')
use(xlink:href='#icon-search-2')
//- span {{$t('core.aside.search')}}
dd
router-link(:active-class="$style.active" to="songList")
router-link(:active-class="$style.active" to="songList" :title="$t('core.aside.song_list')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 739.96 763.59' space='preserve')
use(xlink:href='#icon-album')
//- span {{$t('core.aside.song_list')}}
dd
router-link(:active-class="$style.active" to="leaderboard")
router-link(:active-class="$style.active" to="leaderboard" :title="$t('core.aside.leaderboard')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 819.1 819.38' space='preserve')
use(xlink:href='#icon-leaderboard')
@@ -28,23 +27,20 @@ div(:class="$style.aside")
dl
//- dt {{$t('core.aside.my_music')}}
dd
//- router-link(:active-class="($route.query.id === defaultList.id || $route.query.id == '') ? $style.active : ''" :to="`list?id=${defaultList.id || ''}`") {{$t('core.aside.default_list')}}
router-link(:active-class="$route.query.id === loveList.id ? $style.active : ''" :to="`list?id=${loveList.id}`")
router-link(:active-class="$style.active" :title="$t('core.aside.my_list')" :to="`list?id=${setting.list.prevSelectListId || defaultList.id}`")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 830.33 740.22' space='preserve')
use(xlink:href='#icon-love')
//- span {{$t('core.aside.love_list')}}
router-link(:active-class="$route.query.id === item.id ? $style.active : ''" v-for="item in userList" :to="`list?id=${item._id}`" :key="item._id") {{item.name}}
dl
//- dt {{$t('core.aside.other')}}
dd
router-link(:active-class="$style.active" to="download")
router-link(:active-class="$style.active" to="download" :title="$t('core.aside.download')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 798.85 718.96' space='preserve')
use(xlink:href='#icon-download-2')
//- span {{$t('core.aside.download')}}
dd
router-link(:active-class="$style.active" to="setting")
router-link(:active-class="$style.active" to="setting" :title="$t('core.aside.setting')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 854.85 775.41' space='preserve')
use(xlink:href='#icon-setting')
@@ -55,14 +51,6 @@ div(:class="$style.aside")
import { mapGetters } from 'vuex'
// import { getRandom } from '../../utils'
export default {
props: {
list: {
type: Array,
default() {
return []
},
},
},
data() {
return {
active: 'search',
@@ -83,7 +71,8 @@ export default {
}
},
computed: {
...mapGetters('list', ['defaultList', 'loveList', 'userList']),
...mapGetters(['setting']),
...mapGetters('list', ['defaultList']),
},
// mounted() {
// this.logoAnimate = this.animates[getRandom(0, this.animates.length)]
@@ -120,10 +109,12 @@ export default {
}
.logo {
box-sizing: border-box;
padding: 12% 13%;
// height: 120px;
padding: 0 13%;
height: 50px;
color: @color-theme-font;
flex: none;
text-align: center;
line-height: 50px;
// -webkit-app-region: no-drag;
}
@@ -132,7 +123,7 @@ export default {
// display: flex;
// flex-flow: column nowrap;
// justify-content: center;
// padding-bottom: 40px;
// padding-bottom: 50px;
// padding: 5px;
dl {
-webkit-app-region: no-drag;
@@ -165,7 +156,7 @@ export default {
text-align: center;
transition: background-color 0.3s ease;
// border-radius: 4px;
// border-radius: @radius-border;
.mixin-ellipsis-1;
&.active {
src/renderer/components/core/Icons.vue
+3
View File
@@ -121,5 +121,8 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
path.cls-1(d='M573,734.37H248.32a86.27,86.27,0,0,1-74.5-43L11.49,410.2a86.27,86.27,0,0,1,0-86L173.81,43a86.27,86.27,0,0,1,74.5-43H573a86.27,86.27,0,0,1,74.5,43L809.79,324.17a86.27,86.27,0,0,1,0,86L647.47,691.35A86.27,86.27,0,0,1,573,734.37ZM248.32,74.51a11.55,11.55,0,0,0-10,5.76L76,361.42a11.56,11.56,0,0,0,0,11.52L238.34,654.1a11.56,11.56,0,0,0,10,5.76H573a11.55,11.55,0,0,0,10-5.76L745.27,372.94a11.55,11.55,0,0,0,0-11.52L582.94,80.27a11.56,11.56,0,0,0-10-5.76Z')
g#icon-list-add(fill='currentColor')
//- 0 0 24 24
path(d='M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z')
</template>
src/renderer/components/core/Player.vue
+3 -3
View File
@@ -529,7 +529,7 @@ export default {
this.nowPlayTime = 0
this.maxPlayTime = 0
this.lyric.lines = []
this.lyric.line = 0
this.lyric.line = -1
this.lyric.text = 0
},
sendProgressEvent(status, mode) {
@@ -702,7 +702,7 @@ export default {
}
}
.left {
width: @height-player;
width: @height-player - 2;
height: @height-player - 2;
color: @color-theme;
transition: @transition-theme;
@@ -730,7 +730,7 @@ export default {
transition: @transition-theme;
transition-property: border-color;
// border-radius: 50%;
// border-radius: @radius-progress-border;
border-radius: @radius-border;
// border: 2px solid @color-theme_2-background_1;
}
}
src/renderer/components/core/PlayerDetail.vue
+39 -7
View File
@@ -24,7 +24,7 @@
div(:class="$style.right")
div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" @mousedown="handleLyricMouseDown" ref="dom_lyric")
div(:class="$style.lyricSpace")
p(v-for="(info, index) in lyric.lines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}}
p(v-for="(info, index) in lyricLines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}}
div(:class="$style.lyricSpace")
div(:class="$style.footer")
div(:class="$style.left")
@@ -128,16 +128,44 @@ export default {
immediate: true,
},
'lyric.lines': {
handler() {
this.$nextTick(() => {
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
this.handleScrollLrc()
})
handler(n, o) {
this.isSetedLines = true
if (o) {
this._lyricLines = n
if (n.length) {
this.lyricLines = n
this.$nextTick(() => {
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
this.handleScrollLrc()
})
} else {
if (cancelScrollFn) {
cancelScrollFn()
cancelScrollFn = null
}
cancelScrollFn = scrollTo(this.$refs.dom_lyric, 0, 300, () => {
if (this.lyricLines === this._lyricLines && this._lyricLines.length) return
this.lyricLines = this._lyricLines
this.$nextTick(() => {
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
this.handleScrollLrc()
})
}, 50)
}
} else {
this.lyricLines = n
this.$nextTick(() => {
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('p')
this.handleScrollLrc()
})
}
},
immediate: true,
},
'lyric.line': {
handler(n) {
if (n < 0) return
if (n == 0 && this.isSetedLines) return this.isSetedLines = false
this.handleScrollLrc()
},
immediate: true,
@@ -167,6 +195,9 @@ export default {
isStopScroll: false,
timeout: null,
},
_lyricLines: [],
lyricLines: [],
isSetedLines: false,
}
},
mounted() {
@@ -298,7 +329,7 @@ export default {
z-index: 10;
// -webkit-app-region: drag;
overflow: hidden;
border-radius: 4px;
border-radius: @radius-border;
color: @color-theme_2-font;
border-left: 12px solid @color-theme;
}
@@ -465,6 +496,7 @@ export default {
max-width: 100%;
max-height: 100%;
border: 5px solid @color-theme-hover;
// border-radius: @radius-border;
// border: 5px solid #fff;
}
}
src/renderer/components/material/AasideList.vue
+316
View File
@@ -0,0 +1,316 @@
<template lang="pug">
div(:class="$style.lists")
h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
ul.scroll(:class="$style.listsContent")
li(:class="$style.listsItem" v-for="item in lists" :key="item.id") {{item.name}}
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")
</template>
<script>
import { mapGetters } from 'vuex'
import { scrollTo, clipboardWriteText, assertApiSupport } from '../../utils'
export default {
name: 'MaterialSongList',
model: {
prop: 'selectdData',
event: 'input',
},
props: {
list: {
type: Array,
default() {
return []
},
},
page: {
type: Number,
required: true,
},
limit: {
type: Number,
required: true,
},
total: {
type: Number,
required: true,
},
selectdData: {
type: Array,
required: true,
},
source: {
type: String,
},
noItem: {
type: String,
default: '列表加载中...',
},
},
computed: {
...mapGetters(['setting']),
},
watch: {
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.selectdList = [...n]
} else {
this.isShowEditBtn = false
this.removeAllSelect()
}
},
list(n) {
this.removeAllSelect()
if (!this.list.length) return
this.$nextTick(() => scrollTo(this.$refs.dom_scrollContent, 0))
},
},
data() {
return {
clickTime: 0,
clickIndex: -1,
isShowEditBtn: false,
selectdList: [],
keyEvent: {
isShiftDown: false,
isModDown: false,
isADown: false,
aDownTimeout: null,
},
}
},
created() {
this.listenEvent()
},
beforeDestroy() {
this.unlistenEvent()
},
methods: {
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+a_up', this.handle_key_mod_a_up)
},
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+a_up', this.handle_key_mod_a_up)
},
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() {
if (!this.keyEvent.isADown) {
this.keyEvent.isModDown = false
this.keyEvent.isADown = true
this.handleSelectAllData()
if (this.keyEvent.aDownTimeout) clearTimeout(this.keyEvent.aDownTimeout)
this.keyEvent.aDownTimeout = setTimeout(() => {
this.keyEvent.aDownTimeout = null
this.keyEvent.isADown = false
}, 500)
}
},
handle_key_mod_a_up() {
if (this.keyEvent.isADown) {
if (this.keyEvent.aDownTimeout) {
clearTimeout(this.keyEvent.aDownTimeout)
this.keyEvent.aDownTimeout = null
}
this.keyEvent.isADown = false
}
},
handleDoubleClick(event, index) {
if (event.target.classList.contains('select')) return
this.handleSelectData(event, index)
if (
window.performance.now() - this.clickTime > 400 ||
this.clickIndex !== index
) {
this.clickTime = window.performance.now()
this.clickIndex = index
return
}
this.emitEvent(this.assertApiSupport(this.source) ? 'testPlay' : 'search', index)
this.clickTime = 0
this.clickIndex = -1
},
handleSelectData(event, clickIndex) {
if (this.keyEvent.isShiftDown) {
if (this.selectdList.length) {
let lastSelectIndex = this.list.indexOf(this.selectdList[this.selectdList.length - 1])
this.removeAllSelect()
if (lastSelectIndex != clickIndex) {
let isNeedReverse = false
if (clickIndex < lastSelectIndex) {
let temp = lastSelectIndex
lastSelectIndex = clickIndex
clickIndex = temp
isNeedReverse = true
}
this.selectdList = this.list.slice(lastSelectIndex, clickIndex + 1)
if (isNeedReverse) this.selectdList.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.selectdList.push(this.list[clickIndex])
}
} else if (this.keyEvent.isModDown) {
let item = this.list[clickIndex]
let index = this.selectdList.indexOf(item)
if (index < 0) {
this.selectdList.push(item)
event.currentTarget.classList.add('active')
} else {
this.selectdList.splice(index, 1)
event.currentTarget.classList.remove('active')
}
} else if (this.selectdList.length) {
this.removeAllSelect()
} else return
this.$emit('input', [...this.selectdList])
},
removeAllSelect() {
this.selectdList = []
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')
}
},
handleListBtnClick(info) {
this.emitEvent('listBtnClick', info)
},
handleSelectAllData() {
this.removeAllSelect()
this.selectdList = [...this.list]
let nodes = this.$refs.dom_tbody.childNodes
for (const node of nodes) {
node.classList.add('active')
}
this.$emit('input', [...this.selectdList])
},
handleTogglePage(page) {
this.emitEvent('togglePage', page)
},
handleFlowBtnClick(action) {
this.emitEvent('flowBtnClick', action)
},
emitEvent(action, data) {
this.$emit('action', { action, data })
},
handleChangeSelect() {
this.$emit('input', [...this.selectdList])
},
handleContextMenu(event) {
if (!event.target.classList.contains('select')) return
let classList = this.$refs.dom_scrollContent.classList
classList.add(this.$style.copying)
window.requestAnimationFrame(() => {
let str = window.getSelection().toString()
classList.remove(this.$style.copying)
str = str.trim()
if (!str.length) return
clipboardWriteText(str)
})
},
assertApiSupport(source) {
return assertApiSupport(source)
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.lists {
flex: none;
width: 15%;
display: flex;
flex-flow: column nowrap;
}
.title {
font-size: 12px;
line-height: 28px;
padding: 5px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
flex: none;
}
.list {
flex: auto;
min-width: 0;
}
.item {
}
.noitem {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 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}) {
.tbody {
td {
&:first-child {
color: ~'@{color-@{value}-theme_2-font-label}';
}
}
}
.noitem {
p {
color: ~'@{color-@{value}-theme_2-font-label}';
}
}
}
})
</style>
src/renderer/components/material/FlowBtn.vue
+4 -3
View File
@@ -71,10 +71,11 @@ export default {
position: fixed;
bottom: 80px;
right: 30px;
background-color: @color-search-form-background;
// transform: translateX(-25%);
background-color: @color-theme_2-background_2;
border-radius: 5px;
// padding: 3px 5px;
box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
box-shadow: 0 1px 8px 0 rgba(0,0,0,.2);
button {
background-color: transparent;
border: none;
@@ -106,7 +107,7 @@ export default {
each(@themes, {
:global(#container.@{value}) {
.btns {
background-color: ~'@{color-@{value}-search-form-background}';
background-color: ~'@{color-@{value}-theme_2-background_2}';
button {
color: ~'@{color-@{value}-btn}';
&:hover {
src/renderer/components/material/Menu.vue
+172
View File
@@ -0,0 +1,172 @@
<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]}}
</template>
<script>
export default {
props: {
menus: {
type: Array,
default() {
return []
},
},
itemName: {
type: String,
default: 'name',
},
isShow: {
type: Boolean,
default: false,
},
location: {
type: Object,
default() {
return { x: 0, y: 0 }
},
},
},
watch: {
isShow: {
handler(n) {
n ? this.handleShow() : this.handleHide()
},
immediate: true,
},
location: {
handler(n) {
this.listStyles.left = n.x + 'px'
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)`
}
},
deep: true,
},
},
data() {
return {
show: false,
listStyles: {
left: 0,
top: 0,
opacity: 0,
transitionProperty: 'transform, opacity',
transform: 'scale(0) translateY(0)',
},
transition1: 'transform, opacity',
transition2: 'transform, opacity, top, left',
transitionProperty: 'transform, opacity',
}
},
mounted() {
document.addEventListener('click', this.handleDocumentClick)
},
beforeDestroy() {
document.removeEventListener('click', this.handleDocumentClick)
},
methods: {
handleShow() {
this.show = true
this.listStyles.opacity = 1
this.listStyles.transform = `scaleY(1) translateY(${this.handleGetOffset(this.location.y)}px)`
},
handleHide(e) {
this.listStyles.opacity = 0
this.listStyles.transform = 'scale(0) translateY(0)'
this.show = false
},
handleGetOffset(top) {
const listHeight = this.$refs.dom_list.clientHeight
const dom_container = this.$refs.dom_list.offsetParent
const containerHeight = dom_container.clientHeight
if (containerHeight < listHeight) return 0
const offsetHeight = containerHeight - top - listHeight
if (offsetHeight > 0) return 0
return offsetHeight - 5
},
handleDocumentClick(event) {
if (!this.show) return
if (event.target == this.$refs.dom_list || this.$refs.dom_list.contains(event.target)) return
if (this.show && this.listStyles.transitionProperty != this.transition1) this.listStyles.transitionProperty = this.transition1
this.handleClick(null)
},
handleClick(item) {
if (item && item.disabled) return
this.$emit('menu-click', item)
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.list {
font-size: 12px;
position: absolute;
opacity: 0;
transform: scale(0);
transform-origin: 0 0 0;
transition: .25s ease;
transition-property: transform, opacity;
border-radius: @radius-border;
background-color: @color-theme_2-background_2;
box-shadow: 0 1px 8px 0 rgba(0,0,0,.2);
z-index: 10;
li {
cursor: pointer;
min-width: 80px;
line-height: 34px;
// color: @color-btn;
padding: 0 5px;
text-align: center;
outline: none;
transition: background-color @transition-theme;
box-sizing: border-box;
.mixin-ellipsis-1;
&:hover {
background-color: @color-theme_2-hover;
}
&:active {
background-color: @color-theme_2-active;
}
&[disabled] {
cursor: default;
opacity: .4;
&:hover {
background: none !important;
}
}
}
}
each(@themes, {
:global(#container.@{value}) {
.list {
background-color: ~'@{color-@{value}-theme_2-background_2}';
li {
// color: ~'@{color-@{value}-btn}';
&:hover {
background-color: ~'@{color-@{value}-theme_2-hover}';
}
&:active {
background-color: ~'@{color-@{value}-theme_2-active}';
}
}
}
}
})
</style>
src/renderer/components/material/Pagination.vue
+5 -5
View File
@@ -118,7 +118,7 @@ export default {
display: inline-block;
background-color: @color-pagination-background;
// border-top-left-radius: 8px;
border-radius: 4px;
border-radius: @radius-border;
ul {
display: flex;
flex-flow: row nowrap;
@@ -170,15 +170,15 @@ export default {
}
&:first-child {
span, button {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-left-radius: @radius-border;
border-bottom-left-radius: @radius-border;
}
// border-right: .0625rem solid @theme_line;
}
&:last-child {
span, button {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-top-right-radius: @radius-border;
border-bottom-right-radius: @radius-border;
}
// border-right: .0625rem solid @theme_line;
}
src/renderer/components/material/Select.vue
+2 -2
View File
@@ -80,7 +80,7 @@ export default {
border-left: 2px solid @color-tab-border-bottom;
box-sizing: border-box;
text-align: center;
border-top-left-radius: 4px;
border-top-left-radius: @radius-border;
color: @color-btn;
cursor: pointer;
.mixin-ellipsis-1;
@@ -100,7 +100,7 @@ export default {
left: 0;
border-bottom: 2px solid @color-tab-border-bottom;
border-left: 2px solid @color-tab-border-bottom;
border-bottom-left-radius: 4px;
border-bottom-left-radius: @radius-border;
background-color: @color-theme_2-background_2;
opacity: 0;
transform: scaleY(0);
src/renderer/components/material/SongList.vue
+2
View File
@@ -158,6 +158,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()
src/renderer/components/material/Tab.vue
+3 -3
View File
@@ -98,15 +98,15 @@ export default {
margin-left: 0;
button {
border-top-left-radius: 3px;
// border-bottom-left-radius: 4px;
// border-bottom-left-radius: @radius-border;
}
}
&:last-child {
border-right: 2px solid @color-tab-border-top;
border-top-right-radius: 4px;
border-top-right-radius: @radius-border;
button {
border-top-right-radius: 3px;
// border-bottom-right-radius: 4px;
// border-bottom-right-radius: @radius-border;
}
}
button {
src/renderer/components/material/listAddModal.vue
+97 -9
View File
@@ -5,7 +5,13 @@ material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
| {{$t('material.list_add_modal.title_first')}}&nbsp;
span(:class="$style.name") {{this.musicInfo && `${musicInfo.name}`}}
| &nbsp;{{$t('material.list_add_modal.title_last')}}
material-btn(:class="$style.btn" :title="$t('material.list_add_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
div.scroll(:class="$style.btnContent")
material-btn(:class="$style.btn" :title="$t('material.list_add_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')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 42 42' space='preserve')
use(xlink:href='#icon-addTo')
input.key-bind(:class="$style.newListInput" :value="newListName" type="text" :placeholder="$t('view.list.lists_new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)")
span(:class="$style.btn" v-for="i in spaceNum")
</template>
<script>
@@ -29,6 +35,16 @@ export default {
return []
},
},
listName: {
type: String,
default: '',
},
},
data() {
return {
isEditing: false,
newListName: '',
}
},
computed: {
...mapGetters('list', ['defaultList', 'loveList', 'userList']),
@@ -37,11 +53,14 @@ export default {
this.defaultList,
this.loveList,
...this.userList,
].filter(l => !this.excludeListId.includes(l.id))
].filter(l => l.id != this.excludeListId)
},
spaceNum() {
return this.lists.length < 2 ? 0 : (3 - this.lists.length % 3 - 1)
},
},
methods: {
...mapMutations('list', ['listAdd']),
...mapMutations('list', ['listAdd', 'createUserList']),
handleClick(index) {
this.listAdd({ id: this.lists[index].id, musicInfo: this.musicInfo })
this.$nextTick(() => {
@@ -51,6 +70,19 @@ export default {
handleClose() {
this.$emit('close')
},
handleEditing(event) {
if (this.isEditing) return
if (!this.newListName) this.newListName = this.listName
this.isEditing = true
this.$nextTick(() => event.currentTarget.querySelector('.' + this.$style.newListInput).focus())
},
handleSaveList(event) {
let name = event.target.value
this.newListName = event.target.value = ''
this.isEditing = false
if (!name) return
this.createUserList(name)
},
},
}
</script>
@@ -60,18 +92,21 @@ export default {
@import '../../assets/styles/layout.less';
.main {
padding: 15px;
max-width: 300px;
// padding: 15px 0;
max-width: 530px;
min-width: 200px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
min-height: 0;
// max-height: 100%;
// overflow: hidden;
h2 {
font-size: 13px;
color: @color-theme_2-font;
line-height: 1.3;
text-align: center;
margin-bottom: 15px;
padding: 15px;
}
}
@@ -79,12 +114,60 @@ export default {
color: @color-theme;
}
.btn-content {
flex: auto;
max-height: 100%;
padding-right: 15px;
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
.btn {
display: block;
box-sizing: border-box;
margin-left: 15px;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
height: 36px;
line-height: 36px;
padding: 0 10px;
width: 150px;
.mixin-ellipsis-1;
}
.newList {
border: 1px dashed @color-theme-hover;
background-color: @color-theme_2-background_2;
color: @color-theme-hover;
opacity: .7;
svg {
height: 18px;
margin-top: 9px;
}
&.editing {
opacity: 1;
svg {
display: none;
}
.newListInput {
display: block;
}
}
}
.newListInput {
width: 100%;
height: 34px;
border: none;
padding: 0;
line-height: 34px;
background: none;
outline: none;
font-size: 14px;
text-align: center;
font-family: inherit;
display: none;
}
each(@themes, {
@@ -97,6 +180,11 @@ each(@themes, {
.name {
color: ~'@{color-@{value}-theme}';
}
.newList {
border-color: ~'@{color-@{value}-theme-hover}';
color: ~'@{color-@{value}-theme-hover}';
background-color: ~'@{color-@{value}-theme_2-background_2}';
}
}
})
src/renderer/components/material/listAddMultipleModal.vue
+97 -9
View File
@@ -2,7 +2,13 @@
material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
main(:class="$style.main")
h2 {{$t('material.list_add_multiple_modal.title', { num: musicList.length })}}
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}}
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')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 42 42' space='preserve')
use(xlink:href='#icon-addTo')
input.key-bind(:class="$style.newListInput" :value="newListName" type="text" :placeholder="$t('view.list.lists_new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)")
span(:class="$style.btn" v-for="i in spaceNum")
</template>
<script>
@@ -29,6 +35,16 @@ export default {
return []
},
},
listName: {
type: String,
default: '',
},
},
data() {
return {
isEditing: false,
newListName: '',
}
},
computed: {
...mapGetters('list', ['defaultList', 'loveList', 'userList']),
@@ -38,11 +54,14 @@ export default {
this.defaultList,
this.loveList,
...this.userList,
].filter(l => !this.excludeListId.includes(l.id))
].filter(l => l.id != this.excludeListId)
},
spaceNum() {
return this.lists.length < 2 ? 0 : (3 - this.lists.length % 3 - 1)
},
},
methods: {
...mapMutations('list', ['listAddMultiple']),
...mapMutations('list', ['listAddMultiple', 'createUserList']),
handleClick(index) {
this.listAddMultiple({ id: this.lists[index].id, list: this.musicList })
this.$nextTick(() => {
@@ -52,6 +71,19 @@ export default {
handleClose(isSelect = false) {
this.$emit('close', isSelect)
},
handleEditing(event) {
if (this.isEditing) return
if (!this.newListName) this.newListName = this.listName
this.isEditing = true
this.$nextTick(() => event.currentTarget.querySelector('.' + this.$style.newListInput).focus())
},
handleSaveList(event) {
let name = event.target.value
this.newListName = event.target.value = ''
this.isEditing = false
if (!name) return
this.createUserList(name)
},
},
}
</script>
@@ -61,27 +93,78 @@ export default {
@import '../../assets/styles/layout.less';
.main {
padding: 15px;
max-width: 300px;
// padding: 15px 0;
max-width: 530px;
min-width: 200px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
min-height: 0;
// max-height: 100%;
// overflow: hidden;
h2 {
font-size: 13px;
color: @color-theme_2-font;
line-height: 1.3;
text-align: center;
margin-bottom: 15px;
padding: 15px;
}
}
.btn-content {
flex: auto;
max-height: 100%;
padding-right: 15px;
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
.btn {
display: block;
box-sizing: border-box;
margin-left: 15px;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
height: 36px;
line-height: 36px;
padding: 0 10px;
width: 150px;
.mixin-ellipsis-1;
}
.newList {
border: 1px dashed @color-theme-hover;
background-color: @color-theme_2-background_2;
color: @color-theme-hover;
opacity: .7;
svg {
height: 18px;
margin-top: 9px;
}
&.editing {
opacity: 1;
svg {
display: none;
}
.newListInput {
display: block;
}
}
}
.newListInput {
width: 100%;
height: 34px;
border: none;
padding: 0;
line-height: 34px;
background: none;
outline: none;
font-size: 14px;
text-align: center;
font-family: inherit;
display: none;
}
each(@themes, {
@@ -91,6 +174,11 @@ each(@themes, {
color: ~'@{color-@{value}-theme_2-font}';
}
}
.newList {
border-color: ~'@{color-@{value}-theme-hover}';
color: ~'@{color-@{value}-theme-hover}';
background-color: ~'@{color-@{value}-theme_2-background_2}';
}
}
})