github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

优化下载、歌曲添加弹窗在大屏幕下的排版

pull/930/merge
lyswhut 2022-03-09 15:03:35 +08:00
parent 4965dad6a2
commit d35a6f504f
8 changed files with 102 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
publish/changeLog.md
View File

@ -18,7 +18,7 @@
### 文档
添加LX中定义的快捷操作汇总说明到常见问题中，这是目前可用的鼠标、键盘快捷操作，他们都可以在更新日志中找到
添加LX中定义的快捷操作汇总说明到常见问题中，这是目前可用的鼠标、键盘快捷操作，它们都可以在更新日志中找到
- 鼠标右击播放栏的歌曲图片封面可以定位当前播放的歌曲
- 鼠标右击播放栏进度条上的LRC按钮可以锁定/解锁桌面歌词

2
src/renderer/components/common/DownloadModal.vue
View File

@ -79,7 +79,7 @@ export default {
.main {
padding: 15px;
max-width: 300px;
max-width: 400px;
min-width: 200px;
display: flex;
flex-flow: column nowrap;

2
src/renderer/components/common/DownloadMultipleModal.vue
View File

@ -51,7 +51,7 @@ export default {
.main {
padding: 15px;
max-width: 300px;
max-width: 400px;
min-width: 200px;
display: flex;
flex-flow: column nowrap;

44
src/renderer/components/common/ListAddModal.vue
View File

@ -1,5 +1,5 @@
<template>
<material-modal :show="show" :bg-close="bgClose" @close="handleClose" :teleport="teleport">
<material-modal :show="show" :bg-close="bgClose" @close="handleClose" :teleport="teleport" max-width="70%">
<main :class="$style.main">
<h2>{{$t('list_add__' + (isMove ? 'title_first_move' : 'title_first_add'))}}&nbsp;<span :class="$style.name">{{this.musicInfo && `${musicInfo.name}`}}</span>&nbsp;{{$t('list_add__title_last')}}</h2>
<div class="scroll" :class="$style.btnContent">
@ -74,15 +74,30 @@ export default {
return {
isEditing: false,
newListName: '',
rowNum: 3,
}
},
computed: {
spaceNum() {
return this.lists.length < 2 ? 0 : (3 - this.lists.length % 3 - 1)
return this.lists.length < 2 ? 0 : (this.rowNum - this.lists.length % this.rowNum - 1)
},
},
mounted() {
window.addEventListener('resize', this.handleResize)
},
beforeUnmount() {
window.removeEventListener('resize', this.handleResize)
},
methods: {
...mapMutations('list', ['listAdd', 'listMove', 'createUserList']),
handleResize() {
const width = window.innerWidth
this.rowNum = width <= 1440
? 3
: width <= 1920
? 4
: width <= 2560 ? 5 : 6
},
handleClick(index) {
this.isMove
? this.listMove({ fromId: this.fromListId, toId: this.lists[index].id, musicInfo: this.musicInfo })
@ -117,7 +132,7 @@ export default {
.main {
// padding: 15px 0;
max-width: 620px;
// max-width: 70%;
min-width: 200px;
display: flex;
flex-flow: column nowrap;
@ -147,6 +162,7 @@ export default {
justify-content: space-evenly;
}
@item-width: (100% / 3);
.btn {
box-sizing: border-box;
margin-left: 15px;
@ -154,7 +170,8 @@ export default {
height: 36px;
line-height: 36px;
padding: 0 10px !important;
width: 180px;
width: calc(@item-width - 15px);
min-width: 160px;
.mixin-ellipsis-1;
}
@ -194,6 +211,25 @@ export default {
display: none;
}
@item-width2: (100% / 4);
@media screen and (min-width: 1920px){
.btn {
width: calc(@item-width2 - 15px);
}
}
@item-width3: (100% / 5);
@media screen and (min-width: 2048px){
.btn {
width: calc(@item-width3 - 15px);
}
}
@item-width4: (100% / 6);
@media screen and (min-width: 2560px){
.btn {
width: calc(@item-width4 - 15px);
}
}
each(@themes, {
:global(#root.@{value}) {
.main {

45
src/renderer/components/common/ListAddMultipleModal.vue
View File

@ -1,5 +1,5 @@
<template>
<material-modal :show="show" :bg-close="bgClose" @close="handleClose">
<material-modal :show="show" :bg-close="bgClose" @close="handleClose" max-width="70%">
<main :class="$style.main">
<h2>{{$t('list_add__multiple_' + (isMove ? 'title_move' : 'title_add'), { num: musicList.length })}}</h2>
<div class="scroll" :class="$style.btnContent">
@ -74,16 +74,31 @@ export default {
return {
isEditing: false,
newListName: '',
rowNum: 3,
}
},
computed: {
spaceNum() {
return this.lists.length < 2 ? 0 : (3 - this.lists.length % 3 - 1)
return this.lists.length < 2 ? 0 : (this.rowNum - this.lists.length % this.rowNum - 1)
},
},
mounted() {
window.addEventListener('resize', this.handleResize)
},
beforeUnmount() {
window.removeEventListener('resize', this.handleResize)
},
methods: {
...mapMutations('list', ['listAddMultiple', 'listMoveMultiple', 'createUserList']),
handleResize() {
const width = window.innerWidth
this.rowNum = width <= 1440
? 3
: width <= 1920
? 4
: width <= 2560 ? 5 : 6
},
handleClick(index) {
this.isMove
? this.listMoveMultiple({ fromId: this.fromListId, toId: this.lists[index].id, list: this.musicList })
@ -119,7 +134,7 @@ export default {
.main {
// padding: 15px 0;
max-width: 620px;
// max-width: 620px;
min-width: 200px;
display: flex;
flex-flow: column nowrap;
@ -145,6 +160,7 @@ export default {
justify-content: space-evenly;
}
@item-width: (100% / 3);
.btn {
box-sizing: border-box;
margin-left: 15px;
@ -152,7 +168,8 @@ export default {
height: 36px;
line-height: 36px;
padding: 0 10px !important;
width: 180px;
width: calc(@item-width - 15px);
min-width: 160px;
.mixin-ellipsis-1;
}
@ -192,6 +209,26 @@ export default {
display: none;
}
@item-width2: (100% / 4);
@media screen and (min-width: 1920px){
.btn {
width: calc(@item-width2 - 15px);
}
}
@item-width3: (100% / 5);
@media screen and (min-width: 2048px){
.btn {
width: calc(@item-width3 - 15px);
}
}
@item-width4: (100% / 6);
@media screen and (min-width: 2560px){
.btn {
width: calc(@item-width4 - 15px);
}
}
each(@themes, {
:global(#root.@{value}) {
.main {

4
src/renderer/components/core/PlayDetail/components/MusicComment/index.vue
View File

@ -132,7 +132,9 @@ export default {
},
methods: {
setWidth() {
this.$refs.dom_container.style.width = this.$refs.dom_container.clientWidth + 'px'
setTimeout(() => {
this.$refs.dom_container.style.width = Math.floor(this.$refs.dom_container.parentNode.clientWidth * 0.5) + 'px'
})
},
async getComment(musicInfo, page, limit, retryNum = 0) {
let resp

13
src/renderer/components/material/Modal.vue
View File

@ -4,7 +4,7 @@ teleport(:to="teleport")
transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
div(:class="$style.modal" v-show="showContent" @click="bgClose && close()")
transition(:enter-active-class="inClass" :leave-active-class="outClass" @after-enter="$emit('after-enter', $event)" @after-leave="handleAfterLeave")
div(:class="$style.content" v-show="showContent" @click.stop)
div(:class="$style.content" v-show="showContent" @click.stop :style="contentStyle")
header(:class="$style.header")
button(type="button" @click="close" v-if="closeBtn")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 212.982 212.982' space='preserve')
@ -34,6 +34,10 @@ export default {
type: String,
default: '#root',
},
maxWidth: {
type: String,
default: '76%',
},
},
emits: ['after-enter', 'after-leave', 'close'],
data() {
@ -91,6 +95,11 @@ export default {
},
computed: {
...mapGetters(['setting']),
contentStyle() {
return {
maxWidth: this.maxWidth,
}
},
},
watch: {
'setting.randomAnimate'(n) {
@ -182,7 +191,7 @@ export default {
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
overflow: hidden;
max-height: 80%;
max-width: 76%;
// max-width: 76%;
min-width: 220px;
position: relative;
display: flex;

2
src/renderer/views/songList/SongList.vue
View File

@ -208,8 +208,10 @@ export default {
window.removeEventListener('resize', this.handleSetTagWidth)
},
handleSetTagWidth() {
setTimeout(() => {
this.setTagListWidth()
setTimeout(this.setTagListWidth, 100)
})
},
handle_key_backspace_down({ event }) {
if (!this.isVisibleListDetail ||