Merge branch 'v1' into dev
This commit is contained in:
lyswhut
@@ -1,44 +1,56 @@
|
||||
<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')}}
|
||||
//- dt {{$t('core.aside.online_music')}}
|
||||
dd
|
||||
router-link(:active-class="$style.active" to="search") {{$t('core.aside.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')
|
||||
dd
|
||||
router-link(:active-class="$style.active" to="songList") {{$t('core.aside.song_list')}}
|
||||
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") {{$t('core.aside.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')
|
||||
//- span {{$t('core.aside.leaderboard')}}
|
||||
dl
|
||||
dt {{$t('core.aside.my_music')}}
|
||||
//- 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}`") {{$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}}
|
||||
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')
|
||||
dl
|
||||
dt {{$t('core.aside.other')}}
|
||||
//- dt {{$t('core.aside.other')}}
|
||||
dd
|
||||
router-link(:active-class="$style.active" to="download") {{$t('core.aside.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") {{$t('core.aside.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')
|
||||
//- span {{$t('core.aside.setting')}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
// import { getRandom } from '../../utils'
|
||||
export default {
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 'search',
|
||||
@@ -59,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)]
|
||||
@@ -96,27 +109,35 @@ 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;
|
||||
}
|
||||
|
||||
.menu {
|
||||
flex: auto;
|
||||
padding: 10px;
|
||||
// display: flex;
|
||||
// flex-flow: column nowrap;
|
||||
// justify-content: center;
|
||||
// padding-bottom: 50px;
|
||||
// padding: 5px;
|
||||
dl {
|
||||
-webkit-app-region: no-drag;
|
||||
margin-bottom: 15px;
|
||||
// margin-bottom: 15px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
dt {
|
||||
padding-left: 5px;
|
||||
font-size: 11px;
|
||||
transition: @transition-theme;
|
||||
transition-property: color;
|
||||
color: @color-theme-font-label;
|
||||
.mixin-ellipsis-1;
|
||||
}
|
||||
dd a {
|
||||
display: block;
|
||||
@@ -124,17 +145,19 @@ export default {
|
||||
text-decoration: none;
|
||||
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
margin: 5px 0;
|
||||
padding: 18px 3px;
|
||||
// margin: 5px 0;
|
||||
// border-left: 5px solid transparent;
|
||||
transition: @transition-theme;
|
||||
transition-property: color;
|
||||
color: @color-theme-font;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-size: 11.5px;
|
||||
text-align: center;
|
||||
|
||||
transition: background-color 0.3s ease;
|
||||
border-radius: 4px;
|
||||
// border-radius: @radius-border;
|
||||
.mixin-ellipsis-1;
|
||||
|
||||
&.active {
|
||||
// border-left-color: @color-theme-active;
|
||||
@@ -151,6 +174,13 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
// margin-bottom: 5px;
|
||||
&> svg {
|
||||
width: 32%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
each(@themes, {
|
||||
:global(#container.@{value}) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -2,7 +2,7 @@
|
||||
div(:class="$style.player")
|
||||
div(:class="$style.left" @contextmenu="handleToMusicLocation" @click="showPlayerDetail")
|
||||
img(v-if="musicInfo.img" :src="musicInfo.img" @error="imgError")
|
||||
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 60 60' space='preserve')
|
||||
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='102%' width='100%' viewBox='0 0 60 60' space='preserve')
|
||||
use(:xlink:href='`#${$style.iconPic}`')
|
||||
div(:class="$style.right" v-if="!isShowPlayerDetail")
|
||||
div(:class="$style.column1")
|
||||
@@ -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) {
|
||||
@@ -690,7 +690,7 @@ export default {
|
||||
|
||||
.player {
|
||||
height: @height-player;
|
||||
// background-color: rgb(245, 245, 245);
|
||||
background-color: @color-theme_2;
|
||||
transition: @transition-theme;
|
||||
transition-property: border-color;
|
||||
border-top: 2px solid @color-theme;
|
||||
@@ -712,6 +712,9 @@ export default {
|
||||
opacity: 1;
|
||||
transition: @transition-theme;
|
||||
transition-property: opacity;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
@@ -726,6 +729,8 @@ export default {
|
||||
max-height: 100%;
|
||||
transition: @transition-theme;
|
||||
transition-property: border-color;
|
||||
// border-radius: 50%;
|
||||
border-radius: @radius-border;
|
||||
// border: 2px solid @color-theme_2-background_1;
|
||||
}
|
||||
}
|
||||
@@ -931,6 +936,7 @@ export default {
|
||||
each(@themes, {
|
||||
:global(#container.@{value}) {
|
||||
.player {
|
||||
background-color: ~'@{color-@{value}-theme_2}';
|
||||
border-top-color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
.left {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -30,7 +30,7 @@ export default {
|
||||
return this.musicInfo || {}
|
||||
},
|
||||
qualityList() {
|
||||
return window.globalObj.qualityList[this.musicInfo.source]
|
||||
return window.globalObj.qualityList[this.musicInfo.source] || []
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -55,6 +55,7 @@ export default {
|
||||
outline: none;
|
||||
transition: background-color 0.2s ease;
|
||||
background-color: @color-btn-background;
|
||||
font-size: 13.3px;
|
||||
&[disabled] {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -140,7 +140,7 @@ export default {
|
||||
transition: box-shadow .4s ease, background-color @transition-theme;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
width: 240px;
|
||||
width: 35%;
|
||||
background-color: @color-search-form-background;
|
||||
|
||||
&.active {
|
||||
@@ -148,6 +148,7 @@ export default {
|
||||
.form {
|
||||
input {
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
}
|
||||
button {
|
||||
border-bottom-right-radius: 0;
|
||||
@@ -156,7 +157,7 @@ export default {
|
||||
}
|
||||
.form {
|
||||
display: flex;
|
||||
height: @height-toolbar / 2;
|
||||
height: @height-toolbar * 0.52;
|
||||
position: relative;
|
||||
input {
|
||||
flex: auto;
|
||||
@@ -172,6 +173,8 @@ export default {
|
||||
// height: @height-toolbar * .7;
|
||||
padding: 0 5px;
|
||||
overflow: hidden;
|
||||
font-size: 13.5px;
|
||||
line-height: @height-toolbar * 0.52 + 5px;
|
||||
&::placeholder {
|
||||
color: @color-btn;
|
||||
}
|
||||
@@ -186,7 +189,7 @@ export default {
|
||||
border-bottom-right-radius: 3px;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
padding: 5px 7px;
|
||||
padding: 6px 7px;
|
||||
color: @color-btn;
|
||||
transition: background-color .2s ease;
|
||||
|
||||
@@ -226,7 +229,8 @@ export default {
|
||||
}
|
||||
|
||||
.big {
|
||||
width: 500px;
|
||||
min-width: 500px;
|
||||
width: 100%;
|
||||
// input {
|
||||
// line-height: 30px;
|
||||
// }
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -10,8 +10,8 @@ div(:class="$style.songList")
|
||||
th.nobreak(style="width: 25%;") {{$t('material.song_list.name')}}
|
||||
th.nobreak(style="width: 20%;") {{$t('material.song_list.singer')}}
|
||||
th.nobreak(style="width: 20%;") {{$t('material.song_list.album')}}
|
||||
th.nobreak(style="width: 20%;") {{$t('material.song_list.action')}}
|
||||
th.nobreak(style="width: 10%;") {{$t('material.song_list.time')}}
|
||||
th.nobreak(style="width: 20%;") {{$t('material.song_list.action')}}
|
||||
div.scroll(:class="$style.tbody" ref="dom_scrollContent")
|
||||
table
|
||||
tbody(@contextmenu="handleContextMenu" ref="dom_tbody")
|
||||
@@ -25,8 +25,10 @@ div(:class="$style.songList")
|
||||
span.select {{item.singer}}
|
||||
td.break(style="width: 20%;")
|
||||
span.select {{item.albumName}}
|
||||
td(style="width: 10%;")
|
||||
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
|
||||
td(style="width: 20%; padding-left: 0; padding-right: 0;")
|
||||
material-list-buttons(:index="index" :search-btn="true"
|
||||
material-list-buttons(:index="index" :search-btn="true" :class="$style.btns"
|
||||
:remove-btn="false" @btn-click="handleListBtnClick"
|
||||
:listAdd-btn="assertApiSupport(item.source)"
|
||||
:play-btn="assertApiSupport(item.source)"
|
||||
@@ -34,8 +36,6 @@ div(:class="$style.songList")
|
||||
//- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
|
||||
//- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
|
||||
//- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
|
||||
td(style="width: 10%;")
|
||||
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
|
||||
div(:class="$style.pagination")
|
||||
material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage")
|
||||
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
|
||||
@@ -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()
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -5,7 +5,13 @@ material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
|
||||
| {{$t('material.list_add_modal.title_first')}}
|
||||
span(:class="$style.name") {{this.musicInfo && `${musicInfo.name}`}}
|
||||
| {{$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}';
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -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}';
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user