From 5165094a1b45a916c8b0e7742da53bd7df5043f0 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Mon, 5 Feb 2018 01:14:28 +0200
Subject: [PATCH] Set the divider colour for changed settings to green

---
 client/src/styles/partials/generic/forms.scss  |  4 ++++
 .../ui/components/bd/PluginSettingsModal.vue   | 18 ++++++++++++------
 .../bd/pluginsetting/PluginSetting.vue         |  5 +++--
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/client/src/styles/partials/generic/forms.scss b/client/src/styles/partials/generic/forms.scss
index 8f26c36a..4502c810 100644
--- a/client/src/styles/partials/generic/forms.scss
+++ b/client/src/styles/partials/generic/forms.scss
@@ -43,6 +43,10 @@
     font-size: 12px;
 }
 
+.bd-form-item-changed .bd-form-divider {
+    background: $colok;
+}
+
 .bd-form-divider {
     height: 1px;
     margin: 15px 0;
diff --git a/client/src/ui/components/bd/PluginSettingsModal.vue b/client/src/ui/components/bd/PluginSettingsModal.vue
index e00246a8..b2e26dfe 100644
--- a/client/src/ui/components/bd/PluginSettingsModal.vue
+++ b/client/src/ui/components/bd/PluginSettingsModal.vue
@@ -15,19 +15,19 @@
             <div slot="body" class="bd-plugin-settings-body">
                 <template v-for="category in configCache">
                     <div v-if="category.category === 'default' || !category.type">
-                        <PluginSetting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="settingChange" />
+                        <PluginSetting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="settingChange" :changed="setting.changed"/>
                     </div>
                     <div v-else-if="category.type === 'static'">
                         <div class="bd-form-header">
                             <span class="bd-form-header-text">{{category.category}} static with header</span>
                         </div>
-                        <PluginSetting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="settingChange" />
+                        <PluginSetting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="settingChange" :changed="setting.changed"/>
                     </div>
                     <Drawer v-else-if="category.type === 'drawer'" :label="category.category + ' drawer'">
-                        <PluginSetting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="settingChange" />
+                        <PluginSetting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="settingChange" :changed="setting.changed"/>
                     </Drawer>
                     <div v-else>
-                        <PluginSetting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="settingChange" />
+                        <PluginSetting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="settingChange" :changed="setting.changed"/>
                     </div>
                 </template>
 
@@ -69,13 +69,17 @@
         },
         methods: {
             checkForChanges() {
+                let changed = false;
                 for (let category of this.configCache) {
                     const cat = this.plugin.pluginConfig.find(c => c.category === category.category);
                     for (let setting of category.settings) {
-                        if (cat.settings.find(s => s.id === setting.id).value !== setting.value) return true;
+                        if (cat.settings.find(s => s.id === setting.id).value !== setting.value) {
+                            changed = true;
+                            setting.changed = true;
+                        }
                     }
                 }
-                return false;
+                return changed;
             },
             settingChange(settingId, newValue) {
                 for (let category of this.configCache) {
@@ -86,6 +90,7 @@
                     }
                 }
                 this.changed = this.checkForChanges();
+                this.$forceUpdate();
             },
             async saveSettings() {
                 if (this.saving) return;
@@ -104,6 +109,7 @@
                 if (this.saving) return;
                 this.configCache = JSON.parse(JSON.stringify(this.plugin.pluginConfig));
                 this.changed = false;
+                this.$forceUpdate();
             },
             attemptToClose(e) {
                 if (!this.changed) {
diff --git a/client/src/ui/components/bd/pluginsetting/PluginSetting.vue b/client/src/ui/components/bd/pluginsetting/PluginSetting.vue
index b79b2307..a79113aa 100644
--- a/client/src/ui/components/bd/pluginsetting/PluginSetting.vue
+++ b/client/src/ui/components/bd/pluginsetting/PluginSetting.vue
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <div class="bd-form-item">
+    <div class="bd-form-item" :class="{'bd-form-item-changed': changed}">
         <BoolSetting v-if="setting.type === 'bool'" :setting="setting" :change="change"/>
         <DropdownSetting v-if="setting.type === 'dropdown'" :setting="setting" :change="change"/>
         <NumberSetting v-if="setting.type === 'number'" :setting="setting" :change="change"/>
@@ -31,7 +31,8 @@
     export default {
         props: [
             'setting',
-            'change'
+            'change',
+            'changed'
         ],
         components: {
             BoolSetting,