Add support for disabled settings

This commit is contained in:
Samuel Elliott 2018-02-12 17:54:16 +00:00
parent eaa8d3a03a
commit 26fbac6bbc
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
11 changed files with 32 additions and 25 deletions

View File

@ -28,4 +28,12 @@
line-height: 20px;
border-bottom: 0px solid rgba(114, 118, 126, 0.1);
}
.bd-disabled & {
opacity: 0.6;
&, input {
cursor: not-allowed !important;
}
}
}

View File

@ -12,19 +12,19 @@
<div>
<template v-for="category in settings">
<div v-if="category.category === 'default' || !category.type">
<Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="settingChange" />
<Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="v => settingChange(category, setting, v)" />
</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>
<Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="settingChange" />
<Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="v => settingChange(category, setting, v)" />
</div>
<Drawer v-else-if="category.type === 'drawer'" :label="category.category">
<Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="settingChange" />
<Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="v => settingChange(category, setting, v)" />
</Drawer>
<div v-else>
<Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="settingChange" />
<Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="v => settingChange(category, setting, v)" />
</div>
</template>
</div>
@ -42,15 +42,9 @@
Drawer
},
methods: {
settingChange(setting_id, value) {
for (let category of this.settings) {
let setting = category.settings.find(s => s.id === setting_id);
if (!setting) continue;
this.change(category.category, setting_id, value);
}
this.$forceUpdate();
settingChange(category, setting, value) {
if (setting.disabled) return;
this.change(category.category, setting.id, value);
}
}
}

View File

@ -25,7 +25,7 @@
props: ['setting', 'change'],
methods: {
toggle() {
this.change(this.setting.id, !this.setting.value);
this.change(!this.setting.value);
}
}
}

View File

@ -13,7 +13,7 @@
<div class="bd-title">
<h3>{{setting.text}}</h3>
<div class="bd-dropdown" :class="{'bd-active': active}">
<div class="bd-dropdown-current" @click="() => active = !active">
<div class="bd-dropdown-current" @click="() => active = !active && !setting.disabled">
<span class="bd-dropdown-text">{{getOptionText(setting.value)}}</span>
<span class="bd-dropdown-arrow-wrap">
<span class="bd-dropdown-arrow"></span>
@ -43,7 +43,7 @@
},
selectOption(option) {
this.active = false;
this.change(this.setting.id, option.id);
this.change(option.id);
}
},
mounted() {

View File

@ -12,7 +12,7 @@
<div class="bd-form-fileinput">
<div class="bd-title">
<h3>{{ setting.text }}</h3>
<button class="bd-button bd-button-primary" @click="openDialog">Select</button>
<button class="bd-button bd-button-primary" :class="{'bd-disabled': setting.disabled}" @click="openDialog">Select</button>
</div>
<div class="bd-hint">{{ setting.hint }}</div>
<div class="bd-selected-files">
@ -39,9 +39,11 @@
},
methods: {
async openDialog(e) {
if (this.setting.disabled) return;
const filenames = await ClientIPC.send('bd-native-open', this.setting.dialogOptions);
if (filenames)
this.change(this.setting.id, filenames);
this.change(filenames);
},
openItem(file_path) {
shell.openItem(file_path);

View File

@ -26,7 +26,7 @@
props: ['setting', 'change'],
methods: {
input(e) {
this.change(this.setting.id, e.target.textContent);
this.change(e.target.textContent);
}
}
}

View File

@ -31,11 +31,11 @@
let number = parseFloat(e.target.value)
if (Number.isNaN(number)) return;
this.change(this.setting.id, number);
this.change(number);
},
changeBy(positive) {
let step = this.setting.step == undefined ? 1 : this.settings.step;
this.change(this.setting.id, this.setting.value + (positive ? step : -step));
this.change(this.setting.value + (positive ? step : -step));
},
handleWheel() {} // No idea why this works but it does
},

View File

@ -30,7 +30,7 @@
props: ['setting', 'change'],
methods: {
selectOption(option) {
this.change(this.setting.id, option.id);
this.change(option.id);
}
}
}

View File

@ -9,7 +9,7 @@
*/
<template>
<div class="bd-form-item" :class="{'bd-form-item-changed': changed}">
<div class="bd-form-item" :class="{'bd-form-item-changed': changed, 'bd-disabled': disabled}">
<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"/>
@ -50,6 +50,9 @@
computed: {
changed() {
return this.setting.changed || false;
},
disabled() {
return this.setting.disabled || false;
}
}
}

View File

@ -43,7 +43,7 @@
input(e) {
let number = parseFloat(e.target.value);
if (Number.isNaN(number)) return;
this.change(this.setting.id, number);
this.change(number);
},
getPointPosition(value) {
return ((value || this.setting.value) - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0));

View File

@ -24,7 +24,7 @@
props: ['setting', 'change'],
methods: {
input(e) {
this.change(this.setting.id, e.target.value);
this.change(e.target.value);
}
}
}