more opacity handling
This commit is contained in:
parent
f16ec75c70
commit
e070ec4b66
@ -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
|
||||||
)
|
)
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
return {
|
if (opacitySlot) {
|
||||||
colors: { ...colors, [key]: outputColor },
|
return {
|
||||||
opacity: { ...opacity, [opacitySlot]: outputColor.a }
|
colors: { ...colors, [key]: outputColor },
|
||||||
|
opacity: { ...opacity, [opacitySlot]: outputColor.a }
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
colors: { ...colors, [key]: outputColor },
|
||||||
|
opacity
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, { colors: {}, opacity: {} })
|
}, { colors: {}, opacity: {} })
|
||||||
|
Loading…
Reference in New Issue
Block a user