Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

overhaul how style-switcher makes state, removed tons of copy-paste

Browse source
This commit is contained in:
Henry Jameson 2020-01-12 17:46:07 +02:00
parent d52d181227
commit 88f83fc9fa
4 changed files with 82 additions and 168 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

208
src/components/style_switcher/style_switcher.js
View file

@ -14,7 +14,12 @@ import {
composePreset,
getThemes
} from '../../services/style_setter/style_setter.js'
import { CURRENT_VERSION } from '../../services/theme_data/theme_data.service.js'
import {
CURRENT_VERSION,
SLOT_INHERITANCE,
DEFAULT_OPACITY,
getLayers
} from '../../services/theme_data/theme_data.service.js'
import ColorInput from '../color_input/color_input.vue'
import RangeInput from '../range_input/range_input.vue'
import OpacityInput from '../opacity_input/opacity_input.vue'
@ -67,55 +72,13 @@ export default {
keepRoundness: false,
keepFonts: false,
textColorLocal: '',
accentColorLocal: undefined,
linkColorLocal: undefined,
...Object.keys(SLOT_INHERITANCE)
.map(key => [key, ''])
.reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}),
bgColorLocal: '',
bgOpacityLocal: undefined,
underlayColorLocal: '',
underlayOpacityLocal: undefined,
fgColorLocal: '',
fgTextColorLocal: undefined,
fgLinkColorLocal: undefined,
btnColorLocal: undefined,
btnTextColorLocal: undefined,
btnOpacityLocal: undefined,
inputColorLocal: undefined,
inputTextColorLocal: undefined,
inputOpacityLocal: undefined,
panelColorLocal: undefined,
panelTextColorLocal: undefined,
panelLinkColorLocal: undefined,
panelFaintColorLocal: undefined,
panelOpacityLocal: undefined,
topBarColorLocal: undefined,
topBarTextColorLocal: undefined,
topBarLinkColorLocal: undefined,
alertErrorColorLocal: undefined,
alertWarningColorLocal: undefined,
badgeOpacityLocal: undefined,
badgeNotificationColorLocal: undefined,
borderColorLocal: undefined,
borderOpacityLocal: undefined,
faintColorLocal: undefined,
faintOpacityLocal: undefined,
faintLinkColorLocal: undefined,
cRedColorLocal: '',
cBlueColorLocal: '',
cGreenColorLocal: '',
cOrangeColorLocal: '',
...Object.keys(DEFAULT_OPACITY)
.map(key => [key, undefined])
.reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}),
shadowSelected: undefined,
shadowsLocal: {},
@ -149,59 +112,14 @@ export default {
return Array.isArray(this.selected) ? 1 : 2
},
currentColors () {
return {
bg: this.bgColorLocal,
text: this.textColorLocal,
link: this.linkColorLocal,
fg: this.fgColorLocal,
fgText: this.fgTextColorLocal,
fgLink: this.fgLinkColorLocal,
accent: this.accentColorLocal,
underlay: this.underlayColorLocal,
panel: this.panelColorLocal,
panelText: this.panelTextColorLocal,
panelLink: this.panelLinkColorLocal,
panelFaint: this.panelFaintColorLocal,
input: this.inputColorLocal,
inputText: this.inputTextColorLocal,
topBar: this.topBarColorLocal,
topBarText: this.topBarTextColorLocal,
topBarLink: this.topBarLinkColorLocal,
btn: this.btnColorLocal,
btnText: this.btnTextColorLocal,
alertError: this.alertErrorColorLocal,
alertWarning: this.alertWarningColorLocal,
badgeNotification: this.badgeNotificationColorLocal,
faint: this.faintColorLocal,
faintLink: this.faintLinkColorLocal,
border: this.borderColorLocal,
cRed: this.cRedColorLocal,
cBlue: this.cBlueColorLocal,
cGreen: this.cGreenColorLocal,
cOrange: this.cOrangeColorLocal
}
return Object.keys(SLOT_INHERITANCE)
.map(key => [key, this[key + 'ColorLocal']])
.reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
},
currentOpacity () {
return {
bg: this.bgOpacityLocal,
btn: this.btnOpacityLocal,
input: this.inputOpacityLocal,
panel: this.panelOpacityLocal,
topBar: this.topBarOpacityLocal,
border: this.borderOpacityLocal,
faint: this.faintOpacityLocal,
underlay: this.underlayOpacityLocal
}
return Object.keys(DEFAULT_OPACITY)
.map(key => [key, this[key + 'OpacityLocal']])
.reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {})
},
currentRadii () {
return {
@ -237,63 +155,45 @@ export default {
laa: ratio >= 3,
laaa: ratio >= 4.5
})
const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})
// fgsfds :DDDD
const fgs = {
text: colorConvert(colors.text),
panelText: colorConvert(colors.panelText),
panelLink: colorConvert(colors.panelLink),
btnText: colorConvert(colors.btnText),
topBarText: colorConvert(colors.topBarText),
inputText: colorConvert(colors.inputText),
const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
const slotIsBaseText = key === 'text' || key === 'link'
const slotIsText = slotIsBaseText || (
typeof value === 'object' && value !== null && value.textColor
)
if (!slotIsText) return acc
const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
const background = variant || layer
const textColors = [
key,
...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
]
link: colorConvert(colors.link),
topBarLink: colorConvert(colors.topBarLink),
const layers = getLayers(
layer,
variant || layer,
colorsConverted,
opacity
)
red: colorConvert(colors.cRed),
green: colorConvert(colors.cGreen),
blue: colorConvert(colors.cBlue),
orange: colorConvert(colors.cOrange)
}
const bgs = {
bg: colorConvert(colors.bg),
underlay: colorConvert(colors.underlay),
btn: colorConvert(colors.btn),
panel: colorConvert(colors.panel),
topBar: colorConvert(colors.topBar),
input: colorConvert(colors.input),
alertError: colorConvert(colors.alertError),
alertWarning: colorConvert(colors.alertWarning),
badgeNotification: colorConvert(colors.badgeNotification)
}
const bg = [bgs.bg, opacity.bg]
const underlay = [bgs.underlay || colorConvert('#000000'), opacity.underlay]
const panel = [underlay, bg]
const ratios = {
bgText: getContrastRatioLayers(fgs.text, panel, fgs.text),
bgLink: getContrastRatioLayers(fgs.link, panel, fgs.link),
bgRed: getContrastRatioLayers(fgs.red, panel, fgs.red),
bgGreen: getContrastRatioLayers(fgs.green, panel, fgs.green),
bgBlue: getContrastRatioLayers(fgs.blue, panel, fgs.blue),
bgOrange: getContrastRatioLayers(fgs.orange, panel, fgs.orange),
// TODO what's this?
tintText: getContrastRatio(alphaBlend(bgs.bg, 0.5, fgs.panelText), fgs.text),
panelText: getContrastRatioLayers(fgs.text, [...panel, [bgs.panel, opacity.panel]], fgs.panelText),
panelLink: getContrastRatioLayers(fgs.link, [...panel, [bgs.panel, opacity.panel]], fgs.panelLink),
btnText: getContrastRatioLayers(fgs.text, [...panel, [bgs.btn, opacity.btn]], fgs.btnText),
inputText: getContrastRatioLayers(fgs.text, [...panel, [bgs.input, opacity.input]], fgs.inputText),
topBarText: getContrastRatioLayers(fgs.text, [...panel, [bgs.topBar, opacity.topBar]], fgs.topBarText),
topBarLink: getContrastRatioLayers(fgs.link, [...panel, [bgs.topBar, opacity.topBar]], fgs.topBarLink)
}
return {
...acc,
...textColors.reduce((acc, textColorKey) => {
const newKey = slotIsBaseText
? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
: textColorKey
return {
...acc,
[newKey]: getContrastRatioLayers(
colorsConverted[textColorKey],
layers,
colorsConverted[textColorKey]
)
}
}, {})
}
}, {})
return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
},

12
src/components/style_switcher/style_switcher.vue
View file

@ -209,6 +209,12 @@
:label="$t('settings.style.advanced_colors.alert_error')"
:fallback="previewTheme.colors.alertError"
/>
<ColorInput
v-model="alertErrorTextColorLocal"
name="alertErrorText"
:label="$t('settings.text')"
:fallback="previewTheme.colors.alertErrorText"
/>
<ContrastRatio :contrast="previewContrast.alertError" />
<ColorInput
v-model="alertWarningColorLocal"
@ -217,6 +223,12 @@
:fallback="previewTheme.colors.alertWarning"
/>
<ContrastRatio :contrast="previewContrast.alertWarning" />
<ColorInput
v-model="alertWarningTextColorLocal"
name="alertWarningText"
:label="$t('settings.text')"
:fallback="previewTheme.colors.alertWarningText"
/>
</div>
<div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>

15
src/services/style_setter/style_setter.js
View file

@ -1,7 +1,7 @@
import { times } from 'lodash'
import { convert } from 'chromatism'
import { rgb2hex, hex2rgb, rgba2css, getCssColor } from '../color_convert/color_convert.js'
import { getColors } from '../theme_data/theme_data.service.js'
import { getColors, DEFAULT_OPACITY } from '../theme_data/theme_data.service.js'
// While this is not used anymore right now, I left it in if we want to do custom
// styles that aren't just colors, so user can pick from a few different distinct
@ -115,18 +115,7 @@ const getCssShadowFilter = (input) => {
}
export const generateColors = (themeData) => {
const rawOpacity = Object.assign({
panel: 1,
btn: 1,
border: 1,
bg: 1,
badge: 1,
text: 1,
alert: 0.5,
input: 0.5,
faint: 0.5,
underlay: 0.15
}, Object.entries(themeData.opacity || {}).reduce((acc, [k, v]) => {
const rawOpacity = Object.assign({ ...DEFAULT_OPACITY }, Object.entries(themeData.opacity || {}).reduce((acc, [k, v]) => {
if (typeof v !== 'undefined') {
acc[k] = v
}

15
src/services/theme_data/theme_data.service.js
View file

@ -23,6 +23,19 @@ export const LAYERS = {
alertPanel: 'panel'
}
export const DEFAULT_OPACITY = {
panel: 1,
btn: 1,
border: 1,
bg: 1,
badge: 1,
text: 1,
alert: 0.5,
input: 0.5,
faint: 0.5,
underlay: 0.15
}
export const SLOT_INHERITANCE = {
bg: null,
fg: null,
@ -289,7 +302,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
if (value.textColor === 'bw') {
return {
...acc,
[key]: contrastRatio(bg)
[key]: contrastRatio(bg).rgb
}
} else {
return {