Add support for disabled settings
This commit is contained in:
parent
eaa8d3a03a
commit
26fbac6bbc
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
props: ['setting', 'change'],
|
||||
methods: {
|
||||
toggle() {
|
||||
this.change(this.setting.id, !this.setting.value);
|
||||
this.change(!this.setting.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
props: ['setting', 'change'],
|
||||
methods: {
|
||||
input(e) {
|
||||
this.change(this.setting.id, e.target.textContent);
|
||||
this.change(e.target.textContent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
},
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
props: ['setting', 'change'],
|
||||
methods: {
|
||||
selectOption(option) {
|
||||
this.change(this.setting.id, option.id);
|
||||
this.change(option.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
props: ['setting', 'change'],
|
||||
methods: {
|
||||
input(e) {
|
||||
this.change(this.setting.id, e.target.value);
|
||||
this.change(e.target.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue