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-12-19 15:16:22 +08:00
parent ba9fd8d1f1
commit bc69a98df1
16 changed files with 639 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/material/Input.vue
+19 -2
View File
@@ -1,6 +1,6 @@
<template lang="pug">
input(:class="$style.input" :type="type" :placeholder="placeholder" :value="value" :disabled="disabled"
@focus="$emit('focus', $event)" @blur="$emit('blur', $event)" @input="$emit('input', $event.target.value.trim())" @change="$emit('change', $event.target.value.trim())"
input(:class="$style.input" ref="dom_input" :type="type" :placeholder="placeholder" :value="value" :disabled="disabled"
@focus="$emit('focus', $event)" @blur="$emit('blur', $event)" @input="handleInput" @change="$emit('change', $event.target.value.trim())"
@keyup.enter="$emit('submit', $event.target.value.trim())")
</template>
@@ -24,6 +24,16 @@ export default {
default: 'text',
},
},
methods: {
handleInput(event) {
let value = event.target.value.trim()
event.target.value = value
this.$emit('input', value)
},
focus() {
this.$refs.dom_input.focus()
},
},
}
</script>
@@ -41,6 +51,13 @@ export default {
transition: background-color 0.2s ease;
background-color: @color-btn-background;
font-size: 13.3px;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
&[disabled] {
opacity: .4;
}
src/renderer/components/material/ListAddModal.vue
+201
View File
@@ -0,0 +1,201 @@
<template lang="pug">
material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
main(:class="$style.main")
h2
| {{$t('material.list_add_modal.' + (isMove ? 'title_first_move' : 'title_first_add'))}}&nbsp;
span(:class="$style.name") {{this.musicInfo && `${musicInfo.name}`}}
| &nbsp;{{$t('material.list_add_modal.title_last')}}
div.scroll(:class="$style.btnContent")
material-btn(:class="$style.btn" :tips="$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)" :tips="$t('view.list.lists_new_list_btn')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' 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>
import { mapGetters, mapMutations } from 'vuex'
export default {
props: {
show: {
type: Boolean,
default: false,
},
musicInfo: {
type: Object,
},
bgClose: {
type: Boolean,
default: true,
},
excludeListId: {
type: Array,
default() {
return []
},
},
listName: {
type: String,
default: '',
},
fromListId: {
type: String,
default: null,
},
isMove: {
type: Boolean,
default: false,
},
},
data() {
return {
isEditing: false,
newListName: '',
}
},
computed: {
...mapGetters('list', ['defaultList', 'loveList', 'userList']),
lists() {
return [
this.defaultList,
this.loveList,
...this.userList,
].filter(l => l.id != this.excludeListId.includes(l.id))
},
spaceNum() {
return this.lists.length < 2 ? 0 : (3 - this.lists.length % 3 - 1)
},
},
methods: {
...mapMutations('list', ['listAdd', 'listMove', 'createUserList']),
handleClick(index) {
this.isMove
? this.listMove({ fromId: this.fromListId, toId: this.lists[index].id, musicInfo: this.musicInfo })
: this.listAdd({ id: this.lists[index].id, musicInfo: this.musicInfo })
this.$nextTick(() => {
this.handleClose()
})
},
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>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.main {
// 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;
padding: 15px;
}
}
.name {
color: @color-theme;
}
.btn-content {
flex: auto;
max-height: 100%;
padding-right: 15px;
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
.btn {
box-sizing: border-box;
margin-left: 15px;
margin-bottom: 15px;
height: 36px;
line-height: 36px;
padding: 0 10px !important;
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, {
:global(#container.@{value}) {
.main {
h2 {
color: ~'@{color-@{value}-theme_2-font}';
}
}
.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}';
}
}
})
</style>
src/renderer/components/material/ListAddMultipleModal.vue
+195
View File
@@ -0,0 +1,195 @@
<template lang="pug">
material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
main(:class="$style.main")
h2 {{$t('material.list_add_multiple_modal.' + (isMove ? 'title_move' : 'title_add'), { num: musicList.length })}}
div.scroll(:class="$style.btnContent")
material-btn(:class="$style.btn" :tips="$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)" :tips="$t('view.list.lists_new_list_btn')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' 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>
import { mapGetters, mapMutations } from 'vuex'
export default {
props: {
show: {
type: Boolean,
default: false,
},
musicList: {
type: Array,
default() {
return []
},
},
bgClose: {
type: Boolean,
default: true,
},
excludeListId: {
type: Array,
default() {
return []
},
},
listName: {
type: String,
default: '',
},
fromListId: {
type: String,
default: null,
},
isMove: {
type: Boolean,
default: false,
},
},
data() {
return {
isEditing: false,
newListName: '',
}
},
computed: {
...mapGetters('list', ['defaultList', 'loveList', 'userList']),
lists() {
return [
this.defaultList,
this.loveList,
...this.userList,
].filter(l => l.id != this.excludeListId.includes(l.id))
},
spaceNum() {
return this.lists.length < 2 ? 0 : (3 - this.lists.length % 3 - 1)
},
},
methods: {
...mapMutations('list', ['listAddMultiple', 'listMoveMultiple', 'createUserList']),
handleClick(index) {
this.isMove
? this.listMoveMultiple({ fromId: this.fromListId, toId: this.lists[index].id, list: this.musicList })
: this.listAddMultiple({ id: this.lists[index].id, list: this.musicList })
this.$nextTick(() => {
this.handleClose(true)
})
},
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>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.main {
// 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;
padding: 15px;
}
}
.btn-content {
flex: auto;
max-height: 100%;
padding-right: 15px;
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
.btn {
box-sizing: border-box;
margin-left: 15px;
margin-bottom: 15px;
height: 36px;
line-height: 36px;
padding: 0 10px !important;
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, {
:global(#container.@{value}) {
.main {
h2 {
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}';
}
}
})
</style>
src/renderer/components/material/ListSortModal.vue
+109
View File
@@ -0,0 +1,109 @@
<template lang="pug">
material-modal(:show="show" @close="handleClose")
main(:class="$style.main")
h2 {{selectedNum > 0 ? $t('material.list_sort_modal.title_multiple', { num: selectedNum }) : $t('material.list_sort_modal.title', { name: musicInfo ? musicInfo.name : '' })}}
material-input(:class="$style.input" type="number" v-model="sortNum" ref="input" :placeholder="$t('material.list_sort_modal.input_tip')" @keydown.native.enter="handleSubmit")
material-btn(:class="$style.btn" @click="handleSubmit") {{$t('material.list_sort_modal.btn_confirm')}}
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false,
},
musicInfo: {
type: Object,
default() {
return {}
},
},
selectedNum: {
type: Number,
default: 0,
},
},
data() {
return {
sortNum: '',
}
},
watch: {
show(n) {
if (n) {
this.sortNum = ''
this.$nextTick(() => {
this.$refs.input.focus()
})
}
},
},
computed: {
},
methods: {
handleClose() {
this.$emit('close')
},
handleSubmit() {
let num = /^[1-9]\d*/.exec(this.sortNum)
num = num ? parseInt(num[0]) : ''
this.sortNum = num.toString()
if (this.sortNum == '') return
this.$emit('confirm', num)
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.main {
padding: 0 15px;
max-width: 530px;
min-width: 320px;
display: flex;
flex-flow: column nowrap;
min-height: 0;
// max-height: 100%;
// overflow: hidden;
h2 {
font-size: 13px;
color: @color-theme_2-font;
line-height: 1.3;
// text-align: center;
padding: 15px 0 8px;
}
}
.input {
// width: 100%;
// height: 26px;
padding: 8px 8px;
}
.btn {
margin: 20px auto 15px;
// box-sizing: border-box;
// margin-left: 15px;
// margin-bottom: 15px;
// height: 36px;
// line-height: 36px;
// padding: 0 10px !important;
min-width: 100px;
// .mixin-ellipsis-1;
}
each(@themes, {
:global(#container.@{value}) {
.main {
h2 {
color: ~'@{color-@{value}-theme_2-font}';
}
}
}
})
</style>
src/renderer/components/material/Menu.vue
+2 -2
View File
@@ -138,10 +138,10 @@ export default {
// will-change: transform;
li {
cursor: pointer;
min-width: 80px;
min-width: 90px;
line-height: 34px;
// color: @color-btn;
padding: 0 5px;
padding: 0 10px;
text-align: center;
outline: none;
transition: @transition-theme;
src/renderer/components/material/XmVerifyModal.vue
+50
View File
@@ -0,0 +1,50 @@
<template lang="pug">
material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
main.ignore-to-rem(:class="$style.main")
h2 {{$t('material.xm_verify_modal.title')}}
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false,
},
bgClose: {
type: Boolean,
default: true,
},
},
methods: {
handleClose() {
this.$emit('close')
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.main {
background: #fff !important;
&:global(.ignore-to-rem) {
padding: 15px;
width: 360px;
height: 330px;
h2 {
font-size: 16px;
}
}
h2 {
font-size: 13px;
color: @color-theme_2-font;
line-height: 1.3;
text-align: center;
}
}
</style>