moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed get(Layer|Opacity)Slot not working properly which broke Mojave theme

This commit is contained in:
Henry Jameson 2020-01-23 00:35:56 +02:00
parent 8de7eabd8f
commit 7354b6f706
3 changed files with 30 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/style_switcher/style_switcher.js
View File

@ -246,7 +246,7 @@ export default {
if (!slotIsText) return acc
const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
const background = variant || layer
const opacitySlot = getOpacitySlot(SLOT_INHERITANCE[background])
const opacitySlot = getOpacitySlot(background)
const textColors = [
key,
...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])

11
src/services/style_setter/style_setter.js
View File

@ -392,16 +392,6 @@ export const colors2to3 = (colors) => {
...btnStates.reduce((stateAcc, state) => ({ ...stateAcc, ['btn' + state]: color }), {})
}
case 'btnText':
console.log(
btnPositions
.map(position => btnStates.map(state => state + position))
.flat()
.reduce(
(statePositionAcc, statePosition) =>
({ ...statePositionAcc, ['btn' + statePosition + 'Text']: color })
, {}
)
)
return {
...acc,
...btnPositions
@ -414,7 +404,6 @@ export const colors2to3 = (colors) => {
)
}
default:
console.log('aaa', slotName, color, acc)
return { ...acc, [slotName]: color }
}
}, {})

60
src/services/theme_data/theme_data.service.js
View File

@ -591,38 +591,41 @@ export const topoSort = (
})
}
const expandSlotValue = (value) => {
if (typeof value === 'object') return value
return {
depends: value.startsWith('--') ? [value.substring(2)] : [],
default: value.startsWith('#') ? value : undefined
}
}
/**
* retrieves opacity slot for given slot. This goes up the depenency graph
* to find which parent has opacity slot defined for it.
* TODO refactor this
*/
export const getOpacitySlot = (
v,
k,
inheritance = SLOT_INHERITANCE,
getDeps = getDependencies
) => {
const value = typeof v === 'string'
? {
depends: v.startsWith('--') ? [v.substring(2)] : []
}
: v
const value = expandSlotValue(inheritance[k])
if (value.opacity === null) return
if (value.opacity) return v.opacity
const findInheritedOpacity = (val) => {
const depSlot = val.depends[0]
if (value.opacity) return value.opacity
const findInheritedOpacity = (key, visited = [k]) => {
const depSlot = getDeps(key, inheritance)[0]
if (depSlot === undefined) return
const dependency = getDeps(depSlot, inheritance)[0]
const dependency = inheritance[depSlot]
if (dependency === undefined) return
if (dependency.opacity || dependency === null) {
return dependency.opacity
} else if (dependency.depends) {
return findInheritedOpacity(dependency)
} else if (dependency.depends && visited.includes(depSlot)) {
return findInheritedOpacity(depSlot, [...visited, depSlot])
} else {
return null
}
}
if (value.depends) {
return findInheritedOpacity(value)
return findInheritedOpacity(k)
}
}
@ -635,33 +638,28 @@ export const getOpacitySlot = (
*/
export const getLayerSlot = (
k,
v,
inheritance = SLOT_INHERITANCE,
getDeps = getDependencies
) => {
const value = typeof v === 'string'
? {
depends: v.startsWith('--') ? [v.substring(2)] : []
}
: v
const value = expandSlotValue(inheritance[k])
if (LAYERS[k]) return k
if (value.layer === null) return
if (value.layer) return v.layer
const findInheritedLayer = (val) => {
const depSlot = val.depends[0]
if (value.layer) return value.layer
const findInheritedLayer = (key, visited = [k]) => {
const depSlot = getDeps(key, inheritance)[0]
if (depSlot === undefined) return
const dependency = getDeps(depSlot, inheritance)[0]
const dependency = inheritance[depSlot]
if (dependency === undefined) return
if (dependency.layer || dependency === null) {
return dependency.layer
} else if (dependency.depends) {
return findInheritedLayer(dependency)
return findInheritedLayer(dependency, [...visited, depSlot])
} else {
return null
}
}
if (value.depends) {
return findInheritedLayer(value)
return findInheritedLayer(k)
}
}
@ -679,7 +677,7 @@ export const SLOT_ORDERED = topoSort(
* with them
*/
export const SLOTS_OPACITIES_DICT = Object.entries(SLOT_INHERITANCE).reduce((acc, [k, v]) => {
const opacity = getOpacitySlot(v, SLOT_INHERITANCE, getDependencies)
const opacity = getOpacitySlot(k, SLOT_INHERITANCE, getDependencies)
if (opacity) {
return { ...acc, [k]: opacity }
} else {
@ -692,7 +690,7 @@ export const SLOTS_OPACITIES_DICT = Object.entries(SLOT_INHERITANCE).reduce((acc
* color slots.
*/
export const OPACITIES = Object.entries(SLOT_INHERITANCE).reduce((acc, [k, v]) => {
const opacity = getOpacitySlot(v, SLOT_INHERITANCE, getDependencies)
const opacity = getOpacitySlot(k, SLOT_INHERITANCE, getDependencies)
if (opacity) {
return {
...acc,
@ -738,9 +736,9 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
if (targetColor === 'transparent') {
// We take only layers below current one
const layers = getLayers(
getLayerSlot(key, value),
getLayerSlot(key),
key,
value.opacity || key,
getOpacitySlot(key) || key,
colors,
opacity
).slice(0, -1)
@ -781,7 +779,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
getLayers(
value.layer,
value.variant || value.layer,
getOpacitySlot(SLOT_INHERITANCE[value.variant || value.layer]),
getOpacitySlot(value.variant || value.layer),
colors,
opacity
)
@ -813,7 +811,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
if (!outputColor) {
throw new Error('Couldn\'t generate color for ' + key)
}
const opacitySlot = SLOTS_OPACITIES_DICT[key]
const opacitySlot = getOpacitySlot(key)
if (opacitySlot && outputColor.a === undefined) {
outputColor.a = sourceOpacity[opacitySlot] || OPACITIES[opacitySlot].defaultValue || 1
}