From 64c8a5847f9382798158af4b0a756adf0e8b0e1d Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 8 Apr 2019 19:56:42 +0900 Subject: [PATCH] Fix --- src/client/app/admin/views/drive.vue | 2 +- src/client/app/common/views/components/avatar.vue | 7 +------ .../app/common/views/components/drive-file-thumbnail.vue | 8 +++----- src/client/app/common/views/components/media-image.vue | 2 +- .../common/views/components/messaging-room.message.vue | 2 +- .../app/common/views/components/settings/profile.vue | 2 +- src/client/app/common/views/deck/deck.user-column.vue | 2 +- src/client/app/common/views/pages/follow.vue | 2 +- src/client/app/desktop/views/components/drive.file.vue | 4 ++-- src/client/app/desktop/views/home/user/user.header.vue | 2 +- .../app/mobile/views/components/drive.file-detail.vue | 4 ++-- src/client/app/mobile/views/pages/user/index.vue | 2 +- src/services/drive/add-file.ts | 2 +- 13 files changed, 17 insertions(+), 24 deletions(-) diff --git a/src/client/app/admin/views/drive.vue b/src/client/app/admin/views/drive.vue index 491050b1f..1f35de100 100644 --- a/src/client/app/admin/views/drive.vue +++ b/src/client/app/admin/views/drive.vue @@ -153,7 +153,7 @@ export default Vue.extend({ thumbnail(file: any): any { return { - 'background-color': file.properties.avgColor && file.properties.avgColor.length == 3 ? `rgb(${file.properties.avgColor.join(',')})` : 'transparent', + 'background-color': file.properties.avgColor || 'transparent', 'background-image': `url(${file.thumbnailUrl})` }; }, diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue index c074fb600..04f3ed9f7 100644 --- a/src/client/app/common/views/components/avatar.vue +++ b/src/client/app/common/views/components/avatar.vue @@ -55,12 +55,7 @@ export default Vue.extend({ }, icon(): any { return { - backgroundColor: this.user.avatarColor ? this.lightmode - ? this.user.avatarColor - : this.user.avatarColor.startsWith('rgb(') - ? this.user.avatarColor - : null - : null, + backgroundColor: this.user.avatarColor, backgroundImage: this.lightmode ? null : `url(${this.url})`, borderRadius: this.$store.state.settings.circleIcons ? '100%' : null }; diff --git a/src/client/app/common/views/components/drive-file-thumbnail.vue b/src/client/app/common/views/components/drive-file-thumbnail.vue index faa727f3b..c432de172 100644 --- a/src/client/app/common/views/components/drive-file-thumbnail.vue +++ b/src/client/app/common/views/components/drive-file-thumbnail.vue @@ -111,9 +111,7 @@ export default Vue.extend({ : false; }, background(): string { - return this.file.properties.avgColor && this.file.properties.avgColor.length == 3 - ? `rgb(${this.file.properties.avgColor.join(',')})` - : 'transparent'; + return this.file.properties.avgColor || 'transparent'; } }, mounted() { @@ -122,10 +120,10 @@ export default Vue.extend({ }, methods: { onThumbnailLoaded() { - if (this.file.properties.avgColor && this.file.properties.avgColor.length == 3) { + if (this.file.properties.avgColor) { anime({ targets: this.$refs.thumbnail, - backgroundColor: `rgba(${this.file.properties.avgColor.join(',')}, 0)`, + backgroundColor: this.file.properties.avgColor.replace('255)', '0)'), duration: 100, easing: 'linear' }); diff --git a/src/client/app/common/views/components/media-image.vue b/src/client/app/common/views/components/media-image.vue index 3947ef552..255990751 100644 --- a/src/client/app/common/views/components/media-image.vue +++ b/src/client/app/common/views/components/media-image.vue @@ -52,7 +52,7 @@ export default Vue.extend({ } return { - 'background-color': this.image.properties.avgColor && this.image.properties.avgColor.length == 3 ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent', + 'background-color': this.image.properties.avgColor || 'transparent', 'background-image': url }; } diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue index ce76c402f..256ea760b 100644 --- a/src/client/app/common/views/components/messaging-room.message.vue +++ b/src/client/app/common/views/components/messaging-room.message.vue @@ -11,7 +11,7 @@
+ :style="{ backgroundColor: message.file.properties.avgColor || 'transparent' }"/>

{{ message.file.name }}
diff --git a/src/client/app/common/views/components/settings/profile.vue b/src/client/app/common/views/components/settings/profile.vue index acfc1875a..fd08f8581 100644 --- a/src/client/app/common/views/components/settings/profile.vue +++ b/src/client/app/common/views/components/settings/profile.vue @@ -165,7 +165,7 @@ export default Vue.extend({ bannerStyle(): any { if (this.$store.state.i.bannerUrl == null) return {}; return { - backgroundColor: this.$store.state.i.bannerColor ? this.$store.state.i.bannerColor : null, + backgroundColor: this.$store.state.i.bannerColor, backgroundImage: `url(${ this.$store.state.i.bannerUrl })` }; }, diff --git a/src/client/app/common/views/deck/deck.user-column.vue b/src/client/app/common/views/deck/deck.user-column.vue index 9e9f494b1..e18a11114 100644 --- a/src/client/app/common/views/deck/deck.user-column.vue +++ b/src/client/app/common/views/deck/deck.user-column.vue @@ -88,7 +88,7 @@ export default Vue.extend({ if (this.user == null) return {}; if (this.user.bannerUrl == null) return {}; return { - backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null, + backgroundColor: this.user.bannerColor, backgroundImage: `url(${ this.user.bannerUrl })` }; }, diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue index f8d12a2dc..f6a11a7b4 100644 --- a/src/client/app/common/views/pages/follow.vue +++ b/src/client/app/common/views/pages/follow.vue @@ -57,7 +57,7 @@ export default Vue.extend({ bannerStyle(): any { if (this.user.bannerUrl == null) return {}; return { - backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null, + backgroundColor: this.user.bannerColor, backgroundImage: `url(${ this.user.bannerUrl })` }; } diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue index 5b9ff81c0..46aae9ad2 100644 --- a/src/client/app/desktop/views/components/drive.file.vue +++ b/src/client/app/desktop/views/components/drive.file.vue @@ -139,10 +139,10 @@ export default Vue.extend({ }, onThumbnailLoaded() { - if (this.file.properties.avgColor && this.file.properties.avgColor.length == 3) { + if (this.file.properties.avgColor) { anime({ targets: this.$refs.thumbnail, - backgroundColor: `rgba(${this.file.properties.avgColor.join(',')}, 0)`, + backgroundColor: this.file.properties.avgColor.replace('255)', '0)'), duration: 100, easing: 'linear' }); diff --git a/src/client/app/desktop/views/home/user/user.header.vue b/src/client/app/desktop/views/home/user/user.header.vue index 61c3839c1..e21757ccf 100644 --- a/src/client/app/desktop/views/home/user/user.header.vue +++ b/src/client/app/desktop/views/home/user/user.header.vue @@ -65,7 +65,7 @@ export default Vue.extend({ style(): any { if (this.user.bannerUrl == null) return {}; return { - backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null, + backgroundColor: this.user.bannerColor, backgroundImage: `url(${ this.user.bannerUrl })` }; }, diff --git a/src/client/app/mobile/views/components/drive.file-detail.vue b/src/client/app/mobile/views/components/drive.file-detail.vue index 8f724b0f8..98124354e 100644 --- a/src/client/app/mobile/views/components/drive.file-detail.vue +++ b/src/client/app/mobile/views/components/drive.file-detail.vue @@ -85,8 +85,8 @@ export default Vue.extend({ }, style(): any { - return this.file.properties.avgColor && this.file.properties.avgColor.length == 3 ? { - 'background-color': `rgb(${ this.file.properties.avgColor.join(',') })` + return this.file.properties.avgColor ? { + 'background-color': this.file.properties.avgColor } : {}; }, diff --git a/src/client/app/mobile/views/pages/user/index.vue b/src/client/app/mobile/views/pages/user/index.vue index 72f2998db..1376f3965 100644 --- a/src/client/app/mobile/views/pages/user/index.vue +++ b/src/client/app/mobile/views/pages/user/index.vue @@ -114,7 +114,7 @@ export default Vue.extend({ style(): any { if (this.user.bannerUrl == null) return {}; return { - backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null, + backgroundColor: this.user.bannerColor, backgroundImage: `url(${ this.user.bannerUrl })` }; } diff --git a/src/services/drive/add-file.ts b/src/services/drive/add-file.ts index 45760e50d..16f3340ec 100644 --- a/src/services/drive/add-file.ts +++ b/src/services/drive/add-file.ts @@ -356,7 +356,7 @@ export default async function( logger.debug(`average color is calculated: ${r}, ${g}, ${b}`); - const value = info.isOpaque ? `rgb(${r},${g},${b})` : `rgba(${r},${g},${b},255)`; + const value = info.isOpaque ? `rgba(${r},${g},${b},0)` : `rgba(${r},${g},${b},255)`; properties['avgColor'] = value; } catch (e) { }