From 26b9f787bb01551f991f9e79aa8c0fc59313b95e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 23 Nov 2018 10:17:01 +0300
Subject: [PATCH] added "keep opacity" option, fixed opacity loading, fixed
 missing shadows not affecting the preview (i.e. previewing pleroma-dark when
 redmond is applied)

---
 .../style_switcher/style_switcher.js          | 27 +++++++++++++++----
 .../style_switcher/style_switcher.vue         |  7 +++++
 src/i18n/en.json                              |  1 +
 src/services/style_setter/style_setter.js     |  8 ++++--
 4 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 33be522b..e1a17837 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -28,6 +28,7 @@ export default {
       invalidThemeImported: false,
 
       keepShadows: false,
+      keepOpacity: false,
       keepRoundness: false,
 
       textColorLocal: '',
@@ -386,6 +387,14 @@ export default {
         })
     },
 
+    clearOpacity () {
+      Object.keys(this.$data)
+        .filter(_ => _.endsWith('OpacityLocal'))
+        .forEach(key => {
+          set(this.$data, key, undefined)
+        })
+    },
+
     clearShadows () {
       this.shadowsLocal = {}
       console.log(this.shadowsLocal)
@@ -397,9 +406,10 @@ export default {
      * @param {Number} version - version of data. 0 means try to guess based on data.
      */
     normalizeLocalState (input, version = 0) {
+      console.log(input.opacity)
       const colors = input.colors || input
       const radii = input.radii || input
-      const opacity = input.opacity || input
+      const opacity = input.opacity
       const shadows = input.shadows || {}
 
       if (version === 0) {
@@ -451,10 +461,13 @@ export default {
         this.shadowSelected = this.shadowsAvailable[0]
       }
 
-      Object.entries(opacity).forEach(([k, v]) => {
-        if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
-        this[k + 'OpacityLocal'] = v
-      })
+      if (opacity && !this.keepOpacity) {
+        this.clearOpacity()
+        Object.entries(opacity).forEach(([k, v]) => {
+          if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
+          this[k + 'OpacityLocal'] = v
+        })
+      }
     }
   },
   watch: {
@@ -468,6 +481,10 @@ export default {
           this.clearShadows()
         }
 
+        if (!this.keepOpacity) {
+          this.clearOpacity()
+        }
+
         this.clearV1()
 
         this.bgColorLocal = this.selected[1]
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 0c6b811d..ed0dd733 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -32,6 +32,13 @@
           v-model="keepShadows">
         <label for="keep-shadows">{{$t('settings.style.switcher.keep_shadows')}}</label>
       </span>
+      <span>
+        <input
+          id="keep-opacity"
+          type="checkbox"
+          v-model="keepOpacity">
+        <label for="keep-opacity">{{$t('settings.style.switcher.keep_opacity')}}</label>
+      </span>
       <span>
         <input
           id="keep-roundness"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a9d50dbe..98a91013 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -166,6 +166,7 @@
     "style": {
       "switcher": {
         "keep_shadows": "Keep shadows",
+        "keep_opacity": "Keep opacity",
         "keep_roundness": "Keep roundness",
         "save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme."
       },
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index d7487eed..60531f28 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -94,7 +94,10 @@ const setColors = (input, commit) => {
 }
 
 const getCssShadow = (input) => {
-  // >shad
+  if (input.length === 0) {
+    return 'none'
+  }
+
   return input.map((shad) => [
     shad.x,
     shad.y,
@@ -340,9 +343,10 @@ const generateShadows = (input) => {
     ...(input.shadows || {})
   }
 
+  console.log(Object.entries(shadows).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';'))
   return {
     rules: {
-      shadows: Object.entries(shadows).filter(([k, v]) => v).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';')
+      shadows: Object.entries(shadows).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';')
     },
     theme: {
       shadows