From ca9264a6724e3600e447cae49a87a4cde5a5ce61 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Tue, 27 Feb 2018 23:30:39 +0200
Subject: [PATCH 1/4] add vue-color

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 488bbb32..7249f49f 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "v-tooltip": "^2.0.0-rc.30",
     "vue": "^2.5.13",
     "vue-codemirror": "^4.0.3",
+    "vue-color": "^2.4.4",
     "vue-loader": "^13.7.0",
     "vue-material-design-icons": "^1.0.0",
     "vue-template-compiler": "^2.5.13",

From 9b7b5d3b0298c11752932427cd9e053b90dacd2b Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 28 Feb 2018 00:08:47 +0200
Subject: [PATCH 2/4] Colour picker base

---
 .../src/ui/components/bd/setting/Colour.vue   | 87 +++++++++++++++++++
 .../src/ui/components/bd/setting/Setting.vue  |  5 +-
 tests/themes/Example/config.json              |  8 ++
 3 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 client/src/ui/components/bd/setting/Colour.vue

diff --git a/client/src/ui/components/bd/setting/Colour.vue b/client/src/ui/components/bd/setting/Colour.vue
new file mode 100644
index 00000000..c1bd7249
--- /dev/null
+++ b/client/src/ui/components/bd/setting/Colour.vue
@@ -0,0 +1,87 @@
+/**
+ * BetterDiscord Colour Setting Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <div class="bd-form-colourpicker">
+        <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"/>
+            </div>
+        </div>
+        <Picker ref="picker" v-model="colors" @input="pick" :class="{'bd-hidden': !open}"/>
+        <div class="bd-hint">{{setting.hint}}</div>
+    </div>
+</template>
+<script>
+    import { Chrome as Picker } from 'vue-color';
+    export default {
+        data() {
+            return {
+                colors: '#3e82e5',
+                open: false
+            }
+        },
+        components: {
+            Picker
+        },
+        props: ['setting'],
+        computed: {
+            hex() {
+                if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
+                return this.$refs.picker.val.hex;
+            },
+            rgba() {
+                if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
+                return this.$refs.picker.val.rgba;
+            },
+            hsva() {
+                if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
+                return this.$refs.picker.hsv;
+            },
+            hsla() {
+                if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
+                return this.$refs.picker.hsl;
+            },
+            rgbaString() {
+                const rgba = this.rgba;
+                if (!rgba.r) return this.colors;
+                return `${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a}`;
+            }
+        },
+        methods: {
+            pick(c) {
+                
+            }
+        }
+    }
+</script>
+<style>
+    .bd-hidden {
+        display: none;
+    }
+    .bd-form-colourpicker .bd-title {
+        display: flex;
+    }
+    .bd-form-colourpicker .bd-title h3 {
+        font-weight: 500;
+        color: #f6f6f7;
+        flex: 1;
+        line-height: 24px;
+        margin-bottom: 0;
+        margin-top: 0;
+    }
+    .bd-colourpicker-swatch {
+        width: 50px;
+        height: 30px;
+        border-radius: 3px;
+        border: 1px solid hsla(0,0%,100%,.1);
+    }
+</style>
diff --git a/client/src/ui/components/bd/setting/Setting.vue b/client/src/ui/components/bd/setting/Setting.vue
index 2fd9a958..4afe3e6a 100644
--- a/client/src/ui/components/bd/setting/Setting.vue
+++ b/client/src/ui/components/bd/setting/Setting.vue
@@ -20,6 +20,7 @@
         <FileSetting v-if="setting.type === 'file'" :setting="setting" :change="change"/>
         <ArraySetting v-if="setting.type === 'array'" :setting="setting" :change="change" />
         <CustomSetting v-if="setting.type === 'custom'" :setting="setting" :change="change" />
+        <ColourSetting v-if="setting.type === 'colour' || setting.type === 'color'" :setting="setting" :change="change"/>
         <div class="bd-form-divider"></div>
     </div>
 </template>
@@ -35,6 +36,7 @@
     import FileSetting from './File.vue';
     import ArraySetting from './Array.vue';
     import CustomSetting from './Custom.vue';
+    import ColourSetting from './Colour.vue';
 
     export default {
         props: [
@@ -51,7 +53,8 @@
             SliderSetting,
             FileSetting,
             ArraySetting,
-            CustomSetting
+            CustomSetting,
+            ColourSetting
         },
         computed: {
             changed() {
diff --git a/tests/themes/Example/config.json b/tests/themes/Example/config.json
index 74a27f90..f150ecc1 100644
--- a/tests/themes/Example/config.json
+++ b/tests/themes/Example/config.json
@@ -12,6 +12,14 @@
         {
             "category": "default",
             "settings": [
+                {
+                    "id": "colourTest",
+                    "type": "colour",
+                    "subtype": "hex", 
+                    "value": "#3e82e5",
+                    "text": "Colour Picker Test",
+                    "hint":  "Colour Picker Test Hint" 
+                },
                 {
                     "id": "divBg",
                     "type": "text",

From 160e6699e3ec880fb1c7403e8553f071003b1796 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 28 Feb 2018 00:10:37 +0200
Subject: [PATCH 3/4] add missing .val ref #144

---
 client/src/ui/components/bd/setting/Colour.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/ui/components/bd/setting/Colour.vue b/client/src/ui/components/bd/setting/Colour.vue
index c1bd7249..8aa801a7 100644
--- a/client/src/ui/components/bd/setting/Colour.vue
+++ b/client/src/ui/components/bd/setting/Colour.vue
@@ -44,11 +44,11 @@
             },
             hsva() {
                 if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
-                return this.$refs.picker.hsv;
+                return this.$refs.picker.val.hsv;
             },
             hsla() {
                 if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
-                return this.$refs.picker.hsl;
+                return this.$refs.picker.val.hsl;
             },
             rgbaString() {
                 const rgba = this.rgba;

From 779a59c87e3c2446827b2792e22b93b63d73f529 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 28 Feb 2018 04:29:28 +0200
Subject: [PATCH 4/4] Make colour picker a popout and style it

---
 .../partials/generic/forms/colourpicker.scss  | 50 +++++++++++++++++++
 .../styles/partials/generic/forms/index.scss  |  1 +
 .../src/ui/components/bd/setting/Colour.vue   | 17 -------
 3 files changed, 51 insertions(+), 17 deletions(-)
 create mode 100644 client/src/styles/partials/generic/forms/colourpicker.scss

diff --git a/client/src/styles/partials/generic/forms/colourpicker.scss b/client/src/styles/partials/generic/forms/colourpicker.scss
new file mode 100644
index 00000000..0d937390
--- /dev/null
+++ b/client/src/styles/partials/generic/forms/colourpicker.scss
@@ -0,0 +1,50 @@
+.bd-form-colourpicker .bd-title {
+    display: flex;
+}
+
+.bd-form-colourpicker .bd-title h3 {
+    font-weight: 500;
+    color: #f6f6f7;
+    flex: 1;
+    line-height: 24px;
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+.bd-colourpicker-swatch {
+    width: 50px;
+    height: 30px;
+    border-radius: 3px;
+    border: 1px solid hsla(0,0%,100%,.1);
+}
+
+.bd-form-colourpicker {
+    position: relative;
+
+    .vc-chrome {
+        position: absolute;
+        right: 10px;
+        top: 35px;
+        border-radius: 3px;
+
+        .vc-chrome-body {
+            background: #36393e;
+
+            .vc-chrome-fields-wrap {
+                .vc-input__input {
+                    background: #1e2124;
+                    color: #FFF;
+                    box-shadow: inset 0 0 0 1px #000;
+                }
+
+                .vc-chrome-toggle-icon-highlight {
+                    background: #1e2124;
+                }
+
+                .vc-chrome-toggle-btn svg path {
+                    fill: #FFF;
+                }
+            }
+        }
+    }
+}
diff --git a/client/src/styles/partials/generic/forms/index.scss b/client/src/styles/partials/generic/forms/index.scss
index 92671d26..e1154656 100644
--- a/client/src/styles/partials/generic/forms/index.scss
+++ b/client/src/styles/partials/generic/forms/index.scss
@@ -6,3 +6,4 @@
 @import './sliders.scss';
 @import './switches.scss';
 @import './arrays.scss';
+@import './colourpicker.scss';
diff --git a/client/src/ui/components/bd/setting/Colour.vue b/client/src/ui/components/bd/setting/Colour.vue
index 8aa801a7..7a7c5abd 100644
--- a/client/src/ui/components/bd/setting/Colour.vue
+++ b/client/src/ui/components/bd/setting/Colour.vue
@@ -67,21 +67,4 @@
     .bd-hidden {
         display: none;
     }
-    .bd-form-colourpicker .bd-title {
-        display: flex;
-    }
-    .bd-form-colourpicker .bd-title h3 {
-        font-weight: 500;
-        color: #f6f6f7;
-        flex: 1;
-        line-height: 24px;
-        margin-bottom: 0;
-        margin-top: 0;
-    }
-    .bd-colourpicker-swatch {
-        width: 50px;
-        height: 30px;
-        border-radius: 3px;
-        border: 1px solid hsla(0,0%,100%,.1);
-    }
 </style>