From ec5d8b9833034604299496a8ae87741c2efa5b7b Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
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)