commit: d19c64314ff08391a2649681e6b64d052e600059
parent: 0abc3f9b85f8a671a07d9a43b16d92c4b5568fab
Author: Henry Jameson <spam@hjkos.com>
Date: Thu, 20 Feb 2020 18:13:40 +0200
stop using customTheme in user card, instead use color slots. fix for opacity
inheritance polluting inheritors
Diffstat:
4 files changed, 24 insertions(+), 17 deletions(-)
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
@@ -4,7 +4,6 @@ import ProgressButton from '../progress_button/progress_button.vue'
import FollowButton from '../follow_button/follow_button.vue'
import ModerationTools from '../moderation_tools/moderation_tools.vue'
import AccountActions from '../account_actions/account_actions.vue'
-import { hex2rgb } from '../../services/color_convert/color_convert.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mapGetters } from 'vuex'
@@ -30,21 +29,11 @@ export default {
}]
},
style () {
- const color = this.$store.getters.mergedConfig.customTheme.colors
- ? this.$store.getters.mergedConfig.customTheme.colors.bg // v2
- : this.$store.getters.mergedConfig.colors.bg // v1
-
- if (color) {
- const rgb = (typeof color === 'string') ? hex2rgb(color) : color
- const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`
-
- return {
- backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
- backgroundImage: [
- `linear-gradient(to bottom, ${tintColor}, ${tintColor})`,
- `url(${this.user.cover_photo})`
- ].join(', ')
- }
+ return {
+ backgroundImage: [
+ `linear-gradient(to bottom, var(--profileTint), var(--profileTint))`,
+ `url(${this.user.cover_photo})`
+ ].join(', ')
}
},
isOtherUser () {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
@@ -286,6 +286,7 @@
mask-size: 100% 60%;
border-top-left-radius: calc(var(--panelRadius) - 1px);
border-top-right-radius: calc(var(--panelRadius) - 1px);
+ background-color: var(--profileBg);
&.hide-bio {
mask-size: 100% 40px;
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
@@ -8,6 +8,7 @@ export const LAYERS = {
undelay: null, // root
topBar: null, // no transparency support
badge: null, // no transparency support
+ profileTint: null, // doesn't matter
fg: null,
bg: 'underlay',
highlight: 'bg',
@@ -29,6 +30,7 @@ export const LAYERS = {
* this allows redefining it to something else
*/
export const DEFAULT_OPACITY = {
+ profileTint: 0.5,
alert: 0.5,
input: 0.5,
faint: 0.5,
@@ -119,6 +121,20 @@ export const SLOT_INHERITANCE = {
cGreen: '#00FF00',
cOrange: '#E3FF00',
+ profileBg: {
+ depends: ['bg'],
+ color: (mod, bg) => ({
+ r: Math.floor(bg.r * 0.53),
+ g: Math.floor(bg.g * 0.56),
+ b: Math.floor(bg.b * 0.59)
+ })
+ },
+ profileTint: {
+ depends: ['bg'],
+ layer: 'profileTint',
+ opacity: 'profileTint'
+ },
+
highlight: {
depends: ['bg'],
color: (mod, bg) => brightness(5 * mod, bg).rgb
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
@@ -351,7 +351,8 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
throw new Error('Couldn\'t generate color for ' + key)
}
const opacitySlot = getOpacitySlot(key)
- if (opacitySlot && outputColor.a === undefined) {
+ const ownOpacitySlot = value.opacity
+ if (opacitySlot && (outputColor.a === undefined || ownOpacitySlot)) {
const dependencySlot = deps[0]
if (dependencySlot && colors[dependencySlot] === 'transparent') {
outputColor.a = 0