Merge pull request #145 from JsSucks/colour-picker

Colour picker base

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;
+                }
+            }
+        }
+    }
+}

client/src/styles/partials/generic/forms/index.scss

@@ -6,3 +6,4 @@
 @import './sliders.scss';
 @import './switches.scss';
 @import './arrays.scss';
+@import './colourpicker.scss';

client/src/ui/components/bd/setting/Colour.vue

@@ -0,0 +1,70 @@
+/**
+ * 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.val.hsv;
+            },
+            hsla() {
+                if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
+                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}`;
+            }
+        },
+        methods: {
+            pick(c) {
+                
+            }
+        }
+    }
+</script>
+<style>
+    .bd-hidden {
+        display: none;
+    }
+</style>

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() {

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",

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",