From 42ecf6327523a365d486fe7e764810f2fc586e14 Mon Sep 17 00:00:00 2001
From: sbs20 <sam.strachan@gmail.com>
Date: Wed, 5 May 2021 13:08:37 +0100
Subject: [PATCH] Improve colour selection #231

---
 webui/src/components/Settings.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/webui/src/components/Settings.vue b/webui/src/components/Settings.vue
index 24c77b41..18e30f3f 100644
--- a/webui/src/components/Settings.vue
+++ b/webui/src/components/Settings.vue
@@ -20,8 +20,20 @@
           </template>
           <template v-slot:action>
             <div style="max-width: 10rem;">
-              <v-select :label="$t('settings.color')" v-model="settings.appColor" @change="reload"
-                 :items="colors" item-text="text" item-value="value"></v-select>
+              <v-menu offset-y>
+                <template v-slot:activator="{ on, attrs }">
+                  <v-btn v-bind="attrs" v-on="on">{{ $t('settings.color') }}</v-btn>
+                </template>
+                <v-list>
+                  <v-list-item v-for="item in colors" :key="item.value"
+                    style="min-height: 36px;"
+                    @click="settings.appColor = item.value; reload()">
+                    <v-list-item-content class="pl-2 pt-1 pb-1 pr-2" :class="item.value">
+                      {{ item.text }}
+                    </v-list-item-content>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
             </div>
           </template>
         </settings-item>