From d19c64314ff08391a2649681e6b64d052e600059 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 20 Feb 2020 18:13:40 +0200 Subject: [PATCH] stop using customTheme in user card, instead use color slots. fix for opacity inheritance polluting inheritors --- src/components/user_card/user_card.js | 21 +++++-------------- src/components/user_card/user_card.vue | 1 + src/services/theme_data/pleromafe.js | 16 ++++++++++++++ src/services/theme_data/theme_data.service.js | 3 ++- 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 index 2f6499105d..1cdbd3fa72 100644 --- 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 index 3988ff1c4f..4ee040e8be 100644 --- 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 index 33a2ed5747..0c1fe54334 100644 --- 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 index 757687954b..e6ff82e61a 100644 --- 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