This commit is contained in:
syuilo 2019-04-08 19:56:42 +09:00
parent 97e13d0631
commit 64c8a5847f
13 changed files with 17 additions and 24 deletions

View File

@ -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})`
};
},

View File

@ -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
};

View File

@ -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'
});

View File

@ -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
};
}

View File

@ -11,7 +11,7 @@
<div class="file" v-if="message.file">
<a :href="message.file.url" target="_blank" :title="message.file.name">
<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"
:style="{ backgroundColor: message.file.properties.avgColor && message.file.properties.avgColor.length == 3 ? `rgb(${message.file.properties.avgColor.join(',')})` : 'transparent' }"/>
:style="{ backgroundColor: message.file.properties.avgColor || 'transparent' }"/>
<p v-else>{{ message.file.name }}</p>
</a>
</div>

View File

@ -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 })`
};
},

View File

@ -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 })`
};
},

View File

@ -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 })`
};
}

View File

@ -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'
});

View File

@ -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 })`
};
},

View File

@ -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
} : {};
},

View File

@ -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 })`
};
}

View File

@ -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) { }