Set the divider colour for changed settings to green

This commit is contained in:
Jiiks 2018-02-05 01:14:28 +02:00
parent 2da3fb95c2
commit 5165094a1b
3 changed files with 19 additions and 8 deletions

View File

@ -43,6 +43,10 @@
font-size: 12px; font-size: 12px;
} }
.bd-form-item-changed .bd-form-divider {
background: $colok;
}
.bd-form-divider { .bd-form-divider {
height: 1px; height: 1px;
margin: 15px 0; margin: 15px 0;

View File

@ -15,19 +15,19 @@
<div slot="body" class="bd-plugin-settings-body"> <div slot="body" class="bd-plugin-settings-body">
<template v-for="category in configCache"> <template v-for="category in configCache">
<div v-if="category.category === 'default' || !category.type"> <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>
<div v-else-if="category.type === 'static'"> <div v-else-if="category.type === 'static'">
<div class="bd-form-header"> <div class="bd-form-header">
<span class="bd-form-header-text">{{category.category}} static with header</span> <span class="bd-form-header-text">{{category.category}} static with header</span>
</div> </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> </div>
<Drawer v-else-if="category.type === 'drawer'" :label="category.category + ' drawer'"> <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> </Drawer>
<div v-else> <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> </div>
</template> </template>
@ -69,13 +69,17 @@
}, },
methods: { methods: {
checkForChanges() { checkForChanges() {
let changed = false;
for (let category of this.configCache) { for (let category of this.configCache) {
const cat = this.plugin.pluginConfig.find(c => c.category === category.category); const cat = this.plugin.pluginConfig.find(c => c.category === category.category);
for (let setting of category.settings) { 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) { settingChange(settingId, newValue) {
for (let category of this.configCache) { for (let category of this.configCache) {
@ -86,6 +90,7 @@
} }
} }
this.changed = this.checkForChanges(); this.changed = this.checkForChanges();
this.$forceUpdate();
}, },
async saveSettings() { async saveSettings() {
if (this.saving) return; if (this.saving) return;
@ -104,6 +109,7 @@
if (this.saving) return; if (this.saving) return;
this.configCache = JSON.parse(JSON.stringify(this.plugin.pluginConfig)); this.configCache = JSON.parse(JSON.stringify(this.plugin.pluginConfig));
this.changed = false; this.changed = false;
this.$forceUpdate();
}, },
attemptToClose(e) { attemptToClose(e) {
if (!this.changed) { if (!this.changed) {

View File

@ -9,7 +9,7 @@
*/ */
<template> <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"/> <BoolSetting v-if="setting.type === 'bool'" :setting="setting" :change="change"/>
<DropdownSetting v-if="setting.type === 'dropdown'" :setting="setting" :change="change"/> <DropdownSetting v-if="setting.type === 'dropdown'" :setting="setting" :change="change"/>
<NumberSetting v-if="setting.type === 'number'" :setting="setting" :change="change"/> <NumberSetting v-if="setting.type === 'number'" :setting="setting" :change="change"/>
@ -31,7 +31,8 @@
export default { export default {
props: [ props: [
'setting', 'setting',
'change' 'change',
'changed'
], ],
components: { components: {
BoolSetting, BoolSetting,