From 3168012fde581a29dfd62b95a6e0f6371a39c887 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Fri, 2 Mar 2018 19:34:53 +0000
Subject: [PATCH] Fix internal settings

---
 client/src/modules/settings.js                | 38 ++++++++++---------
 client/src/ui/components/BdSettings.vue       | 12 ++----
 client/src/ui/components/bd/SettingsPanel.vue | 14 ++-----
 .../ui/components/bd/modals/SettingsModal.vue |  2 +-
 .../src/ui/components/bd/setting/Setting.vue  | 11 ++++--
 5 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/client/src/modules/settings.js b/client/src/modules/settings.js
index b3273e74..d863cc7b 100644
--- a/client/src/modules/settings.js
+++ b/client/src/modules/settings.js
@@ -16,8 +16,12 @@ import { Utils, FileUtils, ClientLogger as Logger } from 'common';
 import { SettingsSet, SettingUpdatedEvent } from 'structs';
 import path from 'path';
 
-export default class {
-    static async loadSettings() {
+export default new class Settings {
+    constructor() {
+        this.settings = [];
+    }
+
+    async loadSettings() {
         try {
             await FileUtils.ensureDirectory(this.dataPath);
 
@@ -51,13 +55,13 @@ export default class {
         }
     }
 
-    static async saveSettings() {
+    async saveSettings() {
         try {
             await FileUtils.ensureDirectory(this.dataPath);
 
             const settingsPath = path.resolve(this.dataPath, 'user.settings.json');
             await FileUtils.writeJsonToFile(settingsPath, {
-                settings: this.getSettings.map(set => set.strip()),
+                settings: this.settings.map(set => set.strip()),
                 scss: CssEditor.scss,
                 css_editor_bounds: {
                     width: CssEditor.editor_bounds.width,
@@ -77,48 +81,48 @@ export default class {
         }
     }
 
-    static getSet(set_id) {
+    getSet(set_id) {
         return this.getSettings.find(s => s.id === set_id);
     }
 
-    static get core() { return this.getSet('core') }
-    static get ui() { return this.getSet('ui') }
-    static get emotes() { return this.getSet('emotes') }
-    static get security() { return this.getSet('security') }
+    get core() { return this.getSet('core') }
+    get ui() { return this.getSet('ui') }
+    get emotes() { return this.getSet('emotes') }
+    get security() { return this.getSet('security') }
 
-    static getCategory(set_id, category_id) {
+    getCategory(set_id, category_id) {
         const set = this.getSet(set_id);
         return set ? set.getCategory(category_id) : undefined;
     }
 
-    static getSetting(set_id, category_id, setting_id) {
+    getSetting(set_id, category_id, setting_id) {
         const set = this.getSet(set_id);
         return set ? set.getSetting(category_id, setting_id) : undefined;
     }
 
-    static get(set_id, category_id, setting_id) {
+    get(set_id, category_id, setting_id) {
         const set = this.getSet(set_id);
         return set ? set.get(category_id, setting_id) : undefined;
     }
 
-    static async mergeSettings(set_id, newSettings) {
+    async mergeSettings(set_id, newSettings) {
         const set = this.getSet(set_id);
         if (!set) return;
 
         return await set.merge(newSettings);
     }
 
-    static setSetting(set_id, category_id, setting_id, value) {
+    setSetting(set_id, category_id, setting_id, value) {
         const setting = this.getSetting(set_id, category_id, setting_id);
         if (!setting) throw {message: `Tried to set ${set_id}/${category_id}/${setting_id}, which doesn't exist`};
         setting.value = value;
     }
 
-    static get getSettings() {
-        return this.settings ? this.settings : defaultSettings;
+    get getSettings() {
+        return this.settings;
     }
 
-    static get dataPath() {
+    get dataPath() {
         return this._dataPath ? this._dataPath : (this._dataPath = Globals.getObject('paths').find(p => p.id === 'data').path);
     }
 }
diff --git a/client/src/ui/components/BdSettings.vue b/client/src/ui/components/BdSettings.vue
index 22aed78e..fcc97a92 100644
--- a/client/src/ui/components/BdSettings.vue
+++ b/client/src/ui/components/BdSettings.vue
@@ -31,9 +31,9 @@
                 </div>
             </div>
             <ContentColumn slot="content">
-                <div v-for="set in settings" v-if="activeContent(set.id) || animatingContent(set.id)" :class="{active: activeContent(set.id), animating: animatingContent(set.id)}">
+                <div v-for="set in Settings.settings" v-if="activeContent(set.id) || animatingContent(set.id)" :class="{active: activeContent(set.id), animating: animatingContent(set.id)}">
                     <SettingsWrapper :headertext="set.headertext">
-                        <SettingsPanel :settings="set.settings" :schemes="set.schemes" :change="(c, s, v) => changeSetting(set.id, c, s, v)" />
+                        <SettingsPanel :settings="set" :schemes="set.schemes" />
                     </SettingsWrapper>
                 </div>
                 <div v-if="activeContent('css') || animatingContent('css')" :class="{active: activeContent('css'), animating: animatingContent('css')}">
@@ -77,8 +77,8 @@
                 lastActiveIndex: -1,
                 animating: false,
                 first: true,
-                settings: Settings.getSettings
-            }
+                Settings
+            };
         },
         props: ['active', 'close'],
         components: {
@@ -109,10 +109,6 @@
                 const item = this.sidebarItems.find(item => item.contentid === s);
                 return item && item.id === this.lastActiveIndex;
             },
-            changeSetting(set_id, category_id, setting_id, value) {
-                Settings.setSetting(set_id, category_id, setting_id, value);
-                Settings.saveSettings();
-            },
             openGithub() {
                 shell.openExternal('https://github.com/JsSucks/BetterDiscordApp');
             },
diff --git a/client/src/ui/components/bd/SettingsPanel.vue b/client/src/ui/components/bd/SettingsPanel.vue
index 5eb86bed..d9576e91 100644
--- a/client/src/ui/components/bd/SettingsPanel.vue
+++ b/client/src/ui/components/bd/SettingsPanel.vue
@@ -26,19 +26,19 @@
             <template v-for="category in settings.categories">
                 <div class="bd-settings-category">
                     <div v-if="category.category === 'default' || !category.type">
-                        <Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="v => settingChange(category, setting, v)" />
+                        <Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" />
                     </div>
                     <div class="bd-settings-static" v-else-if="category.type === 'static'">
                         <div class="bd-form-header">
                             <span class="bd-form-header-text">{{ category.category_name }}</span>
                         </div>
-                        <Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="v => settingChange(category, setting, v)" />
+                        <Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" />
                     </div>
                     <Drawer v-else-if="category.type === 'drawer'" :label="category.category_name">
-                        <Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="v => settingChange(category, setting, v)" />
+                        <Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" />
                     </Drawer>
                     <div v-else>
-                        <Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="v => settingChange(category, setting, v)" />
+                        <Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" />
                     </div>
                 </div>
             </template>
@@ -57,12 +57,6 @@
         components: {
             Setting,
             Drawer
-        },
-        methods: {
-            settingChange(category, setting, value) {
-                if (setting.disabled) return;
-                setting.value = value;
-            }
         }
     }
 </script>
diff --git a/client/src/ui/components/bd/modals/SettingsModal.vue b/client/src/ui/components/bd/modals/SettingsModal.vue
index a9b64520..e0376ca3 100644
--- a/client/src/ui/components/bd/modals/SettingsModal.vue
+++ b/client/src/ui/components/bd/modals/SettingsModal.vue
@@ -12,7 +12,7 @@
     <div class="bd-settings-modal" :class="{'bd-edited': changed}">
         <Modal :headerText="modal.headertext" :close="modal.close" :class="{'bd-modal-out': modal.closing}">
             <SettingsPanel :settings="settings" :schemes="modal.schemes" slot="body" class="bd-settings-modal-body" />
-            <div slot="footer" class="bd-footer-alert" :class="{'bd-active': changed, 'bd-warn': warnclose}" :style="{pointerEvents: changed ? 'all' : 'none'}">
+            <div slot="footer" class="bd-footer-alert" :class="{'bd-active': changed || saving, 'bd-warn': warnclose}" :style="{pointerEvents: changed ? 'all' : 'none'}">
                 <div class="bd-footer-alert-text">Unsaved changes</div>
                 <div class="bd-button bd-reset-button bd-tp" :class="{'bd-disabled': saving}" @click="resetSettings">Reset</div>
                 <div class="bd-button bd-ok" :class="{'bd-disabled': saving}" @click="saveSettings">
diff --git a/client/src/ui/components/bd/setting/Setting.vue b/client/src/ui/components/bd/setting/Setting.vue
index 3b196d27..4132f44d 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, 'bd-disabled': disabled, 'bd-form-item-noheader': !setting.text, 'bd-form-item-fullwidth': setting.fullwidth}">
+    <div class="bd-form-item" :class="{'bd-form-item-changed': setting.changed, 'bd-disabled': disabled, 'bd-form-item-noheader': !setting.text, 'bd-form-item-fullwidth': setting.fullwidth}">
         <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"/>
@@ -40,8 +40,7 @@
 
     export default {
         props: [
-            'setting',
-            'change'
+            'setting'
         ],
         components: {
             BoolSetting,
@@ -63,6 +62,12 @@
             disabled() {
                 return this.setting.disabled || false;
             }
+        },
+        methods: {
+            change(value) {
+                if (this.disabled) return;
+                this.setting.value = value;
+            }
         }
     }
 </script>