From ec5d8b9833034604299496a8ae87741c2efa5b7b Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Wed, 22 Feb 2017 21:14:55 +0100 Subject: [PATCH] Set colors into config so they can be used for more dynamic styles. --- src/modules/config.js | 5 ++-- src/services/style_setter/style_setter.js | 28 +++++++++++++++-------- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/modules/config.js b/src/modules/config.js index a1276519..30155f45 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -2,7 +2,8 @@ import { set } from 'vue' import StyleSetter from '../services/style_setter/style_setter.js' const defaultState = { - name: 'Pleroma FE' + name: 'Pleroma FE', + colors: {} } const config = { @@ -24,7 +25,7 @@ const config = { break case 'theme': const fullPath = `/static/css/${value}` - StyleSetter.setStyle(fullPath) + StyleSetter.setStyle(fullPath, commit) } } } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 0a5be77d..7129852d 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -1,4 +1,6 @@ -const setStyle = (href) => { +import { times } from 'lodash' + +const setStyle = (href, commit) => { /*** What's going on here? I want to make it easy for admins to style this application. To have @@ -23,18 +25,26 @@ const setStyle = (href) => { const setDynamic = () => { const baseEl = document.createElement('div') body.appendChild(baseEl) - baseEl.setAttribute('class', 'base05') - const base05Color = window.getComputedStyle(baseEl).getPropertyValue('color') - baseEl.setAttribute('class', 'base08') - const base08Color = window.getComputedStyle(baseEl).getPropertyValue('color') + + let colors = {} + times(16, (n) => { + const name = `base0${n.toString(16).toUpperCase()}` + baseEl.setAttribute('class', name) + const color = window.getComputedStyle(baseEl).getPropertyValue('color') + colors[name] = color + }) + + commit('setOption', { name: 'colors', value: colors }) + + body.removeChild(baseEl) + const styleEl = document.createElement('style') head.appendChild(styleEl) const styleSheet = styleEl.sheet - body.removeChild(baseEl) - styleSheet.insertRule(`a { color: ${base08Color}`, 'index-max') - styleSheet.insertRule(`body { color: ${base05Color}`, 'index-max') - styleSheet.insertRule(`.base05-border { border-color: ${base05Color}`, 'index-max') + styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max') + styleSheet.insertRule(`body { color: ${colors['base05']}`, 'index-max') + styleSheet.insertRule(`.base05-border { border-color: ${colors['base05']}`, 'index-max') body.style.display = 'initial' } cssEl.addEventListener('load', setDynamic)