multiple fixes to make style switcher not die. Made shadows work, incuding compatibility
This commit is contained in:
parent
6a3714fcc6
commit
6e1c538e41
5 changed files with 94 additions and 59 deletions
|
@ -11,7 +11,8 @@ import {
|
||||||
generateRadii,
|
generateRadii,
|
||||||
generateFonts,
|
generateFonts,
|
||||||
composePreset,
|
composePreset,
|
||||||
getThemes
|
getThemes,
|
||||||
|
shadows2to3
|
||||||
} from '../../services/style_setter/style_setter.js'
|
} from '../../services/style_setter/style_setter.js'
|
||||||
import {
|
import {
|
||||||
CURRENT_VERSION,
|
CURRENT_VERSION,
|
||||||
|
@ -159,6 +160,7 @@ export default {
|
||||||
},
|
},
|
||||||
// This needs optimization maybe
|
// This needs optimization maybe
|
||||||
previewContrast () {
|
previewContrast () {
|
||||||
|
try {
|
||||||
if (!this.previewTheme.colors.bg) return {}
|
if (!this.previewTheme.colors.bg) return {}
|
||||||
const colors = this.previewTheme.colors
|
const colors = this.previewTheme.colors
|
||||||
const opacity = this.previewTheme.opacity
|
const opacity = this.previewTheme.opacity
|
||||||
|
@ -215,6 +217,9 @@ export default {
|
||||||
}, {})
|
}, {})
|
||||||
|
|
||||||
return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
|
return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('Failure computing contrasts', e)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
previewRules () {
|
previewRules () {
|
||||||
if (!this.preview.rules) return ''
|
if (!this.preview.rules) return ''
|
||||||
|
@ -466,7 +471,11 @@ export default {
|
||||||
|
|
||||||
if (!this.keepShadows) {
|
if (!this.keepShadows) {
|
||||||
this.clearShadows()
|
this.clearShadows()
|
||||||
|
if (version === 2) {
|
||||||
|
this.shadowsLocal = shadows2to3(shadows)
|
||||||
|
} else {
|
||||||
this.shadowsLocal = shadows
|
this.shadowsLocal = shadows
|
||||||
|
}
|
||||||
this.shadowSelected = this.shadowsAvailable[0]
|
this.shadowSelected = this.shadowsAvailable[0]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -291,8 +291,8 @@ export const generateShadows = (input, colors, mod) => {
|
||||||
const shadows = Object.entries({
|
const shadows = Object.entries({
|
||||||
...DEFAULT_SHADOWS,
|
...DEFAULT_SHADOWS,
|
||||||
...(input.shadows || {})
|
...(input.shadows || {})
|
||||||
}).reduce((shadowsAcc, [slotName, shadowdefs]) => {
|
}).reduce((shadowsAcc, [slotName, shadowDefs]) => {
|
||||||
const newShadow = shadowdefs.reduce((shadowAcc, def) => [
|
const newShadow = shadowDefs.reduce((shadowAcc, def) => [
|
||||||
...shadowAcc,
|
...shadowAcc,
|
||||||
{
|
{
|
||||||
...def,
|
...def,
|
||||||
|
@ -380,6 +380,25 @@ export const getThemes = () => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This handles compatibility issues when importing v2 theme's shadows to current format
|
||||||
|
*
|
||||||
|
* Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables
|
||||||
|
*/
|
||||||
|
export const shadows2to3 = (shadows) => {
|
||||||
|
return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
|
||||||
|
const isDynamic = ({ color }) => console.log(color) || color.startsWith('--')
|
||||||
|
const newShadow = shadowDefs.reduce((shadowAcc, def) => [
|
||||||
|
...shadowAcc,
|
||||||
|
{
|
||||||
|
...def,
|
||||||
|
alpha: isDynamic(def) ? 1 : def.alpha
|
||||||
|
}
|
||||||
|
], [])
|
||||||
|
return { ...shadowsAcc, [slotName]: newShadow }
|
||||||
|
}, {})
|
||||||
|
}
|
||||||
|
|
||||||
export const setPreset = (val, commit) => {
|
export const setPreset = (val, commit) => {
|
||||||
return getThemes()
|
return getThemes()
|
||||||
.then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
|
.then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
|
||||||
|
|
|
@ -663,7 +663,14 @@ export const SLOT_ORDERED = topoSort(
|
||||||
Object.entries(SLOT_INHERITANCE)
|
Object.entries(SLOT_INHERITANCE)
|
||||||
.sort(([aK, aV], [bK, bV]) => ((aV && aV.priority) || 0) - ((bV && bV.priority) || 0))
|
.sort(([aK, aV], [bK, bV]) => ((aV && aV.priority) || 0) - ((bV && bV.priority) || 0))
|
||||||
.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
|
.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
|
||||||
)
|
).sort((a, b) => {
|
||||||
|
const depsA = getDependencies(a, SLOT_INHERITANCE).length
|
||||||
|
const depsB = getDependencies(b, SLOT_INHERITANCE).length
|
||||||
|
|
||||||
|
if (depsA === depsB || (depsB !== 0 && depsA !== 0)) return 0
|
||||||
|
if (depsA === 0 && depsB !== 0) return -1
|
||||||
|
if (depsB === 0 && depsA !== 0) return 1
|
||||||
|
})
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Dictionary where keys are color slots and values are opacity associated
|
* Dictionary where keys are color slots and values are opacity associated
|
||||||
|
|
|
@ -53,7 +53,7 @@
|
||||||
"blur": 0,
|
"blur": 0,
|
||||||
"spread": "1",
|
"spread": "1",
|
||||||
"color": "--accent",
|
"color": "--accent",
|
||||||
"alpha": "0.3",
|
"alpha": "1",
|
||||||
"inset": true
|
"inset": true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -53,7 +53,7 @@
|
||||||
"blur": 0,
|
"blur": 0,
|
||||||
"spread": "1",
|
"spread": "1",
|
||||||
"color": "--accent",
|
"color": "--accent",
|
||||||
"alpha": "0.3",
|
"alpha": "1",
|
||||||
"inset": true
|
"inset": true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in a new issue