Set the divider colour for changed settings to green
This commit is contained in:
parent
2da3fb95c2
commit
5165094a1b
|
@ -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;
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue