From e4189648192a8d9d8c11dd7afd4ad09b6766fa5d Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 28 Feb 2018 07:41:57 +0200
Subject: [PATCH 1/6] Close colour picker when clicked outside

---
 .gitignore                                     | 1 +
 client/src/ui/components/bd/setting/Colour.vue | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 2ebf2163..c902f0de 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,4 @@ Installers/**/*/packages
 dist/
 user.config.json
 tests/data
+/tests/themes/SimplerFlat
diff --git a/client/src/ui/components/bd/setting/Colour.vue b/client/src/ui/components/bd/setting/Colour.vue
index 65b2a4bc..115fc649 100644
--- a/client/src/ui/components/bd/setting/Colour.vue
+++ b/client/src/ui/components/bd/setting/Colour.vue
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <div class="bd-form-colourpicker">
+    <div ref="root" class="bd-form-colourpicker">
         <div class="bd-title">
             <h3 v-if="setting.text">{{setting.text}}</h3>
             <div class="bd-colourpicker-wrapper">
@@ -59,10 +59,17 @@
         methods: {
             pick(c) {
                 this.change(this.rgbaString);
+            },
+            closePopup(e) {
+                if (!this.$refs.root.contains(e.target)) this.open = false;
             }
         },
         beforeMount() {
             this.colors = this.setting.value;
+            window.addEventListener('click', this.closePopup);  
+        },
+        destroyed() {
+            window.removeEventListener('click', this.closePopup);
         },
         watch: {
             setting(newVal, oldVal) {

From 1e977fb407b1e7c939136436616b45a591caa611 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 28 Feb 2018 07:46:48 +0200
Subject: [PATCH 2/6] Return raw colour value for colour picker

---
 client/src/modules/thememanager.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/modules/thememanager.js b/client/src/modules/thememanager.js
index 0b1ac0e9..815d5744 100644
--- a/client/src/modules/thememanager.js
+++ b/client/src/modules/thememanager.js
@@ -101,6 +101,10 @@ export default class ThemeManager extends ContentManager {
         const { type, id, value } = setting;
         const name = id.replace(/[^a-zA-Z0-9-]/g, '-').replace(/--/g, '-');
 
+        if (type === 'colour' || type === 'color') {
+            return [name, value];
+        }
+
         if (type === 'array') {
             const items = JSON.parse(JSON.stringify(value)) || [];
             const settings_json = JSON.stringify(setting.settings);

From 67142ca7db763ca1881aa2e1f2d68e5c967d9a35 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 28 Feb 2018 08:35:57 +0200
Subject: [PATCH 3/6] Picker z-index

---
 client/src/styles/partials/generic/forms/colourpicker.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/styles/partials/generic/forms/colourpicker.scss b/client/src/styles/partials/generic/forms/colourpicker.scss
index 0d937390..59fee4fb 100644
--- a/client/src/styles/partials/generic/forms/colourpicker.scss
+++ b/client/src/styles/partials/generic/forms/colourpicker.scss
@@ -26,6 +26,7 @@
         right: 10px;
         top: 35px;
         border-radius: 3px;
+        z-index: 9001;
 
         .vc-chrome-body {
             background: #36393e;

From 7046316d60a494bbc4ebe1e0587fbab6e80c3c76 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 28 Feb 2018 08:55:30 +0200
Subject: [PATCH 4/6] add top offset

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

diff --git a/client/src/ui/components/bd/setting/Colour.vue b/client/src/ui/components/bd/setting/Colour.vue
index 115fc649..698ebe2c 100644
--- a/client/src/ui/components/bd/setting/Colour.vue
+++ b/client/src/ui/components/bd/setting/Colour.vue
@@ -13,10 +13,10 @@
         <div class="bd-title">
             <h3 v-if="setting.text">{{setting.text}}</h3>
             <div class="bd-colourpicker-wrapper">
-                <button class="bd-colourpicker-swatch" :style="{backgroundColor: rgbaString}" @click="open = !open"/>
+                <button class="bd-colourpicker-swatch" :style="{backgroundColor: rgbaString}" @click="show"/>
             </div>
         </div>
-        <Picker ref="picker" v-model="colors" @input="pick" :class="{'bd-hidden': !open}"/>
+        <Picker ref="picker" v-model="colors" @input="pick" :class="{'bd-hidden': !open}" :style="{top: topOffset}"/>
         <div class="bd-hint">{{setting.hint}}</div>
     </div>
 </template>
@@ -26,7 +26,8 @@
         data() {
             return {
                 open: false,
-                colors: '#FFF'
+                colors: '#FFF',
+                topOffset: '35px'
             }
         },
         components: {
@@ -57,6 +58,15 @@
             }
         },
         methods: {
+            show() {
+                const offset = window.innerHeight - this.$refs.root.getBoundingClientRect().top - 340;
+                if (offset >= 0) {
+                    this.topOffset = '35px';
+                } else {
+                    this.topOffset = 35 + offset > 35 ? '35px' : `${35 + offset}px`;
+                }
+                this.open = true;
+            },
             pick(c) {
                 this.change(this.rgbaString);
             },

From 327fb09973945bb74a058acb6e329e7dcb1dc5d0 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 28 Feb 2018 08:58:50 +0200
Subject: [PATCH 5/6] Remove pointer-events if no changes

---
 client/src/ui/components/bd/modals/SettingsModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/ui/components/bd/modals/SettingsModal.vue b/client/src/ui/components/bd/modals/SettingsModal.vue
index ef78bae4..8fb77862 100644
--- a/client/src/ui/components/bd/modals/SettingsModal.vue
+++ b/client/src/ui/components/bd/modals/SettingsModal.vue
@@ -12,7 +12,7 @@
     <div class="bd-settings-modal" :class="{'bd-edited': changed}">
         <Modal :headerText="modal.headertext" :close="modal.close" :class="{'bd-modal-out': modal.closing}">
             <SettingsPanel :settings="configCache" :schemes="modal.schemes" :change="settingChange" slot="body" class="bd-settings-modal-body" />
-            <div slot="footer" class="bd-footer-alert" :class="{'bd-active': changed, 'bd-warn': warnclose}">
+            <div slot="footer" class="bd-footer-alert" :class="{'bd-active': changed, 'bd-warn': warnclose}" :style="{pointerEvents: changed ? 'all' : 'none'}">
                 <div class="bd-footer-alert-text">Unsaved changes</div>
                 <div class="bd-button bd-reset-button bd-tp" :class="{'bd-disabled': saving}" @click="resetSettings">Reset</div>
                 <div class="bd-button bd-ok" :class="{'bd-disabled': saving}" @click="saveSettings">

From f4692c5e32baa6cb191e23bb8bda68ef2d65cb8e Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 28 Feb 2018 08:59:34 +0200
Subject: [PATCH 6/6] Move picker a bit more left

---
 client/src/styles/partials/generic/forms/colourpicker.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/styles/partials/generic/forms/colourpicker.scss b/client/src/styles/partials/generic/forms/colourpicker.scss
index 59fee4fb..b872c774 100644
--- a/client/src/styles/partials/generic/forms/colourpicker.scss
+++ b/client/src/styles/partials/generic/forms/colourpicker.scss
@@ -23,7 +23,7 @@
 
     .vc-chrome {
         position: absolute;
-        right: 10px;
+        right: 60px;
         top: 35px;
         border-radius: 3px;
         z-index: 9001;