允许选中列表内的部分文字,优化界面
parent
ee3d04ba23
commit
867ae2991c
|
@ -1,3 +1,12 @@
|
|||
### 新增
|
||||
|
||||
- 允许选中列表内歌曲名、歌手名、专辑名内的文字,选中后可使用键盘快捷键进行复制
|
||||
|
||||
### 优化
|
||||
|
||||
- 优化木叶之村主题翻页器背景颜色
|
||||
- 优化其他一些界面细节
|
||||
|
||||
### 修复
|
||||
|
||||
- 修复启用透明窗口鼠标不穿透的bug
|
||||
|
|
Before Width: | Height: | Size: 181 KiB After Width: | Height: | Size: 181 KiB |
|
@ -20,6 +20,13 @@
|
|||
word-break: break-all;
|
||||
}
|
||||
|
||||
.select {
|
||||
user-select: text;
|
||||
}
|
||||
.no-select {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
|
@ -50,7 +57,7 @@ table {
|
|||
position: relative;
|
||||
transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
line-height: 1.4;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
@ -129,6 +136,10 @@ input, textarea {
|
|||
color: @color-theme_2-font-label;
|
||||
}
|
||||
}
|
||||
::selection {
|
||||
color: @color-theme_2;
|
||||
background: @color-btn;
|
||||
}
|
||||
|
||||
.hover, a {
|
||||
cursor: pointer;
|
||||
|
@ -206,7 +217,11 @@ each(@themes, {
|
|||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: ~'@{color-@{value}-theme_2}';
|
||||
background: ~'@{color-@{value}-btn}';
|
||||
}
|
||||
|
||||
.badge {
|
||||
&.badge-theme-success {
|
||||
color: ~'@{color-@{value}-badge-success-font}';
|
||||
|
|
|
@ -61,7 +61,7 @@
|
|||
@color-green-badge-success-font: #fff;
|
||||
@color-green-badge-info: #4baed5;
|
||||
@color-green-badge-info-font: #fff;
|
||||
@color-badge-success: #32bc63;
|
||||
@color-badge-success: @color-theme;
|
||||
@color-badge-success-font: #fff;
|
||||
@color-badge-info: #4baed5;
|
||||
@color-badge-info-font: #fff;
|
||||
|
@ -463,7 +463,7 @@
|
|||
@color-midAutumn-badge-info-font: #fff;
|
||||
|
||||
@color-dhHyrz-theme: rgb(87, 144, 167);
|
||||
@color-dhHyrz-theme-bgimg: url(../images/hzwbg.jpeg);
|
||||
@color-dhHyrz-theme-bgimg: url(../images/myzcbg.jpeg);
|
||||
@color-dhHyrz-theme-bgposition: center;
|
||||
@color-dhHyrz-theme-bgsize: auto 100%;
|
||||
@color-dhHyrz-theme-hover: fadeout(lighten(@color-dhHyrz-theme, 10%), 45%);
|
||||
|
@ -481,10 +481,10 @@
|
|||
@color-dhHyrz-theme-sidebar: rgba(255, 255, 255, .3);
|
||||
@color-dhHyrz-btn: fadeout(darken(@color-dhHyrz-theme, 5%), 15%);
|
||||
@color-dhHyrz-btn-background: fadeout(lighten(@color-dhHyrz-theme, 35%), 70%);
|
||||
@color-dhHyrz-pagination-background: fadeout(lighten(@color-dhHyrz-theme, 45%), 50%);
|
||||
@color-dhHyrz-pagination-hover: fadeout(lighten(@color-dhHyrz-theme, 10%), 70%);
|
||||
@color-dhHyrz-pagination-background: fadeout(lighten(@color-dhHyrz-theme, 15%), 60%);
|
||||
@color-dhHyrz-pagination-hover: fadeout(lighten(@color-dhHyrz-theme, 10%), 60%);
|
||||
@color-dhHyrz-pagination-active: fadeout(darken(@color-dhHyrz-theme, 10%), 70%);
|
||||
@color-dhHyrz-pagination-select: fadeout(lighten(@color-dhHyrz-theme, 10%), 55%);
|
||||
@color-dhHyrz-pagination-select: fadeout(lighten(@color-dhHyrz-theme, 10%), 50%);
|
||||
@color-dhHyrz-search-form-background: fadeout(lighten(@color-dhHyrz-theme, 30%), 20%);
|
||||
@color-dhHyrz-search-list-hover: fadeout(darken(@color-dhHyrz-theme, 10%), 50%);
|
||||
@color-dhHyrz-scrollbar-track: fadeout(@color-dhHyrz-theme, 80%);
|
||||
|
|
|
@ -588,7 +588,7 @@ export default {
|
|||
}
|
||||
}
|
||||
.left {
|
||||
width: @height-player;
|
||||
width: @height-player - 2;
|
||||
color: @color-theme;
|
||||
transition: @transition-theme;
|
||||
transition-property: color;
|
||||
|
@ -617,7 +617,7 @@ export default {
|
|||
.right {
|
||||
flex: auto;
|
||||
// margin-left: 10px;
|
||||
padding: 5px 10px;
|
||||
padding: 5px 10px 5px 8px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
|
|
@ -17,15 +17,17 @@ div(:class="$style.songList")
|
|||
div.scroll(:class="$style.tbody" ref="dom_scrollContent")
|
||||
table
|
||||
tbody
|
||||
tr(v-for='(item, index) in list' :key='item.songmid' @click="handleDoubleClick(index)")
|
||||
tr(v-for='(item, index) in list' :key='item.songmid' @click="handleDoubleClick($event, index)")
|
||||
td.nobreak.center(style="width: 37px;" @click.stop)
|
||||
material-checkbox(:id="index.toString()" v-model="selectdList" @change="handleChangeSelect" :value="item")
|
||||
td.break(style="width: 25%;")
|
||||
| {{item.name}}
|
||||
span.select {{item.name}}
|
||||
span.badge.badge-theme-info(v-if="!(item._types.ape || item._types.flac) && item._types['320k']") 高品质
|
||||
span.badge.badge-theme-success(v-if="item._types.ape || item._types.flac") 无损
|
||||
td.break(style="width: 20%;") {{item.singer}}
|
||||
td.break(style="width: 20%;") {{item.albumName}}
|
||||
td.break(style="width: 20%;")
|
||||
span.select {{item.singer}}
|
||||
td.break(style="width: 20%;")
|
||||
span.select {{item.albumName}}
|
||||
td(style="width: 20%; padding-left: 0; padding-right: 0;")
|
||||
material-list-buttons(:index="index" :search-btn="true"
|
||||
:remove-btn="false" @btn-click="handleListBtnClick"
|
||||
|
@ -131,7 +133,9 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
handleDoubleClick(index) {
|
||||
handleDoubleClick(event, index) {
|
||||
if (event.target.classList.contains('select')) return
|
||||
|
||||
if (
|
||||
window.performance.now() - this.clickTime > 400 ||
|
||||
this.clickIndex !== index
|
||||
|
@ -197,13 +201,7 @@ export default {
|
|||
td {
|
||||
font-size: 12px;
|
||||
:global(.badge) {
|
||||
margin-right: 3px;
|
||||
&:first-child {
|
||||
margin-left: 3px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
:global(.badge) {
|
||||
|
|
|
@ -27,7 +27,7 @@ const buildHttpPromose = (url, options) => {
|
|||
requestObj = fetchData(url, options.method, options, (err, resp, body) => {
|
||||
// options.isShowProgress && window.api.hideProgress()
|
||||
debugRequest && console.log(`\n---response------${url}------------`)
|
||||
debugRequest && console.log(JSON.stringify(body))
|
||||
debugRequest && console.log(body)
|
||||
requestObj = null
|
||||
cancelFn = null
|
||||
if (err) {
|
||||
|
@ -112,7 +112,7 @@ export const http = (url, options, cb) => {
|
|||
return fetchData(url, options.method, options, (err, resp, body) => {
|
||||
// options.isShowProgress && window.api.hideProgress()
|
||||
debugRequest && console.log(`\n---response------${url}------------`)
|
||||
debugRequest && console.log(JSON.stringify(body))
|
||||
debugRequest && console.log(body)
|
||||
if (err) {
|
||||
debugRequest && console.log(JSON.stringify(err))
|
||||
}
|
||||
|
@ -141,7 +141,7 @@ export const httpGet = (url, options, callback) => {
|
|||
return fetchData(url, 'get', options, function(err, resp, body) {
|
||||
// options.isShowProgress && window.api.hideProgress()
|
||||
debugRequest && console.log(`\n---response------${url}------------`)
|
||||
debugRequest && console.log(JSON.stringify(body))
|
||||
debugRequest && console.log(body)
|
||||
if (err) {
|
||||
debugRequest && console.log(JSON.stringify(err))
|
||||
}
|
||||
|
@ -172,7 +172,7 @@ export const httpPost = (url, data, options, callback) => {
|
|||
return fetchData(url, 'post', options, function(err, resp, body) {
|
||||
// options.isShowProgress && window.api.hideProgress()
|
||||
debugRequest && console.log(`\n---response------${url}------------`)
|
||||
debugRequest && console.log(JSON.stringify(body))
|
||||
debugRequest && console.log(body)
|
||||
if (err) {
|
||||
debugRequest && console.log(JSON.stringify(err))
|
||||
}
|
||||
|
@ -209,7 +209,7 @@ export const http_jsonp = (url, options, callback) => {
|
|||
return fetchData(url, 'get', options, function(err, resp, body) {
|
||||
// options.isShowProgress && window.api.hideProgress()
|
||||
debugRequest && console.log(`\n---response------${url}------------`)
|
||||
debugRequest && console.log(JSON.stringify(body))
|
||||
debugRequest && console.log(body)
|
||||
if (err) {
|
||||
debugRequest && console.log(JSON.stringify(err))
|
||||
} else {
|
||||
|
|
|
@ -19,10 +19,11 @@ div(:class="$style.download")
|
|||
div.scroll(v-if="list.length" :class="$style.tbody")
|
||||
table
|
||||
tbody
|
||||
tr(v-for='(item, index) in showList' :key='item.key' @click="handleDoubleClick(index)" :class="playListIndex === index ? $style.active : ''")
|
||||
tr(v-for='(item, index) in showList' :key='item.key' @click="handleDoubleClick($event, index)" :class="playListIndex === index ? $style.active : ''")
|
||||
td.nobreak.center(style="width: 37px;" @click.stop)
|
||||
material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
|
||||
td.break(style="width: 28%;") {{item.musicInfo.name}} - {{item.musicInfo.singer}}
|
||||
td.break(style="width: 28%;")
|
||||
span.select {{item.musicInfo.name}} - {{item.musicInfo.singer}}
|
||||
td.break(style="width: 22%;") {{item.progress.progress}}%
|
||||
td.break(style="width: 15%;") {{item.statusText}}
|
||||
td.break(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
|
||||
|
@ -133,7 +134,9 @@ export default {
|
|||
let dl = this.dls[info.key]
|
||||
dl ? dl.start() : this.startTask(info)
|
||||
},
|
||||
handleDoubleClick(index) {
|
||||
handleDoubleClick(event, index) {
|
||||
if (event.target.classList.contains('select')) return
|
||||
|
||||
if (
|
||||
window.performance.now() - this.clickTime > 400 ||
|
||||
this.clickIndex !== index
|
||||
|
|
|
@ -18,19 +18,21 @@
|
|||
table
|
||||
tbody
|
||||
tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid"
|
||||
@click="handleDoubleClick(index)" :class="[isPlayList && playIndex === index ? $style.active : '', (isAPITemp && item.source != 'kw') ? $style.disabled : '']")
|
||||
@click="handleDoubleClick($event, index)" :class="[isPlayList && playIndex === index ? $style.active : '', (isAPITemp && item.source != 'kw') ? $style.disabled : '']")
|
||||
td.nobreak.center(style="width: 37px;" @click.stop)
|
||||
material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
|
||||
td.break(style="width: 25%;")
|
||||
| {{item.name}}
|
||||
span.select {{item.name}}
|
||||
span(:class="$style.labelSource" v-if="isShowSource") {{item.source}}
|
||||
//- span.badge.badge-light(v-if="item._types['128k']") 128K
|
||||
//- span.badge.badge-light(v-if="item._types['192k']") 192K
|
||||
//- span.badge.badge-secondary(v-if="item._types['320k']") 320K
|
||||
//- span.badge.badge-theme-info(v-if="item._types.ape") APE
|
||||
//- span.badge.badge-theme-success(v-if="item._types.flac") FLAC
|
||||
td.break(style="width: 20%;") {{item.singer}}
|
||||
td.break(style="width: 20%;") {{item.albumName}}
|
||||
td.break(style="width: 20%;")
|
||||
span.select {{item.singer}}
|
||||
td.break(style="width: 20%;")
|
||||
span.select {{item.albumName}}
|
||||
td(style="width: 20%; padding-left: 0; padding-right: 0;")
|
||||
material-list-buttons(:index="index" @btn-click="handleListBtnClick")
|
||||
//- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
|
||||
|
@ -229,7 +231,8 @@ export default {
|
|||
})
|
||||
})
|
||||
},
|
||||
handleDoubleClick(index) {
|
||||
handleDoubleClick(event, index) {
|
||||
if (event.target.classList.contains('select')) return
|
||||
if (
|
||||
window.performance.now() - this.clickTime > 400 ||
|
||||
this.clickIndex !== index
|
||||
|
|
|
@ -19,16 +19,18 @@
|
|||
div.scroll(:class="$style.tbody" ref="dom_scrollContent")
|
||||
table
|
||||
tbody
|
||||
tr(v-for='(item, index) in listInfo.list' :key='item.songmid' @click="handleDoubleClick(index)")
|
||||
tr(v-for='(item, index) in listInfo.list' :key='item.songmid' @click="handleDoubleClick($event, index)")
|
||||
td.nobreak.center(style="width: 37px;" @click.stop)
|
||||
material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
|
||||
td.break(style="width: 25%;")
|
||||
| {{item.name}}
|
||||
span.select {{item.name}}
|
||||
span.badge.badge-theme-info(v-if="!(item._types.ape || item._types.flac) && item._types['320k']") 高品质
|
||||
span.badge.badge-theme-success(v-if="item._types.ape || item._types.flac") 无损
|
||||
span(:class="$style.labelSource" v-if="searchSourceId == 'all'") {{item.source}}
|
||||
td.break(style="width: 20%;") {{item.singer}}
|
||||
td.break(style="width: 25%;") {{item.albumName}}
|
||||
td.break(style="width: 20%;")
|
||||
span.select {{item.singer}}
|
||||
td.break(style="width: 25%;")
|
||||
span.select {{item.albumName}}
|
||||
td(style="width: 15%; padding-left: 0; padding-right: 0;")
|
||||
material-list-buttons(:index="index" :remove-btn="false" :class="$style.listBtn"
|
||||
:play-btn="item.source == 'kw' || !isAPITemp"
|
||||
|
@ -152,7 +154,8 @@ export default {
|
|||
})
|
||||
})
|
||||
},
|
||||
handleDoubleClick(index) {
|
||||
handleDoubleClick(event, index) {
|
||||
if (event.target.classList.contains('select')) return
|
||||
if (
|
||||
window.performance.now() - this.clickTime > 400 ||
|
||||
this.clickIndex !== index
|
||||
|
@ -279,13 +282,7 @@ export default {
|
|||
td {
|
||||
font-size: 12px;
|
||||
:global(.badge) {
|
||||
margin-right: 3px;
|
||||
&:first-child {
|
||||
margin-left: 3px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
:global(.badge) {
|
||||
|
|
Loading…
Reference in New Issue