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