mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-12-24 19:33:35 +02:00
Fix
This commit is contained in:
parent
3a26acbdb2
commit
fab0cc51b3
13 changed files with 17 additions and 24 deletions
|
@ -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})`
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
|
@ -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
|
||||||
};
|
};
|
||||||
|
|
|
@ -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'
|
||||||
});
|
});
|
||||||
|
|
|
@ -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
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 })`
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
|
@ -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 })`
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
|
@ -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 })`
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -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'
|
||||||
});
|
});
|
||||||
|
|
|
@ -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 })`
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
|
@ -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
|
||||||
} : {};
|
} : {};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -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 })`
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -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) { }
|
||||||
|
|
Loading…
Reference in a new issue