From d7af2c8419df59d8b897bc57e94f6cc67bd60eca Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 20 Nov 2018 23:25:38 +0300
Subject: [PATCH] mentioned bug in tab-switcher, made shadow-control work in
 zero-state

---
 .../shadow_control/shadow_control.js          | 19 +++++++++++++------
 .../shadow_control/shadow_control.vue         |  7 +++----
 .../style_switcher/style_switcher.js          |  4 ++++
 .../style_switcher/style_switcher.vue         |  2 +-
 src/components/tab_switcher/tab_switcher.jsx  |  2 ++
 5 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 54813685..b4f48668 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -37,9 +37,12 @@ export default {
       this.selectedId += 1
     }
   },
+  beforeUpdate () {
+    this.cValue = this.value || this.fallback
+  },
   computed: {
     selected () {
-      return this.cValue[this.selectedId] || {
+      return this.isReady && this.cValue[this.selectedId] || {
         x: 0,
         y: 0,
         blur: 0,
@@ -50,13 +53,17 @@ export default {
       }
     },
     moveUpValid () {
-      return this.selectedId > 0
+      return this.isReady && this.selectedId > 0
     },
     moveDnValid () {
-      return this.selectedId < this.cValue.length - 1
+      return this.isReady && this.selectedId < this.cValue.length - 1
+    },
+    isReady () {
+      return typeof this.cValue !== 'undefined'
     },
     present () {
-      return typeof this.cValue[this.selectedId] !== 'undefined' &&
+      return this.isReady &&
+        typeof this.cValue[this.selectedId] !== 'undefined' &&
         !this.usingFallback
     },
     usingFallback () {
@@ -66,9 +73,9 @@ export default {
       return hex2rgb(this.selected.color)
     },
     style () {
-      return {
+      return this.isReady ? {
         boxShadow: getCssShadow(this.cValue)
-      }
+      } : {}
     }
   }
 }
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index cd774d32..f8066947 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -43,7 +43,7 @@
       <label for="shadow-switcher" class="select">
         <select
           v-model="selectedId" class="shadow-switcher"
-          :disabled="usingFallback"
+          :disabled="!isReady || usingFallback"
           id="shadow-switcher">
           <option v-for="(shadow, index) in cValue" :value="index">
             {{$t('settings.style.shadows.shadow_id', { value: index })}}
@@ -51,7 +51,7 @@
         </select>
         <i class="icon-down-open"/>
       </label>
-      <button class="btn btn-default" :disabled="!present" @click="del">
+      <button class="btn btn-default" :disabled="!isReady || !present" @click="del">
         <i class="icon-cancel"/>
       </button>
       <button class="btn btn-default" :disabled="!moveUpValid" @click="moveUp">
@@ -60,7 +60,7 @@
       <button class="btn btn-default" :disabled="!moveDnValid" @click="moveDn">
         <i class="icon-down-open"/>
       </button>
-      <button class="btn btn-default" @click="add">
+      <button class="btn btn-default" :disabled="!isReady" @click="add">
         <i class="icon-plus"/>
       </button>
     </div>
@@ -137,7 +137,6 @@
   flex-wrap: wrap;
   justify-content: center;
 
-
   .shadow-preview-container,
   .shadow-tweak {
     margin: 5px 6px 0 0;
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 7cb6197c..acb1764d 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -93,6 +93,9 @@ export default {
   },
   mounted () {
     this.normalizeLocalState(this.$store.state.config.customTheme)
+    if (typeof this.shadowSelected === 'undefined') {
+      this.shadowSelected = this.shadowsAvailable[0]
+    }
   },
   computed: {
     selectedVersion () {
@@ -180,6 +183,7 @@ export default {
       if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {} }
       return this.preview.theme
     },
+    // This needs optimization maybe
     previewContrast () {
       if (!this.previewTheme.colors.bg) return {}
       const colors = this.previewTheme.colors
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 5f0c2566..5cf75636 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -198,7 +198,7 @@
             <label class="checkbox-label" for="override"></label>
           </div>
         </div>
-        <shadow-control v-if="currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
+        <shadow-control :fallback="currentShadowFallback" v-model="currentShadow"/>
       </div>
     </tab-switcher>
   </keep-alive>
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
index 3fff38f6..ea582450 100644
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/src/components/tab_switcher/tab_switcher.jsx
@@ -1,5 +1,7 @@
 import Vue from 'vue'
 
+// FIXME: This doesn't like v-if directly inside the tab's contents, breaks vue really bad
+
 import './tab_switcher.scss'
 
 export default Vue.component('tab-switcher', {