From b3a13a25f0f558c6ac8a59f6d6ba363634dff1c8 Mon Sep 17 00:00:00 2001 From: lyswhut Date: Fri, 12 Jun 2020 19:15:40 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/renderer/App.vue | 2 +- src/renderer/assets/styles/variables.less | 56 +++++++++---------- .../components/material/AasideList.vue | 4 +- src/renderer/components/material/SongList.vue | 4 +- src/renderer/views/Download.vue | 4 +- src/renderer/views/List.vue | 4 +- src/renderer/views/Search.vue | 4 +- 7 files changed, 44 insertions(+), 34 deletions(-) diff --git a/src/renderer/App.vue b/src/renderer/App.vue index d1cf4e22..d68cb596 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -404,7 +404,7 @@ body { border-top-left-radius: @radius-border; border-bottom-left-radius: @radius-border; overflow: hidden; - box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); } #toolbar, #player { flex: none; diff --git a/src/renderer/assets/styles/variables.less b/src/renderer/assets/styles/variables.less index 761b7aab..2d36926e 100644 --- a/src/renderer/assets/styles/variables.less +++ b/src/renderer/assets/styles/variables.less @@ -21,8 +21,8 @@ @color-theme_2-active: fadeout(lighten(@color-theme, 10%), 70%); @color-theme_2-font: darken(@color-theme_2, 70%); @color-theme_2-font-label: fadeout(@color-theme_2-font, 40%); -@color-theme_2-line: transparent; -// @color-theme_2-line: lighten(@color-theme, 35%); +// @color-theme_2-line: transparent; +@color-theme_2-line: lighten(@color-theme, 35%); @color-theme-sidebar: @color-theme; @color-btn: lighten(@color-theme, 5%); @color-btn-background: fadeout(lighten(@color-theme, 35%), 70%); @@ -89,8 +89,8 @@ @color-green-theme_2-active: fadeout(lighten(@color-green-theme, 10%), 70%); @color-green-theme_2-font: darken(@color-green-theme_2, 70%); @color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 40%); -@color-green-theme_2-line: transparent; -// @color-green-theme_2-line: lighten(@color-green-theme, 45%); +// @color-green-theme_2-line: transparent; +@color-green-theme_2-line: lighten(@color-green-theme, 45%); @color-green-theme-sidebar: @color-green-theme; @color-green-btn: lighten(@color-green-theme, 5%); @color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%); @@ -146,8 +146,8 @@ @color-yellow-theme_2-active: fadeout(lighten(@color-yellow-theme, 10%), 60%); @color-yellow-theme_2-font: darken(@color-yellow-theme_2, 70%); @color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 40%); -@color-yellow-theme_2-line: transparent; -// @color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%); +// @color-yellow-theme_2-line: transparent; +@color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%); @color-yellow-theme-sidebar: @color-yellow-theme; @color-yellow-btn: darken(@color-yellow-theme, 5%); @color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 60%); @@ -202,8 +202,8 @@ @color-orange-theme_2-active: fadeout(darken(@color-orange-theme, 5%), 70%); @color-orange-theme_2-font: darken(@color-orange-theme_2, 70%); @color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 40%); -@color-orange-theme_2-line: transparent; -// @color-orange-theme_2-line: lighten(@color-orange-theme, 36%); +// @color-orange-theme_2-line: transparent; +@color-orange-theme_2-line: lighten(@color-orange-theme, 36%); @color-orange-theme-sidebar: @color-orange-theme; @color-orange-btn: lighten(@color-orange-theme, 5%); @color-orange-btn-background: fadeout(lighten(@color-orange-theme, 25%), 60%); @@ -258,8 +258,8 @@ @color-blue-theme_2-active: fadeout(lighten(@color-blue-theme, 10%), 70%); @color-blue-theme_2-font: darken(@color-blue-theme_2, 70%); @color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 40%); -@color-blue-theme_2-line: transparent; -// @color-blue-theme_2-line: lighten(@color-blue-theme, 42%); +// @color-blue-theme_2-line: transparent; +@color-blue-theme_2-line: lighten(@color-blue-theme, 42%); @color-blue-theme-sidebar: @color-blue-theme; @color-blue-btn: lighten(@color-blue-theme, 5%); @color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 50%); @@ -314,8 +314,8 @@ @color-red-theme_2-background_2: fadeout(@color-red-theme_2-background_1, 2%); @color-red-theme_2-font: darken(@color-red-theme_2, 70%); @color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 40%); -@color-red-theme_2-line: transparent; -// @color-red-theme_2-line: lighten(@color-red-theme, 42%); +// @color-red-theme_2-line: transparent; +@color-red-theme_2-line: lighten(@color-red-theme, 42%); @color-red-theme-sidebar: @color-red-theme; @color-red-btn: lighten(@color-red-theme, 5%); @color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%); @@ -372,8 +372,8 @@ @color-pink-theme_2-active: fadeout(lighten(@color-pink-theme, 10%), 60%); @color-pink-theme_2-font: darken(@color-pink-theme_2, 70%); @color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 40%); -@color-pink-theme_2-line: transparent; -// @color-pink-theme_2-line: lighten(@color-pink-theme, 25%); +// @color-pink-theme_2-line: transparent; +@color-pink-theme_2-line: lighten(@color-pink-theme, 25%); @color-pink-theme-sidebar: @color-pink-theme; @color-pink-btn: darken(@color-pink-theme, 3%); @color-pink-btn-background: fadeout(lighten(@color-pink-theme, 20%), 50%); @@ -428,8 +428,8 @@ @color-purple-theme_2-active: fadeout(lighten(@color-purple-theme, 10%), 70%); @color-purple-theme_2-font: darken(@color-purple-theme_2, 70%); @color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 40%); -@color-purple-theme_2-line: transparent; -// @color-purple-theme_2-line: lighten(@color-purple-theme, 43%); +// @color-purple-theme_2-line: transparent; +@color-purple-theme_2-line: lighten(@color-purple-theme, 43%); @color-purple-theme-sidebar: @color-purple-theme; @color-purple-btn: lighten(@color-purple-theme, 5%); @color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%); @@ -484,8 +484,8 @@ @color-grey-theme_2-active: fadeout(lighten(@color-grey-theme, 10%), 70%); @color-grey-theme_2-font: darken(@color-grey-theme_2, 70%); @color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 40%); -@color-grey-theme_2-line: transparent; -// @color-grey-theme_2-line: lighten(@color-grey-theme, 47%); +// @color-grey-theme_2-line: transparent; +@color-grey-theme_2-line: lighten(@color-grey-theme, 47%); @color-grey-theme-sidebar: @color-grey-theme; @color-grey-btn: lighten(@color-grey-theme, 5%); @color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%); @@ -541,8 +541,8 @@ @color-ming-theme_2-background_2: fadeout(@color-ming-theme_2-background_1, 2%); @color-ming-theme_2-font: darken(@color-ming-theme_2, 70%); @color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 40%); -@color-ming-theme_2-line: transparent; -// @color-ming-theme_2-line: lighten(@color-ming-theme, 60%); +// @color-ming-theme_2-line: transparent; +@color-ming-theme_2-line: lighten(@color-ming-theme, 60%); @color-ming-theme-sidebar: @color-ming-theme; @color-ming-btn: lighten(@color-ming-theme, 5%); @color-ming-btn-background: fadeout(lighten(@color-ming-theme, 35%), 75%); @@ -600,8 +600,8 @@ @color-blue2-theme_2-active: fadeout(lighten(@color-blue2-theme, 10%), 70%); @color-blue2-theme_2-font: darken(@color-blue2-theme_2, 70%); @color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 40%); -@color-blue2-theme_2-line: transparent; -// @color-blue2-theme_2-line: lighten(@color-blue2-theme, 47%); +// @color-blue2-theme_2-line: transparent; +@color-blue2-theme_2-line: lighten(@color-blue2-theme, 41%); @color-blue2-theme-sidebar: @color-blue2-theme; @color-blue2-btn: lighten(@color-blue2-theme, 5%); @color-blue2-btn-background: fadeout(lighten(@color-blue2-theme, 30%), 70%); @@ -657,8 +657,8 @@ @color-mid_autumn-theme_2-active: fadeout(lighten(@color-mid_autumn-theme, 15%), 70%); @color-mid_autumn-theme_2-font: darken(@color-mid_autumn-theme_2, 70%); @color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%); -@color-mid_autumn-theme_2-line: transparent; -// @color-mid_autumn-theme_2-line: lighten(@color-mid_autumn-theme, 63%); +// @color-mid_autumn-theme_2-line: transparent; +@color-mid_autumn-theme_2-line: lighten(@color-mid_autumn-theme, 63%); @color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0); @color-mid_autumn-btn: lighten(@color-mid_autumn-theme, 10%); @color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%); @@ -713,8 +713,8 @@ @color-naruto-theme_2-active: fadeout(lighten(@color-naruto-theme, 10%), 65%); @color-naruto-theme_2-font: darken(@color-naruto-theme_2, 80%); @color-naruto-theme_2-font-label: desaturate(lighten(@color-naruto-theme, 10%), 45%); -@color-naruto-theme_2-line: transparent; -// @color-naruto-theme_2-line: fadeout(lighten(@color-naruto-theme, 36%), 70%); +// @color-naruto-theme_2-line: transparent; +@color-naruto-theme_2-line: fadeout(lighten(@color-naruto-theme, 36%), 70%); @color-naruto-theme-sidebar: rgba(255, 255, 255, .3); @color-naruto-btn: lighten(@color-naruto-theme, 2%); @color-naruto-btn-background: fadeout(lighten(@color-naruto-theme, 35%), 70%); @@ -769,8 +769,8 @@ @color-happy_new_year-theme_2-active: fadeout(lighten(@color-happy_new_year-theme, 10%), 55%); @color-happy_new_year-theme_2-font: darken(@color-happy_new_year-theme_2, 90%); @color-happy_new_year-theme_2-font-label: desaturate(darken(@color-happy_new_year-theme, 5%), 50%); -@color-happy_new_year-theme_2-line: transparent; -// @color-happy_new_year-theme_2-line: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%); +// @color-happy_new_year-theme_2-line: transparent; +@color-happy_new_year-theme_2-line: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%); @color-happy_new_year-theme-sidebar: rgba(119, 37, 18, 0.1); @color-happy_new_year-btn: desaturate(@color-happy_new_year-theme, 10%); @color-happy_new_year-btn-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 60%); diff --git a/src/renderer/components/material/AasideList.vue b/src/renderer/components/material/AasideList.vue index 51fd85a3..2dbaa488 100644 --- a/src/renderer/components/material/AasideList.vue +++ b/src/renderer/components/material/AasideList.vue @@ -90,6 +90,7 @@ export default { isADown: false, aDownTimeout: null, }, + lastSelectIndex: -1, } }, created() { @@ -168,7 +169,7 @@ export default { handleSelectData(event, clickIndex) { if (this.keyEvent.isShiftDown) { if (this.selectdList.length) { - let lastSelectIndex = this.list.indexOf(this.selectdList[this.selectdList.length - 1]) + let lastSelectIndex = this.lastSelectIndex this.removeAllSelect() if (lastSelectIndex != clickIndex) { let isNeedReverse = false @@ -189,6 +190,7 @@ export default { } else { event.currentTarget.classList.add('active') this.selectdList.push(this.list[clickIndex]) + this.lastSelectIndex = clickIndex } } else if (this.keyEvent.isModDown) { let item = this.list[clickIndex] diff --git a/src/renderer/components/material/SongList.vue b/src/renderer/components/material/SongList.vue index d80d3ee7..3d1f636a 100644 --- a/src/renderer/components/material/SongList.vue +++ b/src/renderer/components/material/SongList.vue @@ -161,6 +161,7 @@ export default { isShiftDown: false, isModDown: false, }, + lastSelectIndex: -1, listMenu: { isShowItemMenu: false, itemMenuControl: { @@ -236,7 +237,7 @@ export default { handleSelectData(event, clickIndex) { if (this.keyEvent.isShiftDown) { if (this.selectdList.length) { - let lastSelectIndex = this.list.indexOf(this.selectdList[this.selectdList.length - 1]) + let lastSelectIndex = this.lastSelectIndex this.removeAllSelect() if (lastSelectIndex != clickIndex) { let isNeedReverse = false @@ -257,6 +258,7 @@ export default { } else { event.currentTarget.classList.add('active') this.selectdList.push(this.list[clickIndex]) + this.lastSelectIndex = clickIndex } } else if (this.keyEvent.isModDown) { let item = this.list[clickIndex] diff --git a/src/renderer/views/Download.vue b/src/renderer/views/Download.vue index 8a72c5de..19a2c243 100644 --- a/src/renderer/views/Download.vue +++ b/src/renderer/views/Download.vue @@ -53,6 +53,7 @@ export default { isShiftDown: false, isModDown: false, }, + lastSelectIndex: -1, listMenu: { isShowItemMenu: false, itemMenuControl: { @@ -232,7 +233,7 @@ export default { handleSelectData(event, clickIndex) { if (this.keyEvent.isShiftDown) { if (this.selectdData.length) { - let lastSelectIndex = this.showList.indexOf(this.selectdData[this.selectdData.length - 1]) + let lastSelectIndex = this.lastSelectIndex this.removeAllSelect() if (lastSelectIndex != clickIndex) { let isNeedReverse = false @@ -253,6 +254,7 @@ export default { } else { event.currentTarget.classList.add('active') this.selectdData.push(this.showList[clickIndex]) + this.lastSelectIndex = clickIndex } } else if (this.keyEvent.isModDown) { let item = this.showList[clickIndex] diff --git a/src/renderer/views/List.vue b/src/renderer/views/List.vue index f80053ba..f7acac28 100644 --- a/src/renderer/views/List.vue +++ b/src/renderer/views/List.vue @@ -94,6 +94,7 @@ export default { isShiftDown: false, isModDown: false, }, + lastSelectIndex: -1, listsData: { isShowItemMenu: false, itemMenuControl: { @@ -406,7 +407,7 @@ export default { if (this.keyEvent.isShiftDown) { if (this.selectdListDetailData.length) { - let lastSelectIndex = this.list.indexOf(this.selectdListDetailData[this.selectdListDetailData.length - 1]) + let lastSelectIndex = this.lastSelectIndex if (lastSelectIndex == clickIndex) return this.removeAllSelectListDetail() this.removeAllSelectListDetail() let isNeedReverse = false @@ -426,6 +427,7 @@ export default { } else { event.currentTarget.classList.add('active') this.selectdListDetailData.push(this.list[clickIndex]) + this.lastSelectIndex = clickIndex } } else if (this.keyEvent.isModDown) { let item = this.list[clickIndex] diff --git a/src/renderer/views/Search.vue b/src/renderer/views/Search.vue index 7da09886..6f80e531 100644 --- a/src/renderer/views/Search.vue +++ b/src/renderer/views/Search.vue @@ -83,6 +83,7 @@ export default { isShiftDown: false, isModDown: false, }, + lastSelectIndex: -1, listMenu: { isShowItemMenu: false, itemMenuControl: { @@ -278,7 +279,7 @@ export default { handleSelectData(event, clickIndex) { if (this.keyEvent.isShiftDown) { if (this.selectedData.length) { - let lastSelectIndex = this.listInfo.list.indexOf(this.selectedData[this.selectedData.length - 1]) + let lastSelectIndex = this.lastSelectIndex this.removeAllSelect() if (lastSelectIndex != clickIndex) { let isNeedReverse = false @@ -299,6 +300,7 @@ export default { } else { event.currentTarget.classList.add('active') this.selectedData.push(this.listInfo.list[clickIndex]) + this.lastSelectIndex = clickIndex } } else if (this.keyEvent.isModDown) { let item = this.listInfo.list[clickIndex]