multiple fixes to make style switcher not die. Made shadows work, incuding compatibility

This commit is contained in:
Henry Jameson 2020-01-20 01:31:54 +02:00
parent 6a3714fcc6
commit 6e1c538e41
5 changed files with 94 additions and 59 deletions

View file

@ -11,7 +11,8 @@ import {
generateRadii,
generateFonts,
composePreset,
getThemes
getThemes,
shadows2to3
} from '../../services/style_setter/style_setter.js'
import {
CURRENT_VERSION,
@ -159,6 +160,7 @@ export default {
},
// This needs optimization maybe
previewContrast () {
try {
if (!this.previewTheme.colors.bg) return {}
const colors = this.previewTheme.colors
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 }, {})
} catch (e) {
console.warn('Failure computing contrasts', e)
}
},
previewRules () {
if (!this.preview.rules) return ''
@ -466,7 +471,11 @@ export default {
if (!this.keepShadows) {
this.clearShadows()
if (version === 2) {
this.shadowsLocal = shadows2to3(shadows)
} else {
this.shadowsLocal = shadows
}
this.shadowSelected = this.shadowsAvailable[0]
}

View file

@ -291,8 +291,8 @@ export const generateShadows = (input, colors, mod) => {
const shadows = Object.entries({
...DEFAULT_SHADOWS,
...(input.shadows || {})
}).reduce((shadowsAcc, [slotName, shadowdefs]) => {
const newShadow = shadowdefs.reduce((shadowAcc, def) => [
}).reduce((shadowsAcc, [slotName, shadowDefs]) => {
const newShadow = shadowDefs.reduce((shadowAcc, def) => [
...shadowAcc,
{
...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) => {
return getThemes()
.then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])

View file

@ -663,7 +663,14 @@ export const SLOT_ORDERED = topoSort(
Object.entries(SLOT_INHERITANCE)
.sort(([aK, aV], [bK, bV]) => ((aV && aV.priority) || 0) - ((bV && bV.priority) || 0))
.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

View file

@ -53,7 +53,7 @@
"blur": 0,
"spread": "1",
"color": "--accent",
"alpha": "0.3",
"alpha": "1",
"inset": true
},
{

View file

@ -53,7 +53,7 @@
"blur": 0,
"spread": "1",
"color": "--accent",
"alpha": "0.3",
"alpha": "1",
"inset": true
},
{