From 56fec664a9bb5c1539423e396c127c4a45e8f4e9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 19 Nov 2018 20:22:46 +0300 Subject: [PATCH] cleanup and optimization --- src/App.scss | 2 +- .../shadow_control/shadow_control.js | 10 +- .../shadow_control/shadow_control.vue | 1 - .../style_switcher/style_switcher.js | 220 +++++++++--------- src/modules/config.js | 6 +- src/modules/instance.js | 4 +- src/services/style_setter/style_setter.js | 144 +++++++++--- 7 files changed, 224 insertions(+), 163 deletions(-) diff --git a/src/App.scss b/src/App.scss index 19c069ed..1021b64b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -313,7 +313,7 @@ main-router { border-radius: $fallback--panelRadius; border-radius: var(--panelRadius, $fallback--panelRadius); box-shadow: 1px 1px 4px rgba(0,0,0,.6); - box-shadow: var(--panel-shadow); + box-shadow: var(--panelShadow); } .panel-body:empty::before { diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js index a6992999..54813685 100644 --- a/src/components/shadow_control/shadow_control.js +++ b/src/components/shadow_control/shadow_control.js @@ -1,16 +1,13 @@ import ColorInput from '../color_input/color_input.vue' import OpacityInput from '../opacity_input/opacity_input.vue' -import StyleSetter from '../../services/style_setter/style_setter.js' +import { getCssShadow } from '../../services/style_setter/style_setter.js' import { hex2rgb } from '../../services/color_convert/color_convert.js' -import { set } from 'vue' export default { props: [ 'value', 'fallback' ], data () { - console.log('sdsa') - console.log(this.value, this.fallback) return { selectedId: 0, cValue: this.value || this.fallback @@ -38,9 +35,6 @@ export default { const movable = this.cValue.splice(this.selectedId, 1)[0] this.cValue.splice(this.selectedId + 1, 0, movable) this.selectedId += 1 - }, - update () { - this.$emit('input', this.cValue) } }, computed: { @@ -73,7 +67,7 @@ export default { }, style () { return { - boxShadow: StyleSetter.generateShadow(this.cValue) + boxShadow: getCssShadow(this.cValue) } } } diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue index 614de76a..6847278c 100644 --- a/src/components/shadow_control/shadow_control.vue +++ b/src/components/shadow_control/shadow_control.vue @@ -5,7 +5,6 @@
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index b40511df..e523cd7b 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -1,12 +1,23 @@ import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js' import { set, delete as del } from 'vue' +import { generateColors, generateShadows, generateRadii, composePreset } from '../../services/style_setter/style_setter.js' import ColorInput from '../color_input/color_input.vue' import ShadowControl from '../shadow_control/shadow_control.vue' import ContrastRatio from '../contrast_ratio/contrast_ratio.vue' import OpacityInput from '../opacity_input/opacity_input.vue' -import StyleSetter from '../../services/style_setter/style_setter.js' import TabSwitcher from '../tab_switcher/tab_switcher.jsx' +const v1OnlyNames = [ + 'bg', + 'fg', + 'text', + 'link', + 'cRed', + 'cGreen', + 'cBlue', + 'cOrange' +].map(_ => _ + 'ColorLocal') + export default { data () { return { @@ -53,14 +64,14 @@ export default { faintOpacityLocal: undefined, faintLinkColorLocal: undefined, - shadowSelected: undefined, - shadowsLocal: {}, - cRedColorLocal: '', cBlueColorLocal: '', cGreenColorLocal: '', cOrangeColorLocal: '', + shadowSelected: undefined, + shadowsLocal: {}, + btnRadiusLocal: '', inputRadiusLocal: '', panelRadiusLocal: '', @@ -86,81 +97,90 @@ export default { selectedVersion () { return Array.isArray(this.selected) ? 1 : 2 }, - currentTheme () { + currentColors () { return { - colors: { - bg: this.bgColorLocal, - text: this.textColorLocal, - link: this.linkColorLocal, - - fg: this.fgColorLocal, - fgText: this.fgTextColorLocal, - fgLink: this.fgLinkColorLocal, - - panel: this.panelColorLocal, - panelText: this.panelTextColorLocal, - 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, - badgeNotification: this.badgeNotificationColorLocal, - - faint: this.faintColorLocal, - faintLink: this.faintLinkColorLocal, - border: this.borderColorLocal, - - cRed: this.cRedColorLocal, - cBlue: this.cBlueColorLocal, - cGreen: this.cGreenColorLocal, - cOrange: this.cOrangeColorLocal - }, - opacity: { - bg: this.bgOpacityLocal, - btn: this.btnOpacityLocal, - input: this.inputOpacityLocal, - panel: this.panelOpacityLocal, - topBar: this.topBarOpacityLocal, - border: this.borderOpacityLocal, - faint: this.faintOpacityLocal - }, - radii: { - btnRadius: this.btnRadiusLocal, - inputRadius: this.inputRadiusLocal, - panelRadius: this.panelRadiusLocal, - avatarRadius: this.avatarRadiusLocal, - avatarAltRadius: this.avatarAltRadiusLocal, - tooltipRadius: this.tooltipRadiusLocal, - attachmentRadius: this.attachmentRadiusLocal - } + bg: this.bgColorLocal, + text: this.textColorLocal, + link: this.linkColorLocal, + + fg: this.fgColorLocal, + fgText: this.fgTextColorLocal, + fgLink: this.fgLinkColorLocal, + + panel: this.panelColorLocal, + panelText: this.panelTextColorLocal, + 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, + badgeNotification: this.badgeNotificationColorLocal, + + faint: this.faintColorLocal, + faintLink: this.faintLinkColorLocal, + border: this.borderColorLocal, + + cRed: this.cRedColorLocal, + cBlue: this.cBlueColorLocal, + cGreen: this.cGreenColorLocal, + cOrange: this.cOrangeColorLocal } }, - preview () { - try { - if (!this.currentTheme.colors.bg) { - return {} - } - return StyleSetter.generatePreset(this.currentTheme) - } catch (e) { - console.error('CATCH') - console.error(e) + currentOpacity () { + return { + bg: this.bgOpacityLocal, + btn: this.btnOpacityLocal, + input: this.inputOpacityLocal, + panel: this.panelOpacityLocal, + topBar: this.topBarOpacityLocal, + border: this.borderOpacityLocal, + faint: this.faintOpacityLocal + } + }, + currentRadii () { + return { + btn: this.btnRadiusLocal, + input: this.inputRadiusLocal, + panel: this.panelRadiusLocal, + avatar: this.avatarRadiusLocal, + avatarAlt: this.avatarAltRadiusLocal, + tooltip: this.tooltipRadiusLocal, + attachment: this.attachmentRadiusLocal + } + }, + previewColors () { + if (this.currentColors.bg) { + return generateColors({ + opacity: this.currentOpacity, + colors: this.currentColors + }) + } else { return {} } }, + previewRadii () { + return generateRadii(this.currentRadii) + }, + previewShadows () { + return generateShadows({ shadows: this.shadowsLocal }) + }, + preview () { + return composePreset(this.previewColors, this.previewRadii, this.previewShadows) + }, previewTheme () { - if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {}, shadows: {} } + if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {} } return this.preview.theme }, previewContrast () { - if (!this.previewTheme.colors) return {} + if (!this.previewTheme.colors.bg) return {} const colors = this.previewTheme.colors const opacity = this.previewTheme.opacity if (!colors.bg) return {} @@ -228,19 +248,19 @@ export default { return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {}) }, previewRules () { - if (!this.preview.colorRules) return '' - return [this.preview.colorRules, this.preview.radiiRules, 'color: var(--text)'].join(';') + if (!this.preview.rules) return '' + return [...Object.values(this.preview.rules), 'color: var(--text)'].join(';') }, shadowsAvailable () { return Object.keys(this.previewTheme.shadows) }, currentShadowOverriden: { get () { - return this.currentShadow + return !!this.currentShadow }, set (val) { if (val) { - set(this.shadowsLocal, this.shadowSelected, Object.assign({}, this.currentShadowFallback)) + set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _))) } else { del(this.shadowsLocal, this.shadowSelected) } @@ -270,7 +290,12 @@ export default { const stringified = JSON.stringify({ // To separate from other random JSON files and possible future theme formats _pleroma_theme_version: 2, - theme: this.currentTheme + theme: { + shadows: this.shadowsLocal, + opacity: this.currentOpacity, + colors: this.currentColors, + radii: this.currentRadii + } }, null, 2) // Pretty-print and indent with 2 spaces // Create an invisible link with a data url and simulate a click @@ -323,47 +348,22 @@ export default { this.$store.dispatch('setOption', { name: 'customTheme', value: { - ...this.currentTheme, - shadows: this.shadowsLocal + shadows: this.shadowsLocal, + opacity: this.currentOpacity, + colors: this.currentColors, + radii: this.currentRadii } }) }, + // Clears all the extra stuff when loading V1 theme clearV1 () { - this.bgOpacityLocal = undefined - this.fgOpacityLocal = undefined - - this.fgTextColorLocal = undefined - this.fgLinkColorLocal = undefined - - this.btnColorLocal = undefined - this.btnTextColorLocal = undefined - this.btnOpacityLocal = undefined - - this.inputColorLocal = undefined - this.inputTextColorLocal = undefined - this.inputOpacityLocal = undefined - - this.panelColorLocal = undefined - this.panelTextColorLocal = undefined - this.panelFaintColorLocal = undefined - this.panelOpacityLocal = undefined - - this.topBarColorLocal = undefined - this.topBarTextColorLocal = undefined - this.topBarLinkColorLocal = undefined - this.topBarOpacityLocal = undefined - - this.borderColorLocal = undefined - this.borderOpacityLocal = undefined - - this.faintColorLocal = undefined - this.faintOpacityLocal = undefined - this.faintLinkColorLocal = undefined - - this.alertErrorColorLocal = undefined - - this.badgeNotificationColorLocal = undefined + Object.keys(this.$data) + .filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal')) + .filter(_ => !v1OnlyNames.includes(_)) + .forEach(key => { + set(this.$data, key, undefined) + }) }, /** diff --git a/src/modules/config.js b/src/modules/config.js index 375d0167..96f2fd5e 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -1,5 +1,5 @@ import { set, delete as del } from 'vue' -import StyleSetter from '../services/style_setter/style_setter.js' +import { setPreset, setColors } from '../services/style_setter/style_setter.js' const browserLocale = (window.navigator.language || 'en').split('-')[0] @@ -51,10 +51,10 @@ const config = { commit('setOption', {name, value}) switch (name) { case 'theme': - StyleSetter.setPreset(value, commit) + setPreset(value, commit) break case 'customTheme': - StyleSetter.setColors(value, commit) + setColors(value, commit) } } } diff --git a/src/modules/instance.js b/src/modules/instance.js index cb724821..611212c3 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -1,5 +1,5 @@ import { set } from 'vue' -import StyleSetter from '../services/style_setter/style_setter.js' +import { setPreset } from '../services/style_setter/style_setter.js' const defaultState = { // Stuff from static/config.json and apiConfig @@ -54,7 +54,7 @@ const instance = { dispatch('setPageTitle') break case 'theme': - StyleSetter.setPreset(value, commit) + setPreset(value, commit) } } } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index aac04055..cfff51ea 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -72,7 +72,7 @@ const getTextColor = function (bg, text, preserve) { } const setColors = (input, commit) => { - const { colorRules, radiiRules, shadowRules, theme } = generatePreset(input) + const { rules, theme } = generatePreset(input) const head = document.head const body = document.body body.style.display = 'none' @@ -81,10 +81,11 @@ const setColors = (input, commit) => { head.appendChild(styleEl) const styleSheet = styleEl.sheet + console.log(rules) styleSheet.toString() - styleSheet.insertRule(`body { ${colorRules} }`, 'index-max') - styleSheet.insertRule(`body { ${radiiRules} }`, 'index-max') - styleSheet.insertRule(`body { ${shadowRules} }`, 'index-max') + styleSheet.insertRule(`body { ${rules.radii} }`, 'index-max') + styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max') + styleSheet.insertRule(`body { ${rules.shadows} }`, 'index-max') body.style.display = 'initial' // commit('setOption', { name: 'colors', value: htmlColors }) @@ -93,7 +94,8 @@ const setColors = (input, commit) => { commit('setOption', { name: 'colors', value: theme.colors }) } -const generateShadow = (input) => { +const getCssShadow = (input) => { + console.log(input) // >shad return input.map((shad) => [ shad.x, @@ -106,27 +108,8 @@ const generateShadow = (input) => { ]).join(' ')).join(', ') } -const generatePreset = (input) => { - const radii = input.radii || { - btnRadius: input.btnRadius, - inputRadius: input.inputRadius, - panelRadius: input.panelRadius, - avatarRadius: input.avatarRadius, - avatarAltRadius: input.avatarAltRadius, - tooltipRadius: input.tooltipRadius, - attachmentRadius: input.attachmentRadius - } - const shadows = { - panel: [{ - x: 1, - y: 1, - blur: 4, - spread: 0, - color: '#000000', - alpha: 0.6 - }], - ...(input.shadows || {}) - } +const generateColors = (input) => { + console.log(input.opacity) const colors = {} const opacity = Object.assign({ alert: 0.5, @@ -138,7 +121,7 @@ const generatePreset = (input) => { } return acc }, {})) - + console.log(colors, opacity) const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => { if (typeof v === 'object') { acc[k] = v @@ -205,7 +188,11 @@ const generatePreset = (input) => { colors[k + 'Link'].a = v colors['panelFaint'].a = v } - colors[k].a = v + if (colors[k]) { + colors[k].a = v + } else { + console.error('Wrong key ' + k) + } }) const htmlColors = Object.entries(colors) @@ -215,20 +202,99 @@ const generatePreset = (input) => { acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v) return acc }, { complete: {}, solid: {} }) - return { - colorRules: Object.entries(htmlColors.complete).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'), - radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'), - shadowRules: Object.entries(shadows).filter(([k, v]) => v).map(([k, v]) => `--${k}-shadow: ${generateShadow(v)}`).join(';'), + rules: { + colors: Object.entries(htmlColors.complete) + .filter(([k, v]) => v) + .map(([k, v]) => `--${k}: ${v}`) + .join(';') + }, theme: { colors: htmlColors.solid, - shadows, - opacity, + opacity + } + } +} + +const generateRadii = (input) => { + const inputRadii = input.radii || { + btn: input.btnRadius, + input: input.inputRadius, + panel: input.panelRadius, + avatar: input.avatarRadius, + avatarAlt: input.avatarAltRadius, + tooltip: input.tooltipRadius, + attachment: input.attachmentRadius + } + + const radii = { + btn: 4, + input: 4, + panel: 10, + avatar: 5, + avatarAlt: 50, + tooltip: 2, + attachment: 5, + ...inputRadii + } + + return { + rules: { + radii: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}Radius: ${v}px`).join(';') + }, + theme: { radii } } } +const generateShadows = (input) => { + const shadows = { + panel: [{ + x: 1, + y: 1, + blur: 4, + spread: 0, + color: '#000000', + alpha: 0.6 + }], + ...(input.shadows || {}) + } + console.log('benis') + + return { + rules: { + shadows: Object.entries(shadows).filter(([k, v]) => v).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';') + }, + theme: { + shadows + } + } +} + +const composePreset = (colors, radii, shadows) => { + return { + rules: { + ...shadows.rules, + ...colors.rules, + ...radii.rules + }, + theme: { + ...shadows.theme, + ...colors.theme, + ...radii.theme + } + } +} + +const generatePreset = (input) => { + const shadows = generateShadows(input) + const colors = generateColors(input) + const radii = generateRadii(input) + + return composePreset(colors, radii, shadows) +} + const setPreset = (val, commit) => { window.fetch('/static/styles.json') .then((data) => data.json()) @@ -267,13 +333,15 @@ const setPreset = (val, commit) => { }) } -const StyleSetter = { +export { setStyle, setPreset, setColors, getTextColor, + generateColors, + generateRadii, + generateShadows, generatePreset, - generateShadow + composePreset, + getCssShadow } - -export default StyleSetter