feat: add button, that allows to revert color changes made from ui (e…

…picmaxco#659)
anumber8 · Sep 27, 2019 · f58d182 · f58d182
1 parent 0cfa4a1
commit f58d182
Showing 1 changed file with 31 additions and 9 deletions.
diff --git a/src/components/admin/app-navbar/components/dropdowns/ColorDropdown.vue b/src/components/admin/app-navbar/components/dropdowns/ColorDropdown.vue
@@ -8,62 +8,65 @@
       slot="anchor"
       class="color-dropdown__icon"
     />
-
     <div class="color-dropdown__content pl-4 pr-4 pt-2 pb-2">
+      <va-button small color="primary" v-on:click="restoreDefaultTheme">
+        Default theme
+      </va-button>
+
       <va-dropdown class="color-picker-dropdown mt-1 mb-1">
         <va-badge class="color-picker-dropdown__badge" color="primary" slot="anchor">
           Primary
         </va-badge>
-        <va-advanced-color-picker class="my-1" v-model="$themes.primary" :value="$themes.primary"/>
+        <va-advanced-color-picker class="my-1" v-model="themeProxy.primary" :value="themeProxy.primary"/>
       </va-dropdown>
 
       <va-dropdown class="color-picker-dropdown mt-1 mb-1">
         <va-badge class="color-picker-dropdown__badge" color="secondary" slot="anchor">
           Secondary
         </va-badge>
-        <va-advanced-color-picker class="my-1" v-model="$themes.secondary" :value="$themes.secondary"/>
+        <va-advanced-color-picker class="my-1" v-model="themeProxy.secondary" :value="themeProxy.secondary"/>
       </va-dropdown>
 
       <va-dropdown class="color-picker-dropdown mt-1 mb-1">
         <va-badge class="color-picker-dropdown__badge" color="success" slot="anchor">
           Success
         </va-badge>
-        <va-advanced-color-picker class="my-1" v-model="$themes.success" :value="$themes.success"/>
+        <va-advanced-color-picker class="my-1" v-model="themeProxy.success" :value="themeProxy.success"/>
       </va-dropdown>
 
       <va-dropdown class="color-picker-dropdown mt-1 mb-1">
         <va-badge class="color-picker-dropdown__badge" color="info" slot="anchor">
           Info
         </va-badge>
-        <va-advanced-color-picker class="my-1" v-model="$themes.info" :value="$themes.info"/>
+        <va-advanced-color-picker class="my-1" v-model="themeProxy.info" :value="themeProxy.info"/>
       </va-dropdown>
 
       <va-dropdown class="color-picker-dropdown mt-1 mb-1">
         <va-badge class="color-picker-dropdown__badge" color="danger" slot="anchor">
           Danger
         </va-badge>
-        <va-advanced-color-picker class="my-1" v-model="$themes.danger" :value="$themes.danger"/>
+        <va-advanced-color-picker class="my-1" v-model="themeProxy.danger" :value="themeProxy.danger"/>
       </va-dropdown>
 
       <va-dropdown class="color-picker-dropdown mt-1 mb-1">
         <va-badge class="color-picker-dropdown__badge" color="warning" slot="anchor">
           Warning
         </va-badge>
-        <va-advanced-color-picker class="my-1" v-model="$themes.warning" :value="$themes.warning"/>
+        <va-advanced-color-picker class="my-1" v-model="themeProxy.warning" :value="themeProxy.warning"/>
       </va-dropdown>
 
       <va-dropdown class="color-picker-dropdown mt-1 mb-1">
         <va-badge class="color-picker-dropdown__badge" color="gray" slot="anchor">
           Gray
         </va-badge>
-        <va-advanced-color-picker class="my-1" v-model="$themes.gray" :value="$themes.gray"/>
+        <va-advanced-color-picker class="my-1" v-model="themeProxy.gray" :value="themeProxy.gray"/>
       </va-dropdown>
 
       <va-dropdown class="color-picker-dropdown mt-1 mb-1">
         <va-badge class="color-picker-dropdown__badge" color="dark" slot="anchor">
           Dark
         </va-badge>
-        <va-advanced-color-picker class="my-1" v-model="$themes.dark" :value="$themes.dark"/>
+        <va-advanced-color-picker class="my-1" v-model="themeProxy.dark" :value="themeProxy.dark"/>
       </va-dropdown>
     </div>
   </va-dropdown>
@@ -72,12 +75,31 @@
 <script>
 import { colorArray } from 'vuestic-ui/src/components/vuestic-components/va-color-picker/VuesticTheme'
 
+let themeCache = {}
+
 export default {
   data () {
+    let proxyHandler = {
+      set: function (target, property, value) {
+        if (!themeCache[property] && typeof target[property] === 'string') themeCache[property] = target[property]
+        target[property] = value
+
+        return true
+      },
+    }
+
     return {
       palette: colorArray,
+      themeProxy: new Proxy(this.$themes, proxyHandler),
     }
   },
+  methods: {
+    restoreDefaultTheme () {
+      for (let i in themeCache) {
+        this.$themes[i] = themeCache[i]
+      }
+    },
+  },
 }
 </script>