From e7e79c9ac86e03a805736c68791ec095b0cb1150 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 28 Feb 2018 05:58:13 +0200
Subject: [PATCH] add colour picker save and reset

---
 .../src/ui/components/bd/setting/Colour.vue   | 26 +++++++++++++------
 tests/themes/Example/config.json              |  3 +--
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/client/src/ui/components/bd/setting/Colour.vue b/client/src/ui/components/bd/setting/Colour.vue
index 7a7c5abd..65b2a4bc 100644
--- a/client/src/ui/components/bd/setting/Colour.vue
+++ b/client/src/ui/components/bd/setting/Colour.vue
@@ -13,7 +13,7 @@
         <div class="bd-title">
             <h3 v-if="setting.text">{{setting.text}}</h3>
             <div class="bd-colourpicker-wrapper">
-                <button class="bd-colourpicker-swatch" :style="{backgroundColor: `rgba(${rgbaString})`}" @click="open = !open"/>
+                <button class="bd-colourpicker-swatch" :style="{backgroundColor: rgbaString}" @click="open = !open"/>
             </div>
         </div>
         <Picker ref="picker" v-model="colors" @input="pick" :class="{'bd-hidden': !open}"/>
@@ -25,14 +25,14 @@
     export default {
         data() {
             return {
-                colors: '#3e82e5',
-                open: false
+                open: false,
+                colors: '#FFF'
             }
         },
         components: {
             Picker
         },
-        props: ['setting'],
+        props: ['setting', 'change'],
         computed: {
             hex() {
                 if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
@@ -51,14 +51,24 @@
                 return this.$refs.picker.val.hsl;
             },
             rgbaString() {
-                const rgba = this.rgba;
-                if (!rgba.r) return this.colors;
-                return `${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a}`;
+                if ('string' === typeof this.colors) return this.colors;
+                const { rgba } = this.colors;
+                return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
             }
         },
         methods: {
             pick(c) {
-                
+                this.change(this.rgbaString);
+            }
+        },
+        beforeMount() {
+            this.colors = this.setting.value;
+        },
+        watch: {
+            setting(newVal, oldVal) {
+                if (newVal.value === oldVal.value) return;
+                this.colors = newVal.value;
+                this.open = false;
             }
         }
     }
diff --git a/tests/themes/Example/config.json b/tests/themes/Example/config.json
index f150ecc1..b9437612 100644
--- a/tests/themes/Example/config.json
+++ b/tests/themes/Example/config.json
@@ -15,10 +15,9 @@
                 {
                     "id": "colourTest",
                     "type": "colour",
-                    "subtype": "hex", 
                     "value": "#3e82e5",
                     "text": "Colour Picker Test",
-                    "hint":  "Colour Picker Test Hint" 
+                    "hint": "Colour Picker Test Hint"
                 },
                 {
                     "id": "divBg",