From 9fb914fb702a13970dd164fc7ad4682ffeafc35c Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Wed, 14 Feb 2018 17:55:10 +0000
Subject: [PATCH 1/5] Add settings schemes

---
 client/src/modules/contentmanager.js          |  1 +
 client/src/modules/plugin.js                  |  1 +
 client/src/modules/theme.js                   |  1 +
 .../src/styles/partials/bdsettings/index.scss |  1 +
 .../partials/bdsettings/settings-schemes.scss | 47 ++++++++++
 client/src/ui/components/BdSettings.vue       |  2 +-
 client/src/ui/components/bd/SettingsPanel.vue | 87 +++++++++++++++----
 .../ui/components/bd/modals/SettingsModal.vue |  2 +-
 client/src/ui/modals.js                       |  8 +-
 tests/plugins/Depend Error Test/config.json   |  6 +-
 tests/plugins/Example 2/config.json           |  2 +-
 tests/plugins/Example 2/index.js              |  2 +-
 tests/themes/Example/config.json              | 82 +++++++++++++++--
 13 files changed, 206 insertions(+), 36 deletions(-)
 create mode 100644 client/src/styles/partials/bdsettings/settings-schemes.scss

diff --git a/client/src/modules/contentmanager.js b/client/src/modules/contentmanager.js
index c53bbaf1..2a806b68 100644
--- a/client/src/modules/contentmanager.js
+++ b/client/src/modules/contentmanager.js
@@ -173,6 +173,7 @@ export default class {
 
             const configs = {
                 defaultConfig: readConfig.defaultConfig,
+				schemes: readConfig.configSchemes,
                 userConfig
             }
 
diff --git a/client/src/modules/plugin.js b/client/src/modules/plugin.js
index 3c944897..0a4aa768 100644
--- a/client/src/modules/plugin.js
+++ b/client/src/modules/plugin.js
@@ -51,6 +51,7 @@ export default class Plugin {
     get main() { return this.__pluginInternals.main }
     get defaultConfig() { return this.configs.defaultConfig }
     get userConfig() { return this.configs.userConfig }
+    get configSchemes() { return this.configs.schemes }
     get id() { return this.info.id || this.name.replace(/[^a-zA-Z0-9-]/g, '-').replace(/--/g, '-') }
     get name() { return this.info.name }
     get authors() { return this.info.authors }
diff --git a/client/src/modules/theme.js b/client/src/modules/theme.js
index 34081010..2bfcb5f6 100644
--- a/client/src/modules/theme.js
+++ b/client/src/modules/theme.js
@@ -51,6 +51,7 @@ export default class Theme {
     get main() { return this.__themeInternals.main }
     get defaultConfig() { return this.configs.defaultConfig }
     get userConfig() { return this.configs.userConfig }
+    get configSchemes() { return this.configs.schemes }
     get id() { return this.info.id || this.name.toLowerCase().replace(/[^a-zA-Z0-9-]/g, '-').replace(/\s+/g, '-') }
     get name() { return this.info.name }
     get authors() { return this.info.authors }
diff --git a/client/src/styles/partials/bdsettings/index.scss b/client/src/styles/partials/bdsettings/index.scss
index 9b482385..258a9019 100644
--- a/client/src/styles/partials/bdsettings/index.scss
+++ b/client/src/styles/partials/bdsettings/index.scss
@@ -3,3 +3,4 @@
 @import './plugins.scss';
 @import './card.scss';
 @import './tooltips.scss';
+@import './settings-schemes.scss';
diff --git a/client/src/styles/partials/bdsettings/settings-schemes.scss b/client/src/styles/partials/bdsettings/settings-schemes.scss
new file mode 100644
index 00000000..8f664c21
--- /dev/null
+++ b/client/src/styles/partials/bdsettings/settings-schemes.scss
@@ -0,0 +1,47 @@
+.bd-settings-schemes {
+    margin-bottom: 15px;
+    border-bottom: 1px solid rgba(114, 118, 126, 0.3);
+
+    .bd-settings-schemes-container {
+        margin-right: -15px;
+    }
+}
+
+.bd-settings-scheme {
+    display: inline-block;
+    width: calc(33.3% - 15px);
+    margin: 0 15px 15px 0;
+    cursor: pointer;
+
+    .bd-settings-modal & {
+        width: calc(50% - 15px);
+
+        .bd-settings-scheme-icon {
+            height: 120px;
+        }
+    }
+
+    .bd-settings-scheme-icon {
+        box-sizing: border-box;
+        width: 100%;
+        height: 120px;
+        border: 2px solid $coldimwhite;
+        border-radius: 3px;
+        transition: border-color 0.2s ease;
+        margin-bottom: 15px;
+        background: center / cover no-repeat #2f3136;
+    }
+
+    .bd-settings-scheme-name {
+        font-weight: 500;
+        color: #f6f6f7;
+    }
+
+    &.bd-active {
+        cursor: default;
+
+        .bd-settings-scheme-icon {
+            border-color: $colbdblue;
+        }
+    }
+}
diff --git a/client/src/ui/components/BdSettings.vue b/client/src/ui/components/BdSettings.vue
index 986848b6..b3073676 100644
--- a/client/src/ui/components/BdSettings.vue
+++ b/client/src/ui/components/BdSettings.vue
@@ -33,7 +33,7 @@
             <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)}">
                     <SettingsWrapper :headertext="set.headertext">
-                        <SettingsPanel :settings="set.settings" :change="(c, s, v) => changeSetting(set.id, c, s, v)" />
+                        <SettingsPanel :settings="set.settings" :schemes="set.schemes" :change="(c, s, v) => changeSetting(set.id, c, s, v)" />
                     </SettingsWrapper>
                 </div>
                 <div v-if="activeContent('css') || animatingContent('css')" :class="{active: activeContent('css'), animating: animatingContent('css')}">
diff --git a/client/src/ui/components/bd/SettingsPanel.vue b/client/src/ui/components/bd/SettingsPanel.vue
index 2ed3b8f8..ae12ed73 100644
--- a/client/src/ui/components/bd/SettingsPanel.vue
+++ b/client/src/ui/components/bd/SettingsPanel.vue
@@ -9,39 +9,92 @@
 */
 
 <template>
-    <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="v => settingChange(category, setting, v)" />
+    <div class="bd-settings-panel">
+        <div class="bd-settings-schemes" v-if="schemes && schemes.length">
+            <div class="bd-settings-schemes-container">
+                <template v-for="scheme in schemes">
+                    <div class="bd-settings-scheme" :class="{'bd-active': checkSchemeActive(scheme)}" @click="() => setActiveScheme(scheme)">
+                        <div class="bd-settings-scheme-icon" :style="{'background-image': `url(&quot;${scheme.icon_url}&quot;)`}"></div>
+                        <div class="bd-settings-scheme-name">{{ scheme.name }}</div>
+                    </div>
+                </template>
             </div>
-            <div v-else-if="category.type === 'static'">
-                <div class="bd-form-header">
-                    <span class="bd-form-header-text">{{ category.category_name }}</span>
+        </div>
+
+        <div class="bd-settings-categories">
+            <template v-for="category in settings">
+                <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)" />
+                    </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)" />
+                    </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)" />
+                    </Drawer>
+                    <div v-else>
+                        <Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="v => settingChange(category, setting, v)" />
+                    </div>
                 </div>
-                <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_name">
-                <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="v => settingChange(category, setting, v)" />
-            </div>
-        </template>
+            </template>
+        </div>
     </div>
 </template>
 
 <script>
     // Imports
+    import { Utils } from 'common';
     import Setting from './setting/Setting.vue';
     import Drawer from '../common/Drawer.vue';
 
     export default {
-        props: ['settings', 'change'],
+        props: ['settings', 'schemes', 'change'],
         components: {
             Setting,
             Drawer
         },
+        data() {
+            return {
+                active_scheme: 'scheme-1'
+            };
+        },
         methods: {
+            checkSchemeActive(scheme) {
+                for (let schemeCategory of scheme.settings) {
+                    const category = this.settings.find(c => c.category === schemeCategory.category);
+                    if (!category) return false;
+
+                    for (let schemeSetting of schemeCategory.settings) {
+                        const setting = category.settings.find(s => s.id === schemeSetting.id);
+                        if (!setting || !Utils.compare(setting.value, schemeSetting.value)) return false;
+                    }
+                }
+
+                return true;
+            },
+            setActiveScheme(scheme) {
+                for (let schemeCategory of scheme.settings) {
+                    const category = this.settings.find(c => c.category === schemeCategory.category);
+                    if (!category) {
+                        console.err(`Category ${schemeCategory.category} does not exist`);
+                        continue;
+                    }
+
+                    for (let schemeSetting of schemeCategory.settings) {
+                        const setting = category.settings.find(s => s.id === schemeSetting.id);
+                        if (!setting) {
+                            console.err(`Setting ${schemeCategory.category}/${schemeSetting.id} does not exist`);
+                            continue;
+                        }
+
+                        this.change(category.category, setting.id, schemeSetting.value);
+                    }
+                }
+            },
             settingChange(category, setting, value) {
                 if (setting.disabled) return;
                 this.change(category.category, setting.id, value);
diff --git a/client/src/ui/components/bd/modals/SettingsModal.vue b/client/src/ui/components/bd/modals/SettingsModal.vue
index bdb69688..a907c8b2 100644
--- a/client/src/ui/components/bd/modals/SettingsModal.vue
+++ b/client/src/ui/components/bd/modals/SettingsModal.vue
@@ -11,7 +11,7 @@
 <template>
     <div class="bd-settings-modal" :class="{'bd-edited': changed}">
         <Modal :headerText="modal.headertext" :close="attemptToClose" :class="{'bd-modal-out': modal.closing}">
-            <SettingsPanel :settings="configCache" :change="settingChange" slot="body" class="bd-settings-modal-body" />
+            <SettingsPanel :settings="configCache" :schemes="modal.schemes" :change="settingChange" slot="body" class="bd-settings-modal-body" />
             <div slot="footer" class="bd-footer-alert" :class="{'bd-active': changed, 'bd-warn': warnclose}">
                 <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>
diff --git a/client/src/ui/modals.js b/client/src/ui/modals.js
index 4cd0e467..83c5016d 100644
--- a/client/src/ui/modals.js
+++ b/client/src/ui/modals.js
@@ -77,9 +77,9 @@ export default class {
         });
     }
 
-    static settings(headertext, settings, settingsUpdated, settingUpdated, saveSettings) {
+    static settings(headertext, settings, schemes, settingsUpdated, settingUpdated, saveSettings) {
         return this.add({
-            headertext, settings,
+            headertext, settings, schemes,
             saveSettings: saveSettings ? saveSettings : newSettings => {
                 const updatedSettings = [];
 
@@ -105,11 +105,11 @@ export default class {
     static internalSettings(set_id) {
         const set = Settings.getSet(set_id);
         if (!set) return;
-        return this.settings(set.headertext, set.settings, null, null, newSettings => Settings.mergeSettings(set.id, newSettings));
+        return this.settings(set.headertext, set.settings, set.schemes, null, null, newSettings => Settings.mergeSettings(set.id, newSettings));
     }
 
     static contentSettings(content) {
-        return this.settings(content.name + ' Settings', content.config, null, null, content.saveSettings.bind(content));
+        return this.settings(content.name + ' Settings', content.config, content.configSchemes, null, null, content.saveSettings.bind(content));
     }
 
     static get stack() {
diff --git a/tests/plugins/Depend Error Test/config.json b/tests/plugins/Depend Error Test/config.json
index 79cdbab9..39729839 100644
--- a/tests/plugins/Depend Error Test/config.json	
+++ b/tests/plugins/Depend Error Test/config.json	
@@ -8,9 +8,9 @@
         "icon": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg=="
     },
     "main": "index.js",
-    "type": "plugin", 
+    "type": "plugin",
     "dependencies": {
-        "Nonexistent Module": "1.0" 
-    }, 
+        "Nonexistent Module": "1.0"
+    },
     "defaultConfig": []
 }
diff --git a/tests/plugins/Example 2/config.json b/tests/plugins/Example 2/config.json
index 187277e8..b3d27f90 100644
--- a/tests/plugins/Example 2/config.json	
+++ b/tests/plugins/Example 2/config.json	
@@ -6,6 +6,6 @@
     "description": "Example Plugin 2 Description"
   },
     "main": "index.js",
-    "type":  "plugin", 
+    "type": "plugin",
     "defaultConfig": []
 }
\ No newline at end of file
diff --git a/tests/plugins/Example 2/index.js b/tests/plugins/Example 2/index.js
index a4c0f1ca..c601a557 100644
--- a/tests/plugins/Example 2/index.js	
+++ b/tests/plugins/Example 2/index.js	
@@ -16,4 +16,4 @@ module.exports = (Plugin, Api, Vendor) =>
         }
     }
 
-}
\ No newline at end of file
+};
diff --git a/tests/themes/Example/config.json b/tests/themes/Example/config.json
index abee3d28..cbe3df3a 100644
--- a/tests/themes/Example/config.json
+++ b/tests/themes/Example/config.json
@@ -48,17 +48,17 @@
                     "options": [
                         {
                             "id": "opt1",
-                            "text": "small", 
+                            "text": "small",
                             "value": "8px"
                         },
                         {
                             "id": "opt2",
-                            "text": "medium", 
+                            "text": "medium",
                             "value": "12px"
                         },
                         {
                             "id": "opt3",
-                            "text": "high", 
+                            "text": "high",
                             "value": "16px"
                         },
                         {
@@ -78,27 +78,27 @@
                         {
                             "id": "opt1",
                             "text": "red",
-                            "value": "red" 
+                            "value": "red"
                         },
                         {
                             "id": "opt2",
                             "text": "green",
-                            "value": "green" 
+                            "value": "green"
                         },
                         {
                             "id": "opt3",
                             "text": "blue",
-                            "value": "blue" 
+                            "value": "blue"
                         },
                         {
                             "id": "opt4",
                             "text": "orange",
-                            "value": "orange" 
+                            "value": "orange"
                         },
                         {
                             "id": "opt5",
                             "text": "white",
-                            "value": "white" 
+                            "value": "white"
                         }
                     ]
                 },
@@ -125,5 +125,71 @@
                 }
             ]
         }
+    ],
+    "configSchemes": [
+        {
+            "id": "scheme-1",
+            "name": "Test scheme",
+            "icon_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
+            "settings": [
+                {
+                    "category": "default",
+                    "settings": [
+                        {
+                            "id": "spanOpacity",
+                            "value": 1
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "id": "scheme-2",
+            "name": "Another test scheme",
+            "icon_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
+            "settings": [
+                {
+                    "category": "default",
+                    "settings": [
+                        {
+                            "id": "divBg",
+                            "type": "text",
+                            "value": "red",
+                            "text": "Primary colour",
+                            "hint": "A colour setting type would be nice here",
+                            "scss_raw": true
+                        },
+                        {
+                            "id": "spanOpacity",
+                            "value": 99
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "id": "scheme-3",
+            "name": "Final test scheme",
+            "icon_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
+            "settings": [
+                {
+                    "category": "default",
+                    "settings": [
+                        {
+                            "id": "divBg",
+                            "type": "text",
+                            "value": "transparent",
+                            "text": "Primary colour",
+                            "hint": "A colour setting type would be nice here",
+                            "scss_raw": true
+                        },
+                        {
+                            "id": "spanOpacity",
+                            "value": 50
+                        }
+                    ]
+                }
+            ]
+        }
     ]
 }

From bea87f5be8bdf8324b6e047c2c2eca2ec232b571 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Wed, 14 Feb 2018 18:03:10 +0000
Subject: [PATCH 2/5] Add scheme hints

---
 .../src/styles/partials/bdsettings/settings-schemes.scss | 9 +++++++++
 client/src/ui/components/bd/SettingsPanel.vue            | 3 ++-
 tests/themes/Example/config.json                         | 3 +++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/client/src/styles/partials/bdsettings/settings-schemes.scss b/client/src/styles/partials/bdsettings/settings-schemes.scss
index 8f664c21..b7cdf98b 100644
--- a/client/src/styles/partials/bdsettings/settings-schemes.scss
+++ b/client/src/styles/partials/bdsettings/settings-schemes.scss
@@ -12,6 +12,7 @@
     width: calc(33.3% - 15px);
     margin: 0 15px 15px 0;
     cursor: pointer;
+    vertical-align: top;
 
     .bd-settings-modal & {
         width: calc(50% - 15px);
@@ -37,6 +38,14 @@
         color: #f6f6f7;
     }
 
+    .bd-settings-scheme-hint {
+        flex: 1 1 auto;
+        color: #72767d;
+        font-size: 14px;
+        font-weight: 500;
+        margin-top: 10px;
+    }
+
     &.bd-active {
         cursor: default;
 
diff --git a/client/src/ui/components/bd/SettingsPanel.vue b/client/src/ui/components/bd/SettingsPanel.vue
index ae12ed73..ee20c27b 100644
--- a/client/src/ui/components/bd/SettingsPanel.vue
+++ b/client/src/ui/components/bd/SettingsPanel.vue
@@ -15,7 +15,8 @@
                 <template v-for="scheme in schemes">
                     <div class="bd-settings-scheme" :class="{'bd-active': checkSchemeActive(scheme)}" @click="() => setActiveScheme(scheme)">
                         <div class="bd-settings-scheme-icon" :style="{'background-image': `url(&quot;${scheme.icon_url}&quot;)`}"></div>
-                        <div class="bd-settings-scheme-name">{{ scheme.name }}</div>
+                        <div class="bd-settings-scheme-name" v-if="scheme.name">{{ scheme.name }}</div>
+                        <div class="bd-settings-scheme-hint" v-if="scheme.hint">{{ scheme.hint }}</div>
                     </div>
                 </template>
             </div>
diff --git a/tests/themes/Example/config.json b/tests/themes/Example/config.json
index cbe3df3a..7efd72ba 100644
--- a/tests/themes/Example/config.json
+++ b/tests/themes/Example/config.json
@@ -130,6 +130,7 @@
         {
             "id": "scheme-1",
             "name": "Test scheme",
+            "hint": "Sets the span border opacity to 1%.",
             "icon_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
             "settings": [
                 {
@@ -146,6 +147,7 @@
         {
             "id": "scheme-2",
             "name": "Another test scheme",
+            "hint": "Sets the primary colour to red and the span border opacity to 99%.",
             "icon_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
             "settings": [
                 {
@@ -170,6 +172,7 @@
         {
             "id": "scheme-3",
             "name": "Final test scheme",
+            "hint": "Sets the primary colour to transparent and the span border opacity to 50%.",
             "icon_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
             "settings": [
                 {

From c9d9feb63f791778bf05c149fcfe42f7af108beb Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Wed, 14 Feb 2018 18:14:46 +0000
Subject: [PATCH 3/5] Prevent modal close when settings have changed

---
 .../ui/components/bd/modals/SettingsModal.vue | 22 ++++++++-----------
 client/src/ui/modals.js                       | 11 +++++++++-
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/client/src/ui/components/bd/modals/SettingsModal.vue b/client/src/ui/components/bd/modals/SettingsModal.vue
index a907c8b2..85d25b22 100644
--- a/client/src/ui/components/bd/modals/SettingsModal.vue
+++ b/client/src/ui/components/bd/modals/SettingsModal.vue
@@ -10,7 +10,7 @@
 
 <template>
     <div class="bd-settings-modal" :class="{'bd-edited': changed}">
-        <Modal :headerText="modal.headertext" :close="attemptToClose" :class="{'bd-modal-out': modal.closing}">
+        <Modal :headerText="modal.headertext" :close="modal.close" :class="{'bd-modal-out': modal.closing}">
             <SettingsPanel :settings="configCache" :schemes="modal.schemes" :change="settingChange" slot="body" class="bd-settings-modal-body" />
             <div slot="footer" class="bd-footer-alert" :class="{'bd-active': changed, 'bd-warn': warnclose}">
                 <div class="bd-footer-alert-text">Unsaved changes</div>
@@ -91,19 +91,15 @@
                 this.configCache = JSON.parse(JSON.stringify(this.modal.settings));
                 this.changed = false;
                 this.$forceUpdate();
-            },
-            attemptToClose(e) {
-                if (!this.changed) {
-                    this.closing = true;
-                    setTimeout(() => {
-                        this.modal.close();
-                    }, 200);
-                    return;
+            }
+        },
+        created() {
+            this.modal.beforeClose = () => {
+                if (this.changed) {
+                    this.warnclose = true;
+                    setTimeout(() => this.warnclose = false, 400);
+                    return true;
                 }
-                this.warnclose = true;
-                setTimeout(() => {
-                    this.warnclose = false;
-                }, 400);
             }
         },
         beforeMount() {
diff --git a/client/src/ui/modals.js b/client/src/ui/modals.js
index 83c5016d..5362ca21 100644
--- a/client/src/ui/modals.js
+++ b/client/src/ui/modals.js
@@ -32,7 +32,16 @@ export default class {
     }
 
     static close(modal) {
-        return new Promise((resolve, reject) => {
+        return new Promise(async (resolve, reject) => {
+            if (modal.beforeClose) {
+                let beforeCloseResult = modal.beforeClose();
+                if (beforeCloseResult instanceof Promise)
+                    beforeCloseResult = await beforeCloseResult;
+
+                if (beforeCloseResult)
+                    return reject(beforeCloseResult);
+            }
+
             modal.closing = true;
             setTimeout(() => {
                 this._stack = this.stack.filter(m => m !== modal);

From a9d488b748cb5e4e1d1aebf1b8de2123530fcd5e Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Wed, 14 Feb 2018 18:19:20 +0000
Subject: [PATCH 4/5] Throw an error instead

---
 .../ui/components/bd/modals/SettingsModal.vue   |  6 +++---
 client/src/ui/modals.js                         | 17 ++++++++++-------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/client/src/ui/components/bd/modals/SettingsModal.vue b/client/src/ui/components/bd/modals/SettingsModal.vue
index 85d25b22..ef78bae4 100644
--- a/client/src/ui/components/bd/modals/SettingsModal.vue
+++ b/client/src/ui/components/bd/modals/SettingsModal.vue
@@ -94,11 +94,11 @@
             }
         },
         created() {
-            this.modal.beforeClose = () => {
-                if (this.changed) {
+            this.modal.beforeClose = force => {
+                if (this.changed && !force) {
                     this.warnclose = true;
                     setTimeout(() => this.warnclose = false, 400);
-                    return true;
+                    throw {message: 'Settings have been changed'};
                 }
             }
         },
diff --git a/client/src/ui/modals.js b/client/src/ui/modals.js
index 5362ca21..a29c1408 100644
--- a/client/src/ui/modals.js
+++ b/client/src/ui/modals.js
@@ -24,22 +24,25 @@ export default class {
             created() { modal.vue = this; }
         };
         modal.closing = false;
-        modal.close = () => this.close(modal);
+        modal.close = force => this.close(modal, force);
 
         this.stack.push(modal);
         Events.emit('bd-refresh-modals');
         return modal;
     }
 
-    static close(modal) {
+    static close(modal, force) {
         return new Promise(async (resolve, reject) => {
             if (modal.beforeClose) {
-                let beforeCloseResult = modal.beforeClose();
-                if (beforeCloseResult instanceof Promise)
-                    beforeCloseResult = await beforeCloseResult;
+                try {
+                    let beforeCloseResult = modal.beforeClose(force);
+                    if (beforeCloseResult instanceof Promise)
+                        beforeCloseResult = await beforeCloseResult;
 
-                if (beforeCloseResult)
-                    return reject(beforeCloseResult);
+                    if (beforeCloseResult && !force) return reject(beforeCloseResult);
+                } catch (err) {
+                    if (!force) return reject(err);
+                }
             }
 
             modal.closing = true;

From 0373d81199653fc2fedfe7b3ed9422c106668ded Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Wed, 14 Feb 2018 18:51:51 +0000
Subject: [PATCH 5/5] Fixed showing content manager error modal with no errors

---
 client/src/ui/modals.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/ui/modals.js b/client/src/ui/modals.js
index a29c1408..11afc72f 100644
--- a/client/src/ui/modals.js
+++ b/client/src/ui/modals.js
@@ -74,7 +74,8 @@ export default class {
 
     static showContentManagerErrors() {
         // Get any errors from PluginManager and ThemeManager
-        this.error({
+        const errors = ([]).concat(PluginManager.errors).concat(ThemeManager.errors);
+        if (errors.length) return this.error({
             header:
                 (PluginManager.errors.length && ThemeManager.errors.length ? '' :
                 (PluginManager.errors.length ? PluginManager.moduleName : ThemeManager.moduleName) + ' - ') +
@@ -85,7 +86,7 @@ export default class {
             module: (PluginManager.errors.length && ThemeManager.errors.length ? 'Content Manager' :
                     (PluginManager.errors.length ? PluginManager.moduleName : ThemeManager.moduleName)),
             type: 'err',
-            content: ([]).concat(PluginManager.errors).concat(ThemeManager.errors)
+            content: errors
         });
     }