more opacity handling

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

View file

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

View file

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