validity checks, no longer exploding when something is invalid

2 files changed, 52 insertions, 17 deletions

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index d45ce455..286210b5 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -27,6 +27,14 @@ export default {
       selected: this.$store.state.config.theme,
       invalidThemeImported: false,
 
+      previewShadows: {},
+      previewColors: {},
+      previewRadii: {},
+
+      shadowsInvalid: true,
+      colorsInvalid: true,
+      radiiInvalid: true,
+
       keepShadows: false,
       keepOpacity: false,
       keepRoundness: false,
@@ -167,22 +175,6 @@ export default {
         attachment: this.attachmentRadiusLocal
       }
     },
-    previewColors () {
-      if (this.currentColors.bg) {
-        return generateColors({
-          opacity: this.currentOpacity,
-          colors: this.currentColors
-        })
-      } else {
-        return {}
-      }
-    },
-    previewRadii () {
-      return generateRadii({ radii: this.currentRadii })
-    },
-    previewShadows () {
-      return generateShadows({ shadows: this.shadowsLocal })
-    },
     preview () {
       return composePreset(this.previewColors, this.previewRadii, this.previewShadows)
     },
@@ -288,6 +280,9 @@ export default {
       set (v) {
         set(this.shadowsLocal, this.shadowSelected, v)
       }
+    },
+    themeValid () {
+      return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid
     }
   },
   components: {
@@ -475,6 +470,46 @@ export default {
     }
   },
   watch: {
+    currentRadii () {
+      try {
+        this.previewRadii = generateRadii({ radii: this.currentRadii })
+        this.radiiInvalid = false
+      } catch (e) {
+        this.radiiInvalid = true
+        console.warn(e)
+      }
+    },
+    shadowsLocal () {
+      try {
+        this.previewShadows = generateShadows({ shadows: this.shadowsLocal })
+        this.shadowsInvalid = false
+      } catch (e) {
+        this.shadowsInvalid = true
+        console.warn(e)
+      }
+    },
+    currentColors () {
+      try {
+        this.previewColors = generateColors({
+          opacity: this.currentOpacity,
+          colors: this.currentColors
+        })
+        this.colorsInvalid = false
+      } catch (e) {
+        this.colorsInvalid = true
+        console.warn(e)
+      }
+    },
+    currentOpacity () {
+      try {
+        this.previewColors = generateColors({
+          opacity: this.currentOpacity,
+          colors: this.currentColors
+        })
+      } catch (e) {
+        console.warn(e)
+      }
+    },
     selected () {
       if (this.selectedVersion === 1) {
         if (!this.keepRoundness) {
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index f5090321..5e9af19e 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -218,7 +218,7 @@
   </keep-alive>
 
   <div class="apply-container">
-    <button class="btn submit" @click="setCustomTheme">{{$t('general.apply')}}</button>
+    <button class="btn submit" :disabled="!themeValid" @click="setCustomTheme">{{$t('general.apply')}}</button>
     <button class="btn" @click="clearAll">{{$t('settings.style.switcher.reset')}}</button>
   </div>
 </div>