Add support for disabled settings

client/src/styles/partials/generic/forms/main.scss

@@ -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;
+        }
+    }
 }

client/src/ui/components/bd/SettingsPanel.vue

@@ -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) {
+            settingChange(category, setting, value) {
-                for (let category of this.settings) {
+                if (setting.disabled) return;
-                    let setting = category.settings.find(s => s.id === setting_id);
+                this.change(category.category, setting.id, value);
-                    if (!setting) continue;
-
-                    this.change(category.category, setting_id, value);
-                }
-
-                this.$forceUpdate();
             }
         }
     }

client/src/ui/components/bd/setting/Bool.vue

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

client/src/ui/components/bd/setting/Dropdown.vue

@@ -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() {

client/src/ui/components/bd/setting/File.vue

@@ -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);

client/src/ui/components/bd/setting/Multiline.vue

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

client/src/ui/components/bd/setting/Number.vue

@@ -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
         },

client/src/ui/components/bd/setting/Radio.vue

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

client/src/ui/components/bd/setting/Setting.vue

@@ -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;
             }
         }
     }

client/src/ui/components/bd/setting/Slider.vue

@@ -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));

client/src/ui/components/bd/setting/String.vue

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