added keep-colors option

5 files changed, 65 insertions, 55 deletions

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 50cd1e6f..6a4e1cba 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -38,6 +38,7 @@ export default {
       colorsInvalid: true,
       radiiInvalid: true,
 
+      keepColor: false,
       keepShadows: false,
       keepOpacity: false,
       keepRoundness: false,
@@ -296,31 +297,30 @@ export default {
       return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid
     },
     exportedTheme () {
-      const saveEverything = !this.keepFonts && !this.keepShadows && !this.keepColors && !this.keepOpacity && !this.keepRoundness
-
-      // TODO change into delete-less version.
-      const theme = {
-        shadows: this.shadowsLocal,
-        fonts: this.fontsLocal,
-        opacity: this.currentOpacity,
-        colors: this.currentColors,
-        radii: this.currentRadii
+      const saveEverything = (
+        !this.keepFonts &&
+        !this.keepShadows &&
+        !this.keepOpacity &&
+        !this.keepRoundness &&
+        !this.keepColor
+      )
+
+      const theme = {}
+
+      if (this.keepFonts || saveEverything) {
+        theme.fonts = this.fontsLocal
       }
-
-      if (!this.keepFonts && !saveEverything) {
-        delete theme.fonts
-      }
-      if (!this.keepShadows && !saveEverything) {
-        delete theme.shadows
+      if (this.keepShadows || saveEverything) {
+        theme.shadows = this.shadowsLocal
       }
-      if (!this.keepOpacity && !saveEverything) {
-        delete theme.opacity
+      if (this.keepOpacity || saveEverything) {
+        theme.opacity = this.currentOpacity
       }
-      if (!this.keepColors && !saveEverything) {
-        delete theme.colors
+      if (this.keepColor || saveEverything) {
+        theme.colors = this.currentColors
       }
-      if (!this.keepRoundness && !saveEverything) {
-        delete theme.radii
+      if (this.keepRoundness || saveEverything) {
+        theme.radii = this.currentRadii
       }
 
       return {
@@ -438,21 +438,23 @@ export default {
         this.textColorLocal = rgb2hex(colors.fg)
       }
 
-      this.clearV1()
-      const keys = new Set(version !== 1 ? Object.keys(colors) : [])
-      if (version === 1 || version === 'l1') {
-        keys
-          .add('bg')
-          .add('link')
-          .add('cRed')
-          .add('cBlue')
-          .add('cGreen')
-          .add('cOrange')
-      }
+      if (!this.keepColor) {
+        this.clearV1()
+        const keys = new Set(version !== 1 ? Object.keys(colors) : [])
+        if (version === 1 || version === 'l1') {
+          keys
+            .add('bg')
+            .add('link')
+            .add('cRed')
+            .add('cBlue')
+            .add('cGreen')
+            .add('cOrange')
+        }
 
-      keys.forEach(key => {
-        this[key + 'ColorLocal'] = rgb2hex(colors[key])
-      })
+        keys.forEach(key => {
+          this[key + 'ColorLocal'] = rgb2hex(colors[key])
+        })
+      }
 
       if (!this.keepRoundness) {
         this.clearRoundness()
@@ -553,16 +555,18 @@ export default {
           this.clearOpacity()
         }
 
-        this.clearV1()
-
-        this.bgColorLocal = this.selected[1]
-        this.fgColorLocal = this.selected[2]
-        this.textColorLocal = this.selected[3]
-        this.linkColorLocal = this.selected[4]
-        this.cRedColorLocal = this.selected[5]
-        this.cGreenColorLocal = this.selected[6]
-        this.cBlueColorLocal = this.selected[7]
-        this.cOrangeColorLocal = this.selected[8]
+        if (!this.keepColor) {
+          this.clearV1()
+
+          this.bgColorLocal = this.selected[1]
+          this.fgColorLocal = this.selected[2]
+          this.textColorLocal = this.selected[3]
+          this.linkColorLocal = this.selected[4]
+          this.cRedColorLocal = this.selected[5]
+          this.cGreenColorLocal = this.selected[6]
+          this.cBlueColorLocal = this.selected[7]
+          this.cOrangeColorLocal = this.selected[8]
+        }
       } else if (this.selectedVersion >= 2) {
         this.normalizeLocalState(this.selected.theme, 2)
       }
diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss
index f53f00a0..135c113a 100644
--- a/src/components/style_switcher/style_switcher.scss
+++ b/src/components/style_switcher/style_switcher.scss
@@ -54,11 +54,6 @@
     }
   }
 
-  .import-warning {
-    color: $fallback--cRed;
-    color: var(--cRed, $fallback--cRed);
-  }
-
   .tab-switcher {
     margin: 0 -1em;
   }
@@ -154,8 +149,10 @@
   .save-load-options {
     flex-wrap: wrap;
     margin-top: .5em;
-    span {
+    justify-content: center;
+    .keep-option {
       margin: 0 .5em .5em;
+      min-width: 25%;
     }
   }
 
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 730bfef0..6acb7755 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -28,28 +28,35 @@
         />
     </div>
     <div class="save-load-options">
-      <span>
+      <span class="keep-option">
+        <input
+          id="keep-color"
+          type="checkbox"
+          v-model="keepColor">
+        <label for="keep-color">{{$t('settings.style.switcher.keep_color')}}</label>
+      </span>
+      <span class="keep-option">
         <input
           id="keep-shadows"
           type="checkbox"
           v-model="keepShadows">
         <label for="keep-shadows">{{$t('settings.style.switcher.keep_shadows')}}</label>
       </span>
-      <span>
+      <span class="keep-option">
         <input
           id="keep-opacity"
           type="checkbox"
           v-model="keepOpacity">
         <label for="keep-opacity">{{$t('settings.style.switcher.keep_opacity')}}</label>
       </span>
-      <span>
+      <span class="keep-option">
         <input
           id="keep-roundness"
           type="checkbox"
           v-model="keepRoundness">
         <label for="keep-roundness">{{$t('settings.style.switcher.keep_roundness')}}</label>
       </span>
-      <span>
+      <span class="keep-option">
         <input
           id="keep-fonts"
           type="checkbox"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a1fc43aa..97dfcb77 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -191,6 +191,7 @@
     },
     "style": {
       "switcher": {
+        "keep_color": "Keep colors",
         "keep_shadows": "Keep shadows",
         "keep_opacity": "Keep opacity",
         "keep_roundness": "Keep roundness",
diff --git a/src/i18n/ru.json b/src/i18n/ru.json
index 438e0608..c764005a 100644
--- a/src/i18n/ru.json
+++ b/src/i18n/ru.json
@@ -156,6 +156,7 @@
     "user_settings": "Настройки пользователя",
     "style": {
       "switcher": {
+        "keep_color": "Оставить цвета",
         "keep_shadows": "Оставить тени",
         "keep_opacity": "Оставить прозрачность",
         "keep_roundness": "Оставить скругление",