From 26fbac6bbccafcf87f2a26d0ce1fdc577e2fc81e Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Mon, 12 Feb 2018 17:54:16 +0000
Subject: [PATCH] Add support for disabled settings

---
 .../styles/partials/generic/forms/main.scss   |  8 ++++++++
 client/src/ui/components/bd/SettingsPanel.vue | 20 +++++++------------
 client/src/ui/components/bd/setting/Bool.vue  |  2 +-
 .../src/ui/components/bd/setting/Dropdown.vue |  4 ++--
 client/src/ui/components/bd/setting/File.vue  |  6 ++++--
 .../ui/components/bd/setting/Multiline.vue    |  2 +-
 .../src/ui/components/bd/setting/Number.vue   |  4 ++--
 client/src/ui/components/bd/setting/Radio.vue |  2 +-
 .../src/ui/components/bd/setting/Setting.vue  |  5 ++++-
 .../src/ui/components/bd/setting/Slider.vue   |  2 +-
 .../src/ui/components/bd/setting/String.vue   |  2 +-
 11 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/client/src/styles/partials/generic/forms/main.scss b/client/src/styles/partials/generic/forms/main.scss
index 68f941a9..58e87a04 100644
--- a/client/src/styles/partials/generic/forms/main.scss
+++ b/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;
+        }
+    }
 }
diff --git a/client/src/ui/components/bd/SettingsPanel.vue b/client/src/ui/components/bd/SettingsPanel.vue
index 43808e3a..db52c33b 100644
--- a/client/src/ui/components/bd/SettingsPanel.vue
+++ b/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) {
-                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);
             }
         }
     }
diff --git a/client/src/ui/components/bd/setting/Bool.vue b/client/src/ui/components/bd/setting/Bool.vue
index 6a0b3cf0..5d370c9a 100644
--- a/client/src/ui/components/bd/setting/Bool.vue
+++ b/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);
             }
         }
     }
diff --git a/client/src/ui/components/bd/setting/Dropdown.vue b/client/src/ui/components/bd/setting/Dropdown.vue
index 7e38b0b6..9d2c366e 100644
--- a/client/src/ui/components/bd/setting/Dropdown.vue
+++ b/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() {
diff --git a/client/src/ui/components/bd/setting/File.vue b/client/src/ui/components/bd/setting/File.vue
index 08438930..4154b244 100644
--- a/client/src/ui/components/bd/setting/File.vue
+++ b/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);
diff --git a/client/src/ui/components/bd/setting/Multiline.vue b/client/src/ui/components/bd/setting/Multiline.vue
index 6ad087d7..a103e61a 100644
--- a/client/src/ui/components/bd/setting/Multiline.vue
+++ b/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);
             }
         }
     }
diff --git a/client/src/ui/components/bd/setting/Number.vue b/client/src/ui/components/bd/setting/Number.vue
index 9a1e1d66..a74e86ad 100644
--- a/client/src/ui/components/bd/setting/Number.vue
+++ b/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
         },
diff --git a/client/src/ui/components/bd/setting/Radio.vue b/client/src/ui/components/bd/setting/Radio.vue
index 9bc64e39..00c1d9fa 100644
--- a/client/src/ui/components/bd/setting/Radio.vue
+++ b/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);
             }
         }
     }
diff --git a/client/src/ui/components/bd/setting/Setting.vue b/client/src/ui/components/bd/setting/Setting.vue
index 1a17bdf7..9a2d320e 100644
--- a/client/src/ui/components/bd/setting/Setting.vue
+++ b/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;
             }
         }
     }
diff --git a/client/src/ui/components/bd/setting/Slider.vue b/client/src/ui/components/bd/setting/Slider.vue
index c22558c4..47e11f2e 100644
--- a/client/src/ui/components/bd/setting/Slider.vue
+++ b/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));
diff --git a/client/src/ui/components/bd/setting/String.vue b/client/src/ui/components/bd/setting/String.vue
index 79cac0dd..03209167 100644
--- a/client/src/ui/components/bd/setting/String.vue
+++ b/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);
             }
         }
     }