pleroma-fe

commit: ec5d8b9833034604299496a8ae87741c2efa5b7b
parent: 935c0e09c650bca5f92d05335d158ef3c148901b
Author: Roger Braun <roger@rogerbraun.net>
Date:   Wed, 22 Feb 2017 21:14:55 +0100

Set colors into config so they can be used for more dynamic styles.

Diffstat:
M
src/modules/config.js
5
+++--
M
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
@@ -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
@@ -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)