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 { thumbnail(file: any): any {
return { 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})` 'background-image': `url(${file.thumbnailUrl})`
}; };
}, },

View file

@ -55,12 +55,7 @@ export default Vue.extend({
}, },
icon(): any { icon(): any {
return { return {
backgroundColor: this.user.avatarColor ? this.lightmode backgroundColor: this.user.avatarColor,
? this.user.avatarColor
: this.user.avatarColor.startsWith('rgb(')
? this.user.avatarColor
: null
: null,
backgroundImage: this.lightmode ? null : `url(${this.url})`, backgroundImage: this.lightmode ? null : `url(${this.url})`,
borderRadius: this.$store.state.settings.circleIcons ? '100%' : null borderRadius: this.$store.state.settings.circleIcons ? '100%' : null
}; };

View file

@ -111,9 +111,7 @@ export default Vue.extend({
: false; : false;
}, },
background(): string { background(): string {
return this.file.properties.avgColor && this.file.properties.avgColor.length == 3 return this.file.properties.avgColor || 'transparent';
? `rgb(${this.file.properties.avgColor.join(',')})`
: 'transparent';
} }
}, },
mounted() { mounted() {
@ -122,10 +120,10 @@ export default Vue.extend({
}, },
methods: { methods: {
onThumbnailLoaded() { onThumbnailLoaded() {
if (this.file.properties.avgColor && this.file.properties.avgColor.length == 3) { if (this.file.properties.avgColor) {
anime({ anime({
targets: this.$refs.thumbnail, targets: this.$refs.thumbnail,
backgroundColor: `rgba(${this.file.properties.avgColor.join(',')}, 0)`, backgroundColor: this.file.properties.avgColor.replace('255)', '0)'),
duration: 100, duration: 100,
easing: 'linear' easing: 'linear'
}); });

View file

@ -52,7 +52,7 @@ export default Vue.extend({
} }
return { 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 'background-image': url
}; };
} }

View file

@ -11,7 +11,7 @@
<div class="file" v-if="message.file"> <div class="file" v-if="message.file">
<a :href="message.file.url" target="_blank" :title="message.file.name"> <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" <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> <p v-else>{{ message.file.name }}</p>
</a> </a>
</div> </div>

View file

@ -165,7 +165,7 @@ export default Vue.extend({
bannerStyle(): any { bannerStyle(): any {
if (this.$store.state.i.bannerUrl == null) return {}; if (this.$store.state.i.bannerUrl == null) return {};
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 })` 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 == null) return {};
if (this.user.bannerUrl == null) return {}; if (this.user.bannerUrl == null) return {};
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 })` backgroundImage: `url(${ this.user.bannerUrl })`
}; };
}, },

View file

@ -57,7 +57,7 @@ export default Vue.extend({
bannerStyle(): any { bannerStyle(): any {
if (this.user.bannerUrl == null) return {}; if (this.user.bannerUrl == null) return {};
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 })` backgroundImage: `url(${ this.user.bannerUrl })`
}; };
} }

View file

@ -139,10 +139,10 @@ export default Vue.extend({
}, },
onThumbnailLoaded() { onThumbnailLoaded() {
if (this.file.properties.avgColor && this.file.properties.avgColor.length == 3) { if (this.file.properties.avgColor) {
anime({ anime({
targets: this.$refs.thumbnail, targets: this.$refs.thumbnail,
backgroundColor: `rgba(${this.file.properties.avgColor.join(',')}, 0)`, backgroundColor: this.file.properties.avgColor.replace('255)', '0)'),
duration: 100, duration: 100,
easing: 'linear' easing: 'linear'
}); });

View file

@ -65,7 +65,7 @@ export default Vue.extend({
style(): any { style(): any {
if (this.user.bannerUrl == null) return {}; if (this.user.bannerUrl == null) return {};
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 })` backgroundImage: `url(${ this.user.bannerUrl })`
}; };
}, },

View file

@ -85,8 +85,8 @@ export default Vue.extend({
}, },
style(): any { style(): any {
return this.file.properties.avgColor && this.file.properties.avgColor.length == 3 ? { return this.file.properties.avgColor ? {
'background-color': `rgb(${ this.file.properties.avgColor.join(',') })` 'background-color': this.file.properties.avgColor
} : {}; } : {};
}, },

View file

@ -114,7 +114,7 @@ export default Vue.extend({
style(): any { style(): any {
if (this.user.bannerUrl == null) return {}; if (this.user.bannerUrl == null) return {};
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 })` backgroundImage: `url(${ this.user.bannerUrl })`
}; };
} }

View file

@ -356,7 +356,7 @@ export default async function(
logger.debug(`average color is calculated: ${r}, ${g}, ${b}`); 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; properties['avgColor'] = value;
} catch (e) { } } catch (e) { }