stop using customTheme in user card, instead use color slots. fix for opacity

inheritance polluting inheritors
This commit is contained in:
Henry Jameson 2020-02-20 18:13:40 +02:00
parent 0abc3f9b85
commit d19c64314f
4 changed files with 24 additions and 17 deletions

View file

@ -4,7 +4,6 @@ import ProgressButton from '../progress_button/progress_button.vue'
import FollowButton from '../follow_button/follow_button.vue' import FollowButton from '../follow_button/follow_button.vue'
import ModerationTools from '../moderation_tools/moderation_tools.vue' import ModerationTools from '../moderation_tools/moderation_tools.vue'
import AccountActions from '../account_actions/account_actions.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 generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
@ -30,22 +29,12 @@ export default {
}] }]
}, },
style () { 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 { return {
backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
backgroundImage: [ backgroundImage: [
`linear-gradient(to bottom, ${tintColor}, ${tintColor})`, `linear-gradient(to bottom, var(--profileTint), var(--profileTint))`,
`url(${this.user.cover_photo})` `url(${this.user.cover_photo})`
].join(', ') ].join(', ')
} }
}
}, },
isOtherUser () { isOtherUser () {
return this.user.id !== this.$store.state.users.currentUser.id return this.user.id !== this.$store.state.users.currentUser.id

View file

@ -286,6 +286,7 @@
mask-size: 100% 60%; mask-size: 100% 60%;
border-top-left-radius: calc(var(--panelRadius) - 1px); border-top-left-radius: calc(var(--panelRadius) - 1px);
border-top-right-radius: calc(var(--panelRadius) - 1px); border-top-right-radius: calc(var(--panelRadius) - 1px);
background-color: var(--profileBg);
&.hide-bio { &.hide-bio {
mask-size: 100% 40px; mask-size: 100% 40px;

View file

@ -8,6 +8,7 @@ export const LAYERS = {
undelay: null, // root undelay: null, // root
topBar: null, // no transparency support topBar: null, // no transparency support
badge: null, // no transparency support badge: null, // no transparency support
profileTint: null, // doesn't matter
fg: null, fg: null,
bg: 'underlay', bg: 'underlay',
highlight: 'bg', highlight: 'bg',
@ -29,6 +30,7 @@ export const LAYERS = {
* this allows redefining it to something else * this allows redefining it to something else
*/ */
export const DEFAULT_OPACITY = { export const DEFAULT_OPACITY = {
profileTint: 0.5,
alert: 0.5, alert: 0.5,
input: 0.5, input: 0.5,
faint: 0.5, faint: 0.5,
@ -119,6 +121,20 @@ export const SLOT_INHERITANCE = {
cGreen: '#00FF00', cGreen: '#00FF00',
cOrange: '#E3FF00', 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: { highlight: {
depends: ['bg'], depends: ['bg'],
color: (mod, bg) => brightness(5 * mod, bg).rgb color: (mod, bg) => brightness(5 * mod, bg).rgb

View file

@ -351,7 +351,8 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
throw new Error('Couldn\'t generate color for ' + key) throw new Error('Couldn\'t generate color for ' + key)
} }
const opacitySlot = getOpacitySlot(key) const opacitySlot = getOpacitySlot(key)
if (opacitySlot && outputColor.a === undefined) { const ownOpacitySlot = value.opacity
if (opacitySlot && (outputColor.a === undefined || ownOpacitySlot)) {
const dependencySlot = deps[0] const dependencySlot = deps[0]
if (dependencySlot && colors[dependencySlot] === 'transparent') { if (dependencySlot && colors[dependencySlot] === 'transparent') {
outputColor.a = 0 outputColor.a = 0