cleanup and optimization

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 {

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)
       }
     }
   }

src/components/shadow_control/shadow_control.vue

@@ -5,7 +5,6 @@
       <input
         v-model="selected.y"
         :disabled="!present"
-        @input="update"
         class="input-number"
         type="number">
       <div class="wrap">

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,
-          bg: this.bgColorLocal,
+        text: this.textColorLocal,
-          text: this.textColorLocal,
+        link: this.linkColorLocal,
-          link: this.linkColorLocal,
 
-          fg: this.fgColorLocal,
+        fg: this.fgColorLocal,
-          fgText: this.fgTextColorLocal,
+        fgText: this.fgTextColorLocal,
-          fgLink: this.fgLinkColorLocal,
+        fgLink: this.fgLinkColorLocal,
 
-          panel: this.panelColorLocal,
+        panel: this.panelColorLocal,
-          panelText: this.panelTextColorLocal,
+        panelText: this.panelTextColorLocal,
-          panelFaint: this.panelFaintColorLocal,
+        panelFaint: this.panelFaintColorLocal,
 
-          input: this.inputColorLocal,
+        input: this.inputColorLocal,
-          inputText: this.inputTextColorLocal,
+        inputText: this.inputTextColorLocal,
 
-          topBar: this.topBarColorLocal,
+        topBar: this.topBarColorLocal,
-          topBarText: this.topBarTextColorLocal,
+        topBarText: this.topBarTextColorLocal,
-          topBarLink: this.topBarLinkColorLocal,
+        topBarLink: this.topBarLinkColorLocal,
 
-          btn: this.btnColorLocal,
+        btn: this.btnColorLocal,
-          btnText: this.btnTextColorLocal,
+        btnText: this.btnTextColorLocal,
 
-          alertError: this.alertErrorColorLocal,
+        alertError: this.alertErrorColorLocal,
-          badgeNotification: this.badgeNotificationColorLocal,
+        badgeNotification: this.badgeNotificationColorLocal,
 
-          faint: this.faintColorLocal,
+        faint: this.faintColorLocal,
-          faintLink: this.faintLinkColorLocal,
+        faintLink: this.faintLinkColorLocal,
-          border: this.borderColorLocal,
+        border: this.borderColorLocal,
 
-          cRed: this.cRedColorLocal,
+        cRed: this.cRedColorLocal,
-          cBlue: this.cBlueColorLocal,
+        cBlue: this.cBlueColorLocal,
-          cGreen: this.cGreenColorLocal,
+        cGreen: this.cGreenColorLocal,
-          cOrange: this.cOrangeColorLocal
+        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
-        }
       }
     },
-    preview () {
+    currentOpacity () {
-      try {
+      return {
-        if (!this.currentTheme.colors.bg) {
+        bg: this.bgOpacityLocal,
-          return {}
+        btn: this.btnOpacityLocal,
-        }
+        input: this.inputOpacityLocal,
-        return StyleSetter.generatePreset(this.currentTheme)
+        panel: this.panelOpacityLocal,
-      } catch (e) {
+        topBar: this.topBarOpacityLocal,
-        console.error('CATCH')
+        border: this.borderOpacityLocal,
-        console.error(e)
+        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 ''
+      if (!this.preview.rules) return ''
-      return [this.preview.colorRules, this.preview.radiiRules, 'color: var(--text)'].join(';')
+      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
+      Object.keys(this.$data)
-      this.fgOpacityLocal = undefined
+        .filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal'))
-
+        .filter(_ => !v1OnlyNames.includes(_))
-      this.fgTextColorLocal = undefined
+        .forEach(key => {
-      this.fgLinkColorLocal = undefined
+          set(this.$data, key, 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
     },
 
     /**

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)
       }
     }
   }

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)
       }
     }
   }

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 { ${rules.radii} }`, 'index-max')
-  styleSheet.insertRule(`body { ${radiiRules} }`, 'index-max')
+  styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max')
-  styleSheet.insertRule(`body { ${shadowRules} }`, '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 generateColors = (input) => {
-  const radii = input.radii || {
+  console.log(input.opacity)
-    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 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(';'),
+    rules: {
-    radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'),
+      colors: Object.entries(htmlColors.complete)
-    shadowRules: Object.entries(shadows).filter(([k, v]) => v).map(([k, v]) => `--${k}-shadow: ${generateShadow(v)}`).join(';'),
+        .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