added checkboxes to keep current roundness and shadows, also cleaned up how

shadows/roundness are reset when switching themes

4 files changed, 99 insertions, 33 deletions

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index edc614c3..0c302e93 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -27,6 +27,9 @@ export default {
       selected: this.$store.state.config.theme,
       invalidThemeImported: false,
 
+      keepShadows: false,
+      keepRoundness: false,
+
       textColorLocal: '',
       linkColorLocal: '',
 
@@ -375,6 +378,19 @@ export default {
         })
     },
 
+    clearRoundness () {
+      Object.keys(this.$data)
+        .filter(_ => _.endsWith('RadiusLocal'))
+        .forEach(key => {
+          set(this.$data, key, undefined)
+        })
+    },
+
+    clearShadows () {
+      this.shadowsLocal = {}
+      console.log(this.shadowsLocal)
+    },
+
     /**
      * This applies stored theme data onto form.
      * @param {Object} input - input data
@@ -420,17 +436,24 @@ export default {
         this[key + 'ColorLocal'] = rgb2hex(colors[key])
       })
 
-      // TODO optimize this
-      this.btnRadiusLocal = radii.btn
-      this.inputRadiusLocal = radii.input
-      this.checkboxRadiusLocal = radii.checkbox
-      this.panelRadiusLocal = radii.panel
-      this.avatarRadiusLocal = radii.avatar
-      this.avatarAltRadiusLocal = radii.avatarAlt
-      this.tooltipRadiusLocal = radii.tooltip
-      this.attachmentRadiusLocal = radii.attachment
+      if (!this.keepRoundness) {
+        this.clearRoundness()
+        // TODO optimize this
+        this.btnRadiusLocal = radii.btn
+        this.inputRadiusLocal = radii.input
+        this.checkboxRadiusLocal = radii.checkbox
+        this.panelRadiusLocal = radii.panel
+        this.avatarRadiusLocal = radii.avatar
+        this.avatarAltRadiusLocal = radii.avatarAlt
+        this.tooltipRadiusLocal = radii.tooltip
+        this.attachmentRadiusLocal = radii.attachment
+      }
 
-      this.shadowsLocal = shadows
+      if (!this.keepShadows) {
+        this.clearShadows()
+        this.shadowsLocal = shadows
+        this.shadowSelected = this.shadowsAvailable[0]
+      }
 
       Object.entries(opacity).forEach(([k, v]) => {
         if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
@@ -441,7 +464,16 @@ export default {
   watch: {
     selected () {
       if (this.selectedVersion === 1) {
+        if (!this.keepRoundness) {
+          this.clearRoundness()
+        }
+
+        if (!this.keepShadows) {
+          this.clearShadows()
+        }
+
         this.clearV1()
+
         this.bgColorLocal = this.selected[1]
         this.fgColorLocal = this.selected[2]
         this.textColorLocal = this.selected[3]
diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss
index f8529b4f..9cdc9f33 100644
--- a/src/components/style_switcher/style_switcher.scss
+++ b/src/components/style_switcher/style_switcher.scss
@@ -66,7 +66,7 @@
   .apply-container,
   .radius-container,
   .color-container,
-  .presets-container {
+  {
     display: flex;
 
     p {
@@ -88,12 +88,14 @@
 
   .color-container,
   .shadow-container,
-  .radius-container {
+  .radius-container,
+  .presets-container {
     margin: 1em 1em 0;
   }
 
-  .presets-container,
-  .shadow-selector {
+  .shadow-selector,
+  .save-load,
+  .save-load-options {
     display: flex;
     justify-content: center;
     align-items: baseline;
@@ -110,6 +112,14 @@
     }
   }
 
+  .save-load-options {
+    flex-wrap: wrap;
+    margin-top: .5em;
+    span {
+      margin: 0 .5em;
+    }
+  }
+
   .preview-container {
     border-top: 1px dashed;
     border-bottom: 1px dashed;
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 6463a4ca..0c6b811d 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -1,26 +1,45 @@
 <template>
 <div class="style-switcher">
   <div class="presets-container">
-    <div>
-      {{$t('settings.presets')}}
-      <label for="preset-switcher" class='select'>
-        <select id="preset-switcher" v-model="selected" class="preset-switcher">
-          <option v-for="style in availableStyles"
-                  :value="style"
-                  :style="{
-                          backgroundColor: style[1] || style.theme.colors.bg,
-                          color: style[3] || style.theme.colors.text
-                          }">
-            {{style[0] || style.name}}
-          </option>
-        </select>
-        <i class="icon-down-open"/>
-      </label>
+    <div class="save-load">
+      <div>
+        {{$t('settings.presets')}}
+        <label for="preset-switcher" class='select'>
+          <select id="preset-switcher" v-model="selected" class="preset-switcher">
+            <option v-for="style in availableStyles"
+                    :value="style"
+                    :style="{
+                            backgroundColor: style[1] || style.theme.colors.bg,
+                            color: style[3] || style.theme.colors.text
+                            }">
+              {{style[0] || style.name}}
+            </option>
+          </select>
+          <i class="icon-down-open"/>
+        </label>
+      </div>
+      <div class="import-export">
+        <button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
+        <button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
+        <p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p>
+      </div>
     </div>
-    <div class="import-export">
-      <button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
-      <button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
-      <p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p>
+    <div class="save-load-options">
+      <span>
+        <input
+          id="keep-shadows"
+          type="checkbox"
+          v-model="keepShadows">
+        <label for="keep-shadows">{{$t('settings.style.switcher.keep_shadows')}}</label>
+      </span>
+      <span>
+        <input
+          id="keep-roundness"
+          type="checkbox"
+          v-model="keepRoundness">
+        <label for="keep-roundness">{{$t('settings.style.switcher.keep_roundness')}}</label>
+      </span>
+      <p>{{$t('settings.style.switcher.save_load_hint')}}</p>
     </div>
   </div>
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f990dd04..a9d50dbe 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -164,6 +164,11 @@
       "true": "yes"
     },
     "style": {
+      "switcher": {
+        "keep_shadows": "Keep shadows",
+        "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."
+      },
       "common": {
         "color": "Color",
         "opacity": "Opacity",