Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

more opacity handling

Browse source
This commit is contained in:
Henry Jameson 2020-01-16 21:34:33 +02:00
parent f16ec75c70
commit e070ec4b66
2 changed files with 18 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/style_switcher/style_switcher.js
View file

@ -16,7 +16,8 @@ import {
CURRENT_VERSION, CURRENT_VERSION,
SLOT_INHERITANCE, SLOT_INHERITANCE,
OPACITIES, OPACITIES,
getLayers getLayers,
getOpacitySlot
} from '../../services/theme_data/theme_data.service.js' } from '../../services/theme_data/theme_data.service.js'
import ColorInput from '../color_input/color_input.vue' import ColorInput from '../color_input/color_input.vue'
import RangeInput from '../range_input/range_input.vue' import RangeInput from '../range_input/range_input.vue'
@ -162,6 +163,7 @@ export default {
) )
if (!slotIsText) return acc if (!slotIsText) return acc
const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
const opacitySlot = getOpacitySlot(SLOT_INHERITANCE[variant || layer])
const background = variant || layer const background = variant || layer
const textColors = [ const textColors = [
key, key,
@ -171,6 +173,7 @@ export default {
const layers = getLayers( const layers = getLayers(
layer, layer,
variant || layer, variant || layer,
opacitySlot,
colorsConverted, colorsConverted,
opacity opacity
) )

15
src/services/theme_data/theme_data.service.js
View file

@ -412,14 +412,13 @@ export const getLayersArray = (layer, data = LAYERS) => {
return array return array
} }
export const getLayers = (layer, variant = layer, colors, opacity) => { export const getLayers = (layer, variant = layer, opacitySlot, colors, opacity) => {
return getLayersArray(layer).map((currentLayer) => ([ return getLayersArray(layer).map((currentLayer) => ([
currentLayer === layer currentLayer === layer
? colors[variant] ? colors[variant]
: colors[currentLayer], : colors[currentLayer],
// TODO: Remove this hack when opacities/layers system is improved currentLayer === layer
currentLayer.startsWith('btn') ? opacity[opacitySlot] || 1
? opacity.btn
: opacity[currentLayer] : opacity[currentLayer]
])) ]))
} }
@ -587,6 +586,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
getLayers( getLayers(
value.layer, value.layer,
value.variant || value.layer, value.variant || value.layer,
getOpacitySlot(SLOT_INHERITANCE[value.variant || value.layer]),
colors, colors,
opacity opacity
) )
@ -622,8 +622,15 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
if (opacitySlot && outputColor.a === undefined) { if (opacitySlot && outputColor.a === undefined) {
outputColor.a = sourceOpacity[opacitySlot] || OPACITIES[opacitySlot].defaultValue || 1 outputColor.a = sourceOpacity[opacitySlot] || OPACITIES[opacitySlot].defaultValue || 1
} }
if (opacitySlot) {
return { return {
colors: { ...colors, [key]: outputColor }, colors: { ...colors, [key]: outputColor },
opacity: { ...opacity, [opacitySlot]: outputColor.a } opacity: { ...opacity, [opacitySlot]: outputColor.a }
} }
} else {
return {
colors: { ...colors, [key]: outputColor },
opacity
}
}
}, { colors: {}, opacity: {} }) }, { colors: {}, opacity: {} })