From 64ac3677b116320f11a4a183f03aa83c2503064f Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Tue, 13 Feb 2018 16:44:07 +0000
Subject: [PATCH 01/10] Add modal manager

---
 client/src/modules/contentmanager.js          |  5 +-
 .../src/styles/partials/generic/modals.scss   | 13 ++++
 client/src/ui/components/bd/BdModals.vue      | 66 +++++++------------
 .../ui/components/bd/modals/BasicModal.vue    | 31 +++++++++
 .../ui/components/bd/modals/ErrorModal.vue    | 47 +++++++++++++
 client/src/ui/modals.js                       | 66 +++++++++++++++++++
 client/src/ui/ui.js                           |  1 +
 7 files changed, 186 insertions(+), 43 deletions(-)
 create mode 100644 client/src/ui/components/bd/modals/BasicModal.vue
 create mode 100644 client/src/ui/components/bd/modals/ErrorModal.vue
 create mode 100644 client/src/ui/modals.js

diff --git a/client/src/modules/contentmanager.js b/client/src/modules/contentmanager.js
index 0659d372..22afb863 100644
--- a/client/src/modules/contentmanager.js
+++ b/client/src/modules/contentmanager.js
@@ -13,6 +13,7 @@ import { FileUtils, ClientLogger as Logger } from 'common';
 import path from 'path';
 import { Events } from 'modules';
 import { Error } from 'structs';
+import { Modals } from 'ui';
 
 export default class {
 
@@ -48,8 +49,8 @@ export default class {
             }
 
             if (this.errors.length) {
-                Events.emit('bd-error', {
-                    header: `${this.moduleName} - one or more ${this.contentType}(s) failed to load`,
+                Modals.error({
+                    header: `${this.moduleName} - ${this.errors.length} ${this.contentType}${this.errors.length !== 1 ? 's' : ''} failed to load`,
                     module: this.moduleName,
                     type: 'err',
                     content: this.errors
diff --git a/client/src/styles/partials/generic/modals.scss b/client/src/styles/partials/generic/modals.scss
index 2ae89057..a2dca7ff 100644
--- a/client/src/styles/partials/generic/modals.scss
+++ b/client/src/styles/partials/generic/modals.scss
@@ -16,6 +16,19 @@
     }
 }
 
+.bd-modal-wrap {
+    transition: all 0.2s ease;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 9000;
+
+    .bd-modal-close-area {
+        width: 100%;
+        height: 100%;
+    }
+}
+
 .bd-modal {
     position: fixed;
     align-content: space-around;
diff --git a/client/src/ui/components/bd/BdModals.vue b/client/src/ui/components/bd/BdModals.vue
index 61e7995f..e95d9306 100644
--- a/client/src/ui/components/bd/BdModals.vue
+++ b/client/src/ui/components/bd/BdModals.vue
@@ -8,66 +8,50 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-
 <template>
     <div class="bd-modals-container">
-        <div v-for="(modal, index) in modals" :key="`bd-modal-${index}`">
-            <div v-if="index === 0" class="bd-backdrop" @click="closeModal(index)"></div>
-            <div v-else :style="{opacity: 0}" class="bd-backdrop" @click="closeModal(index)"></div>
-            <Modal :headerText="modal.header" 
-                   :close="() => closeModal(index)" 
-                   :class="[{'bd-err': modal.type && modal.type === 'err'}, {'bd-modal-out': modal.closing}]">
-                    <MiError v-if="modal.type === 'err'" slot="icon" size="20"/>
-                <div slot="body">
-                    <div v-for="(content, index) in modal.content">
-                        <ErrorModal v-if="content._type === 'err'" :content="content" :hideStack="hideStack" :showStack="showStack"/>
-                    </div>
-                </div>
-                <div slot="footer" class="bd-modal-controls">
-                    <span class="bd-modal-tip">Ctrl+Shift+I for more details</span>
-                    <div class="bd-button bd-ok" @click="closeModal(index)">
-                        OK
-                    </div>
-                </div>
-            </Modal>
+        <div v-for="(modal, index) in modals.stack" :key="`bd-modal-${index}`">
+            <div class="bd-backdrop" :class="{'bd-backdrop-out': modal.closing}" :style="{opacity: index === 0 ? undefined : 0}"></div>
+            <div class="bd-modal-wrap" :style="{transform: `scale(${downscale(index + 1)})`, opacity: downscale(index + 1)}">
+                <div class="bd-modal-close-area" @click="closeModal(modal)"></div>
+                <component :is="modal.component" />
+            </div>
         </div>
     </div>
 </template>
 <script>
     // Imports
     import { Events } from 'modules';
+    import { Modals } from 'ui';
     import { Modal } from '../common';
     import { MiError } from '../common/MaterialIcon';
-    import ErrorModal from '../common/ErrorModal.vue';
+    import ErrorModal from './modals/ErrorModal.vue';
 
     export default {
+        components: {
+            Modal, MiError
+        },
         data() {
             return {
-                modals: []
-            }
+                modals: Modals,
+                eventListener: null
+            };
         },
-        components: {
-            Modal, MiError, ErrorModal
-        },
-        beforeMount() {
-            Events.on('bd-error', e => {
-                e.closing = false;
-                this.modals.push(e);
-                console.log(this.modals);
+        created() {
+            console.log(this);
+            Events.on('bd-refresh-modals', this.eventListener = () => {
+                this.$forceUpdate();
             });
         },
+        destroyed() {
+            if (this.eventListener) Events.off('bd-refresh-modals', this.eventListener);
+        },
         methods: {
-            closeModal(index) {
-                this.modals[index].closing = true;
-                setTimeout(() => {
-                    this.modals.splice(index, 1);
-                }, 200);
+            closeModal(modal) {
+                modal.close();
             },
-            showStack(error) {
-                error.showStack = true;
-            },
-            hideStack(error) {
-                error.showStack = false;
+            downscale(index) {
+                return 1 - ((this.modals.stack.filter(m => !m.closing).length - index) * 0.2);
             }
         }
     }
diff --git a/client/src/ui/components/bd/modals/BasicModal.vue b/client/src/ui/components/bd/modals/BasicModal.vue
new file mode 100644
index 00000000..8d113e45
--- /dev/null
+++ b/client/src/ui/components/bd/modals/BasicModal.vue
@@ -0,0 +1,31 @@
+/**
+ * BetterDiscord Basic Modal Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <Modal :class="{'bd-modal-out': modal.closing}" :headerText="modal.title" :close="modal.close">
+        <div slot="body">{{ modal.text }}</div>
+        <div slot="footer" class="bd-modal-controls">
+            <div class="bd-flex-grow"></div>
+            <div class="bd-button bd-ok" @click="modal.close">OK</div>
+        </div>
+    </Modal>
+</template>
+
+<script>
+    // Imports
+    import { Modal } from '../../common';
+
+    export default {
+        props: ['modal'],
+        components: {
+            Modal
+        }
+    }
+</script>
diff --git a/client/src/ui/components/bd/modals/ErrorModal.vue b/client/src/ui/components/bd/modals/ErrorModal.vue
new file mode 100644
index 00000000..8764248b
--- /dev/null
+++ b/client/src/ui/components/bd/modals/ErrorModal.vue
@@ -0,0 +1,47 @@
+<template>
+    <Modal :headerText="modal.event.header" :close="modal.close"
+           :class="[{'bd-err': modal.event.type && modal.event.type === 'err'}, {'bd-modal-out': modal.closing}]">
+        <MiError v-if="modal.event.type === 'err'" slot="icon" size="20"/>
+        <div slot="body">
+            <div v-for="(content, index) in modal.event.content">
+                <div v-if="content._type === 'err'" class="bd-modal-error" :class="{'bd-open': content.showStack}">
+                    <div class="bd-modal-error-title bd-flex">
+                        <span class="bd-modal-title-text bd-flex-grow">{{content.message}}</span>
+                        <span class="bd-modal-titlelink" v-if="content.showStack" @click="() => { content.showStack = false; $forceUpdate(); }">Hide Stacktrace</span>
+                        <span class="bd-modal-titlelink" v-else @click="() => { content.showStack = true; $forceUpdate(); }">Show Stacktrace</span>
+                    </div>
+                    <div class="bd-scroller-wrap">
+                        <div class="bd-scroller">
+                            <div class="bd-modal-error-body"><span>{{content.err.message}}</span>
+                            {{content.stackTrace}}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div slot="footer" class="bd-modal-controls">
+            <span class="bd-modal-tip">Press {{ platformInspectorKey }} for more details</span>
+            <div class="bd-button bd-ok" @click="modal.close">OK</div>
+        </div>
+    </Modal>
+</template>
+
+<script>
+    // Imports
+    import { Modal } from '../../common';
+    import { MiError } from '../../common/MaterialIcon';
+
+    const process = window.require('process');
+
+    export default {
+        props: ['modal'],
+        components: {
+            Modal, MiError
+        },
+        computed: {
+            platformInspectorKey() {
+                return process.platform === 'darwin' ? 'Cmd+Option+I' : 'Ctrl+Shift+I';
+            }
+        }
+    }
+</script>
diff --git a/client/src/ui/modals.js b/client/src/ui/modals.js
new file mode 100644
index 00000000..7cbc1bc6
--- /dev/null
+++ b/client/src/ui/modals.js
@@ -0,0 +1,66 @@
+/**
+ * BetterDiscord Modals
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+import { FileUtils } from 'common';
+import { Events } from 'modules';
+import BasicModal from './components/bd/modals/BasicModal.vue';
+import ErrorModal from './components/bd/modals/ErrorModal.vue';
+
+export default class Modals {
+
+    static add(modal, component) {
+        modal.component = modal.component || {
+            template: '<custom-modal :modal="modal" />',
+            components: { 'custom-modal': component },
+            data() { return { modal }; },
+            created() { modal.vue = this; }
+        };
+        modal.closing = false;
+        modal.close = () => this.close(modal);
+
+        this.stack.push(modal);
+        Events.emit('bd-refresh-modals');
+        return modal;
+    }
+
+    static close(modal) {
+        return new Promise((resolve, reject) => {
+            modal.closing = true;
+            setTimeout(() => {
+                this._stack = this.stack.filter(m => m !== modal);
+                Events.emit('bd-refresh-modals');
+                resolve();
+            }, 200);
+        });
+    }
+
+    static closeAll() {
+        for (let modal of this.stack)
+            modal.close();
+    }
+
+    static closeLast() {
+        if (!this.stack.length) return;
+        this.stack[this.stack.length - 1].close();
+    }
+
+    static basic(title, text) {
+        return this.add({ title, text }, BasicModal);
+    }
+
+    static error(event) {
+        return this.add({ event }, ErrorModal);
+    }
+
+    static get stack() {
+        return this._stack ? this._stack : (this._stack = []);
+    }
+
+}
diff --git a/client/src/ui/ui.js b/client/src/ui/ui.js
index e17a542e..4a24e0cb 100644
--- a/client/src/ui/ui.js
+++ b/client/src/ui/ui.js
@@ -1,4 +1,5 @@
 export { default as DOM } from './dom';
 export { default as BdUI } from './bdui';
 export { default as VueInjector } from './vueinjector';
+export { default as Modals } from './modals';
 export { default as ProfileBadges } from './profilebadges';

From 8706e9ef0f9a47249fe5f6f5aa32f45738d37aa8 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Tue, 13 Feb 2018 16:57:05 +0000
Subject: [PATCH 02/10] Merge plugin/theme manager errors

---
 client/src/index.js                  |  8 +++++---
 client/src/modules/contentmanager.js |  6 +++---
 client/src/modules/pluginmanager.js  |  6 +++---
 client/src/modules/thememanager.js   | 12 ++++++++++--
 client/src/ui/modals.js              | 21 +++++++++++++++++++--
 5 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/client/src/index.js b/client/src/index.js
index 3eb55a0c..a2d778e7 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-import { DOM, BdUI } from 'ui';
+import { DOM, BdUI, Modals } from 'ui';
 import BdCss from './styles/index.scss';
 import { Events, CssEditor, Globals, PluginManager, ThemeManager, ModuleManager, WebpackModules, Settings } from 'modules';
 import { ClientLogger as Logger, ClientIPC } from 'common';
@@ -22,6 +22,7 @@ class BetterDiscord {
         window.events = Events;
         window.wpm = WebpackModules;
         window.bdsettings = Settings;
+        window.bdmodals = Modals;
         DOM.injectStyle(BdCss, 'bdmain');
         Events.on('global-ready', this.globalReady.bind(this));
     }
@@ -29,8 +30,9 @@ class BetterDiscord {
     async init() {
         await Settings.loadSettings();
         await ModuleManager.initModules();
-        await PluginManager.loadAllPlugins();
-        await ThemeManager.loadAllThemes();
+        await PluginManager.loadAllPlugins(true);
+        await ThemeManager.loadAllThemes(true);
+        Modals.showContentManagerErrors();
         Events.emit('ready');
         Events.emit('discord-ready');
     }
diff --git a/client/src/modules/contentmanager.js b/client/src/modules/contentmanager.js
index 22afb863..a4835847 100644
--- a/client/src/modules/contentmanager.js
+++ b/client/src/modules/contentmanager.js
@@ -29,7 +29,7 @@ export default class {
         return this._contentPath ? this._contentPath : (this._contentPath = Globals.getObject('paths').find(path => path.id === this.pathId).path);
     }
 
-    static async loadAllContent() {
+    static async loadAllContent(supressErrors) {
         try {
             await FileUtils.ensureDirectory(this.contentPath);
             const directories = await FileUtils.listDirectory(this.contentPath);
@@ -48,15 +48,15 @@ export default class {
                 }
             }
 
-            if (this.errors.length) {
+            if (this.errors.length && !supressErrors) {
                 Modals.error({
                     header: `${this.moduleName} - ${this.errors.length} ${this.contentType}${this.errors.length !== 1 ? 's' : ''} failed to load`,
                     module: this.moduleName,
                     type: 'err',
                     content: this.errors
                 });
+                this._errors = [];
             }
-            this._errors = [];
 
             return this.localContent;
         } catch (err) {
diff --git a/client/src/modules/pluginmanager.js b/client/src/modules/pluginmanager.js
index 1b640850..1cff6af5 100644
--- a/client/src/modules/pluginmanager.js
+++ b/client/src/modules/pluginmanager.js
@@ -52,15 +52,15 @@ export default class extends ContentManager {
     }
 
     static get moduleName() {
-        return 'PluginManager';
+        return 'Plugin Manager';
     }
 
     static get pathId() {
         return 'plugins';
     }
 
-    static async loadAllPlugins() {
-        const loadAll = await this.loadAllContent();
+    static async loadAllPlugins(supressErrors) {
+        const loadAll = await this.loadAllContent(supressErrors);
         this.localPlugins.forEach(plugin => {
             if (plugin.type === 'module') return;
             if (plugin.enabled) plugin.start();
diff --git a/client/src/modules/thememanager.js b/client/src/modules/thememanager.js
index 8cee8f98..b8bf9740 100644
--- a/client/src/modules/thememanager.js
+++ b/client/src/modules/thememanager.js
@@ -132,6 +132,14 @@ export default class ThemeManager extends ContentManager {
         return this.localContent;
     }
 
+    static get contentType() {
+        return 'theme';
+    }
+
+    static get moduleName() {
+        return 'Theme Manager';
+    }
+
     static get pathId() {
         return 'themes';
     }
@@ -195,11 +203,11 @@ export default class ThemeManager extends ContentManager {
         }
 
         if (typeof value === 'boolean' || typeof value === 'number') {
-            return `$${name}: ${value};`; 
+            return `$${name}: ${value};`;
         }
 
         if (typeof value === 'string') {
-            return `$${name}: ${setting.scss_raw ? value : `'${setting.value.replace(/\\/g, '\\\\').replace(/'/g, '\\\'')}'`};`; 
+            return `$${name}: ${setting.scss_raw ? value : `'${setting.value.replace(/\\/g, '\\\\').replace(/'/g, '\\\'')}'`};`;
         }
 
     }
diff --git a/client/src/ui/modals.js b/client/src/ui/modals.js
index 7cbc1bc6..8f1dd151 100644
--- a/client/src/ui/modals.js
+++ b/client/src/ui/modals.js
@@ -9,11 +9,11 @@
 */
 
 import { FileUtils } from 'common';
-import { Events } from 'modules';
+import { Events, PluginManager, ThemeManager } from 'modules';
 import BasicModal from './components/bd/modals/BasicModal.vue';
 import ErrorModal from './components/bd/modals/ErrorModal.vue';
 
-export default class Modals {
+export default class {
 
     static add(modal, component) {
         modal.component = modal.component || {
@@ -59,6 +59,23 @@ export default class Modals {
         return this.add({ event }, ErrorModal);
     }
 
+    static showContentManagerErrors() {
+        // Get any errors from PluginManager and ThemeManager
+        this.error({
+            header:
+                (PluginManager.errors.length && ThemeManager.errors.length ? '' :
+                (PluginManager.errors.length ? PluginManager.moduleName : ThemeManager.moduleName) + ' - ') +
+                (PluginManager.errors.length ? `${PluginManager.errors.length} ${PluginManager.contentType}${PluginManager.errors.length !== 1 ? 's' : ''}` : '') +
+                (PluginManager.errors.length && ThemeManager.errors.length ? ' and ' : '') +
+                (ThemeManager.errors.length ? `${ThemeManager.errors.length} ${ThemeManager.contentType}${ThemeManager.errors.length !== 1 ? 's' : ''}` : '') +
+                ' failed to load',
+            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)
+        });
+    }
+
     static get stack() {
         return this._stack ? this._stack : (this._stack = []);
     }

From 21a8554d6f7d25cc722f5b47ba963a10d2866681 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Tue, 13 Feb 2018 17:03:51 +0000
Subject: [PATCH 03/10] =?UTF-8?q?Change=20lower=20modals=E2=80=99=20opacit?=
 =?UTF-8?q?y?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/ui/components/bd/BdModals.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/ui/components/bd/BdModals.vue b/client/src/ui/components/bd/BdModals.vue
index e95d9306..95dbc461 100644
--- a/client/src/ui/components/bd/BdModals.vue
+++ b/client/src/ui/components/bd/BdModals.vue
@@ -12,7 +12,7 @@
     <div class="bd-modals-container">
         <div v-for="(modal, index) in modals.stack" :key="`bd-modal-${index}`">
             <div class="bd-backdrop" :class="{'bd-backdrop-out': modal.closing}" :style="{opacity: index === 0 ? undefined : 0}"></div>
-            <div class="bd-modal-wrap" :style="{transform: `scale(${downscale(index + 1)})`, opacity: downscale(index + 1)}">
+            <div class="bd-modal-wrap" :style="{transform: `scale(${downscale(index + 1)})`, opacity: downscale(index + 1) / 0.5 + 0.5}">
                 <div class="bd-modal-close-area" @click="closeModal(modal)"></div>
                 <component :is="modal.component" />
             </div>

From 3b66d320e8a5ebb12caa19e63c2ee7f770d974a1 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Tue, 13 Feb 2018 17:06:09 +0000
Subject: [PATCH 04/10] Move plugin/theme settings modals to the modal manager

---
 client/src/ui/components/bd/PluginsView.vue      | 12 +++---------
 client/src/ui/components/bd/ThemesView.vue       | 11 ++---------
 .../bd/{ => modals}/PluginSettingsModal.vue      | 16 +++++++++-------
 .../bd/{ => modals}/ThemeSettingsModal.vue       | 14 ++++++++------
 client/src/ui/modals.js                          | 10 ++++++++++
 5 files changed, 32 insertions(+), 31 deletions(-)
 rename client/src/ui/components/bd/{ => modals}/PluginSettingsModal.vue (92%)
 rename client/src/ui/components/bd/{ => modals}/ThemeSettingsModal.vue (92%)

diff --git a/client/src/ui/components/bd/PluginsView.vue b/client/src/ui/components/bd/PluginsView.vue
index 49eb7574..306bd84b 100644
--- a/client/src/ui/components/bd/PluginsView.vue
+++ b/client/src/ui/components/bd/PluginsView.vue
@@ -32,28 +32,26 @@
                 <div class="bd-spinner-2"></div>
             </div>
         </div>
-        <PluginSettingsModal v-if="settingsOpen !== null" :plugin="settingsOpen" :close="closeSettings" />
     </SettingsWrapper>
 </template>
 
 <script>
     // Imports
     import { PluginManager } from 'modules';
+    import { Modals } from 'ui';
     import { SettingsWrapper } from './';
     import PluginCard from './PluginCard.vue';
-    import PluginSettingsModal from './PluginSettingsModal.vue';
     import { MiRefresh } from '../common';
 
     export default {
         data() {
             return {
                 local: true,
-                settingsOpen: null,
                 localPlugins: PluginManager.localPlugins
             }
         },
         components: {
-            SettingsWrapper, PluginCard, PluginSettingsModal,
+            SettingsWrapper, PluginCard,
             MiRefresh
         },
         methods: {
@@ -91,12 +89,8 @@
                 })();
             },
             showSettings(plugin) {
-                this.settingsOpen = plugin;
-            },
-            closeSettings() {
-                this.settingsOpen = null;
+                return Modals.pluginSettings(plugin);
             }
         }
     }
-
 </script>
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index e4176e4f..c98f389b 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -32,29 +32,26 @@
                 <div class="bd-spinner-2"></div>
             </div>
         </div>
-        <ThemeSettingsModal v-if="settingsOpen !== null" :theme="settingsOpen" :close="closeSettings" />
     </SettingsWrapper>
 </template>
 
 <script>
     // Imports
     import { ThemeManager } from 'modules';
+    import { Modals } from 'ui';
     import { SettingsWrapper } from './';
     import { MiRefresh } from '../common';
-    import ThemeSettingsModal from './ThemeSettingsModal.vue';
     import ThemeCard from './ThemeCard.vue';
 
     export default {
         data() {
             return {
                 local: true,
-                settingsOpen: null,
                 localThemes: ThemeManager.localThemes
             }
         },
         components: {
             SettingsWrapper, ThemeCard,
-            ThemeSettingsModal,
             MiRefresh
         },
         methods: {
@@ -92,12 +89,8 @@
                 })();
             },
             showSettings(theme) {
-                this.settingsOpen = theme;
-            },
-            closeSettings() {
-                this.settingsOpen = null;
+                return Modals.themeSettings(theme);
             }
         }
     }
-
 </script>
diff --git a/client/src/ui/components/bd/PluginSettingsModal.vue b/client/src/ui/components/bd/modals/PluginSettingsModal.vue
similarity index 92%
rename from client/src/ui/components/bd/PluginSettingsModal.vue
rename to client/src/ui/components/bd/modals/PluginSettingsModal.vue
index 7fd96a94..779ce746 100644
--- a/client/src/ui/components/bd/PluginSettingsModal.vue
+++ b/client/src/ui/components/bd/modals/PluginSettingsModal.vue
@@ -10,8 +10,7 @@
 
 <template>
     <div class="bd-plugin-settings-modal" :class="{'bd-edited': changed}">
-        <div class="bd-backdrop" @click="attemptToClose" :class="{'bd-backdrop-out': closing}"></div>
-        <Modal :headerText="plugin.name + ' Settings'" :close="attemptToClose" :class="{'bd-modal-out': closing}">
+        <Modal :headerText="plugin.name + ' Settings'" :close="attemptToClose" :class="{'bd-modal-out': modal.closing}">
             <SettingsPanel :settings="configCache" :change="settingChange" slot="body" class="bd-plugin-settings-body" />
             <div slot="footer" class="bd-footer-alert" :class ="{'bd-active': changed, 'bd-warn': warnclose}">
                 <div class="bd-footer-alert-text">Unsaved changes</div>
@@ -27,11 +26,11 @@
 <script>
     // Imports
     import Vue from 'vue';
-    import { Modal } from '../common';
-    import SettingsPanel from './SettingsPanel.vue';
+    import { Modal } from '../../common';
+    import SettingsPanel from '../SettingsPanel.vue';
 
     export default {
-        props: ['plugin','close'],
+        props: ['modal'],
         data() {
             return {
                 changed: false,
@@ -43,7 +42,10 @@
         },
         components: {
             Modal,
-            SettingsPanel,
+            SettingsPanel
+        },
+        computed: {
+            plugin() { return this.modal.plugin; }
         },
         methods: {
             checkForChanges() {
@@ -96,7 +98,7 @@
                 if (!this.changed) {
                     this.closing = true;
                     setTimeout(() => {
-                        this.close();
+                        this.modal.close();
                     }, 200);
                     return;
                 }
diff --git a/client/src/ui/components/bd/ThemeSettingsModal.vue b/client/src/ui/components/bd/modals/ThemeSettingsModal.vue
similarity index 92%
rename from client/src/ui/components/bd/ThemeSettingsModal.vue
rename to client/src/ui/components/bd/modals/ThemeSettingsModal.vue
index 4322d009..b2d693aa 100644
--- a/client/src/ui/components/bd/ThemeSettingsModal.vue
+++ b/client/src/ui/components/bd/modals/ThemeSettingsModal.vue
@@ -10,8 +10,7 @@
 
 <template>
     <div class="bd-plugin-settings-modal" :class="{'bd-edited': changed}">
-        <div class="bd-backdrop" @click="attemptToClose" :class="{'bd-backdrop-out': closing}"></div>
-        <Modal :headerText="theme.name + ' Settings'" :close="attemptToClose" :class="{'bd-modal-out': closing}">
+        <Modal :headerText="theme.name + ' Settings'" :close="attemptToClose" :class="{'bd-modal-out': modal.closing}">
             <SettingsPanel :settings="configCache" :change="settingChange" slot="body" class="bd-plugin-settings-body" />
             <div slot="footer" class="bd-footer-alert" :class ="{'bd-active': changed, 'bd-warn': warnclose}">
                 <div class="bd-footer-alert-text">Unsaved changes</div>
@@ -27,11 +26,11 @@
 <script>
     // Imports
     import Vue from 'vue';
-    import { Modal } from '../common';
-    import SettingsPanel from './SettingsPanel.vue';
+    import { Modal } from '../../common';
+    import SettingsPanel from '../SettingsPanel.vue';
 
     export default {
-        props: ['theme', 'close'],
+        props: ['modal'],
         data() {
             return {
                 changed: false,
@@ -45,6 +44,9 @@
             Modal,
             SettingsPanel
         },
+        computed: {
+            theme() { return this.modal.theme; }
+        },
         methods: {
             checkForChanges() {
                 let changed = false;
@@ -96,7 +98,7 @@
                 if (!this.changed) {
                     this.closing = true;
                     setTimeout(() => {
-                        this.close();
+                        this.modal.close();
                     }, 200);
                     return;
                 }
diff --git a/client/src/ui/modals.js b/client/src/ui/modals.js
index 8f1dd151..fffab1d1 100644
--- a/client/src/ui/modals.js
+++ b/client/src/ui/modals.js
@@ -12,6 +12,8 @@ import { FileUtils } from 'common';
 import { Events, PluginManager, ThemeManager } from 'modules';
 import BasicModal from './components/bd/modals/BasicModal.vue';
 import ErrorModal from './components/bd/modals/ErrorModal.vue';
+import PluginSettingsModal from './components/bd/modals/PluginSettingsModal.vue';
+import ThemeSettingsModal from './components/bd/modals/ThemeSettingsModal.vue';
 
 export default class {
 
@@ -76,6 +78,14 @@ export default class {
         });
     }
 
+    static pluginSettings(plugin) {
+        return this.add({ plugin }, PluginSettingsModal);
+    }
+
+    static themeSettings(theme) {
+        return this.add({ theme }, ThemeSettingsModal);
+    }
+
     static get stack() {
         return this._stack ? this._stack : (this._stack = []);
     }

From 1f85d4d2f438b660602acfc872de6d97bfe82373 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Tue, 13 Feb 2018 17:07:51 +0000
Subject: [PATCH 05/10] Added Plugin/Theme.showSettingsModal

---
 client/src/modules/plugin.js       | 5 +++++
 client/src/modules/thememanager.js | 6 +++++-
 tests/plugins/Example/index.js     | 1 +
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/src/modules/plugin.js b/client/src/modules/plugin.js
index 4cf807d6..b07598d0 100644
--- a/client/src/modules/plugin.js
+++ b/client/src/modules/plugin.js
@@ -9,6 +9,7 @@
 */
 
 import { FileUtils } from 'common';
+import { Modals } from 'ui';
 
 export default class {
 
@@ -48,6 +49,10 @@ export default class {
         }
     }
 
+    showSettingsModal() {
+        return Modals.pluginSettings(this);
+    }
+
     async saveSettings(newSettings) {
         for (let category of newSettings) {
             const oldCategory = this.pluginConfig.find(c => c.category === category.category);
diff --git a/client/src/modules/thememanager.js b/client/src/modules/thememanager.js
index b8bf9740..b8250590 100644
--- a/client/src/modules/thememanager.js
+++ b/client/src/modules/thememanager.js
@@ -9,7 +9,7 @@
 */
 
 import ContentManager from './contentmanager';
-import { DOM } from 'ui';
+import { DOM, Modals } from 'ui';
 import { FileUtils, ClientIPC } from 'common';
 
 class Theme {
@@ -39,6 +39,10 @@ class Theme {
     get css() { return this.userConfig.css }
     get id() { return this.name.toLowerCase().replace(/\s+/g, '-') }
 
+    showSettingsModal() {
+        return Modals.themeSettings(this);
+    }
+
     async saveSettings(newSettings) {
         for (let category of newSettings) {
             const oldCategory = this.themeConfig.find(c => c.category === category.category);
diff --git a/tests/plugins/Example/index.js b/tests/plugins/Example/index.js
index 3b8464c5..832e106b 100644
--- a/tests/plugins/Example/index.js
+++ b/tests/plugins/Example/index.js
@@ -17,6 +17,7 @@ module.exports = (Plugin, Api, Vendor) => {
         onStop() {
             Events.unsubscribeAll();
             Logger.log('onStop');
+            console.log(this.showSettingsModal());
             return true;
         }
 

From 10abf0353fdd620c55ca983fdb71f4e1d02c230d Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Tue, 13 Feb 2018 17:09:50 +0000
Subject: [PATCH 06/10] Rename the tooltips container to bd-tooltips and move
 it above the settings and modals elements

---
 client/src/styles/partials/bdsettings/tooltips.scss | 2 +-
 client/src/ui/bdui.js                               | 2 +-
 client/src/ui/vue.js                                | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/tooltips.scss b/client/src/styles/partials/bdsettings/tooltips.scss
index 7b789799..982b7151 100644
--- a/client/src/styles/partials/bdsettings/tooltips.scss
+++ b/client/src/styles/partials/bdsettings/tooltips.scss
@@ -1,4 +1,4 @@
-bdtooltips {
+bd-tooltips {
     left: 0;
     position: absolute;
     right: 0;
diff --git a/client/src/ui/bdui.js b/client/src/ui/bdui.js
index e2671991..2f1fda2d 100644
--- a/client/src/ui/bdui.js
+++ b/client/src/ui/bdui.js
@@ -35,9 +35,9 @@ export default class {
     }
 
     static injectUi() {
-        DOM.createElement('bdtooltips').appendTo(DOM.bdBody);
         DOM.createElement('div', null, 'bd-settings').appendTo(DOM.bdBody);
         DOM.createElement('div', null, 'bd-modals').appendTo(DOM.bdModals);
+        DOM.createElement('bd-tooltips').appendTo(DOM.bdBody);
 
         const modals = new Vue({
             el: '#bd-modals',
diff --git a/client/src/ui/vue.js b/client/src/ui/vue.js
index df231c11..ecdc26b9 100644
--- a/client/src/ui/vue.js
+++ b/client/src/ui/vue.js
@@ -13,7 +13,7 @@ import Vue from 'vue';
 import VTooltip from 'v-tooltip';
 
 Vue.use(VTooltip, {
-    defaultContainer: 'bdtooltips',
+    defaultContainer: 'bd-tooltips',
     defaultClass: 'bd-tooltip',
     defaultTargetClass: 'bd-has-tooltip',
     defaultInnerSelector: '.bd-tooltip-inner',

From 21c70124e56dc25e3f353e24f6d932cb7f4176cd Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Tue, 13 Feb 2018 17:11:56 +0000
Subject: [PATCH 07/10] Bring back the logo animation on menu open/close

---
 client/src/styles/partials/bdsettings/button.scss   | 4 ++--
 client/src/styles/partials/bdsettings/tooltips.scss | 2 +-
 client/src/ui/components/BdSettings.vue             | 3 ---
 client/src/ui/components/BdSettingsWrapper.vue      | 2 +-
 4 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/button.scss b/client/src/styles/partials/bdsettings/button.scss
index 84f60112..3af9a8be 100644
--- a/client/src/styles/partials/bdsettings/button.scss
+++ b/client/src/styles/partials/bdsettings/button.scss
@@ -24,7 +24,7 @@
         background-position: center;
         width: 100%;
         height: 100%;
-        z-index: 3000;
+        z-index: 3001;
         cursor: pointer;
         filter: grayscale(100%);
         opacity: 0.5;
@@ -44,7 +44,7 @@
         background: transparent;
         opacity: 1;
         box-shadow: none;
-        z-index: 90000;
+        z-index: 3001;
 
         .bd-settings-button-btn {
             background-image: $logoBigBw;
diff --git a/client/src/styles/partials/bdsettings/tooltips.scss b/client/src/styles/partials/bdsettings/tooltips.scss
index 982b7151..0ec5e69f 100644
--- a/client/src/styles/partials/bdsettings/tooltips.scss
+++ b/client/src/styles/partials/bdsettings/tooltips.scss
@@ -3,7 +3,7 @@ bd-tooltips {
     position: absolute;
     right: 0;
     top: 0;
-    z-index: 9000;
+    z-index: 9001;
 }
 
 .bd-tooltip {
diff --git a/client/src/ui/components/BdSettings.vue b/client/src/ui/components/BdSettings.vue
index fd394fdf..986848b6 100644
--- a/client/src/ui/components/BdSettings.vue
+++ b/client/src/ui/components/BdSettings.vue
@@ -12,9 +12,6 @@
     <div class="bd-settings" :class="{active: active}" @keyup="close">
         <SidebarView :contentVisible="this.activeIndex >= 0" :animating="this.animating" :class="{'bd-stop': !first}">
             <Sidebar slot="sidebar">
-                <div class="bd-settings-button bd-active">
-                    <div class="bd-settings-button-btn"></div>
-                </div>
                 <div class="bd-settings-x" @click="close">
                     <MiClose size="17"/>
                     <span class="bd-x-text">ESC</span>
diff --git a/client/src/ui/components/BdSettingsWrapper.vue b/client/src/ui/components/BdSettingsWrapper.vue
index 0aab5cc4..0314e5cd 100644
--- a/client/src/ui/components/BdSettingsWrapper.vue
+++ b/client/src/ui/components/BdSettingsWrapper.vue
@@ -10,7 +10,7 @@
 
 <template>
     <div class="bd-settings-wrapper" :class="[{active: active}, 'platform-' + this.platform]">
-        <div class="bd-settings-button" @click="showSettings">
+        <div class="bd-settings-button" :class="{'bd-active': active}" @click="showSettings">
             <div class="bd-settings-button-btn" :class="[{'bd-loading': !loaded}]"></div>
         </div>
         <BdSettings :active="active" :close="hideSettings" />

From 2ec2df6efdf5f56b90e0e7937bfd79fe0f4e602b Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Tue, 13 Feb 2018 17:36:23 +0000
Subject: [PATCH 08/10] Tidy and tweak modal SCSS files

---
 .../bdsettings/plugin-settings-modal.scss     |   7 +
 .../styles/partials/generic/error-modal.scss  |  66 +++++++
 client/src/styles/partials/generic/index.scss |   1 +
 .../src/styles/partials/generic/modals.scss   | 175 ++++++------------
 4 files changed, 130 insertions(+), 119 deletions(-)
 create mode 100644 client/src/styles/partials/generic/error-modal.scss

diff --git a/client/src/styles/partials/bdsettings/plugin-settings-modal.scss b/client/src/styles/partials/bdsettings/plugin-settings-modal.scss
index aa4a5ad3..fd423cb0 100644
--- a/client/src/styles/partials/bdsettings/plugin-settings-modal.scss
+++ b/client/src/styles/partials/bdsettings/plugin-settings-modal.scss
@@ -11,6 +11,7 @@
 
     .bd-plugin-settings-body {
         padding: 0 15px;
+        margin: 0 0 74px;
 
         .bd-switch-wrapper {
             width: 40px;
@@ -22,4 +23,10 @@
             }
         }
     }
+
+    &.bd-edited {
+        .bd-scroller::-webkit-scrollbar-track {
+            margin-bottom: 74px;
+        }
+    }
 }
diff --git a/client/src/styles/partials/generic/error-modal.scss b/client/src/styles/partials/generic/error-modal.scss
new file mode 100644
index 00000000..4d3deade
--- /dev/null
+++ b/client/src/styles/partials/generic/error-modal.scss
@@ -0,0 +1,66 @@
+.bd-modal.bd-err {
+    .bd-modal-header .bd-modal-icon svg {
+        fill: $colerr;
+    }
+
+    .bd-modal-body {
+        padding-bottom: 15px;
+        min-height: 70px;
+    }
+}
+
+.bd-modal-error .bd-modal-error-title {
+    padding: 5px;
+    background: rgba(0,0,0,.3);
+    border-radius: 3px 3px 0 0;
+}
+
+.bd-modal-error {
+    margin-top: 5px;
+
+    .bd-scroller-wrap {
+        background: rgba(0,0,0,.2);
+
+        .bd-scroller {
+            overflow-x: auto;
+            padding: 0;
+
+            &::-webkit-scrollbar-corner {
+                background: transparent;
+            }
+        }
+    }
+}
+
+.bd-modal-error .bd-scroller-wrap {
+    opacity: 0;
+}
+
+.bd-modal-error.bd-open {
+    .bd-modal-error-body {
+        transform: scaleY(1) translateY(0%);
+        margin-top: 0%;
+        opacity: 1;
+        user-select: all;
+        span {
+            font-weight: 700;
+        }
+    }
+    .bd-scroller-wrap {
+        opacity: 1;
+    }
+}
+
+.bd-modal-error .bd-modal-error-body {
+    white-space: pre-wrap;
+    font-size: 12px;
+    font-family: 'Consolas';
+    padding: 0 5px;
+    border-radius: 3px;
+    max-height: 100px;
+    width: auto;
+    transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease;
+    transform: scaleY(0) translateY(0%);
+    margin-top: -50%;
+    opacity: 0;
+}
diff --git a/client/src/styles/partials/generic/index.scss b/client/src/styles/partials/generic/index.scss
index 8fda68bc..5b265ba3 100644
--- a/client/src/styles/partials/generic/index.scss
+++ b/client/src/styles/partials/generic/index.scss
@@ -5,4 +5,5 @@
 @import './forms/index.scss';
 @import './material-buttons.scss';
 @import './modals.scss';
+@import './error-modal.scss';
 @import './drawers.scss';
diff --git a/client/src/styles/partials/generic/modals.scss b/client/src/styles/partials/generic/modals.scss
index a2dca7ff..3764c4aa 100644
--- a/client/src/styles/partials/generic/modals.scss
+++ b/client/src/styles/partials/generic/modals.scss
@@ -57,60 +57,23 @@
         animation: bd-modal-out 0.22s ease;
     }
 
-    .bd-modal-header .bd-modal-icon .bd-material-design-icon {
-        margin-right: 5px;
-    }
-
-    &.bd-err {
-        .bd-modal-header .bd-modal-icon svg {
-            fill: $colerr;
-        }
-    }
-
-    .bd-modal-body .bd-scroller-wrap .bd-scroller {
-        color: #FFF;
-    }
-
-    .bd-modal-controls {
+    .bd-modal-inner {
+        background: #36393e;
+        contain: layout;
+        flex-direction: column;
+        pointer-events: auto;
+        -webkit-box-direction: normal;
+        -webkit-box-orient: vertical;
+        display: -webkit-box;
+        display: -ms-flexbox;
         display: flex;
-        padding: 15px;
-        border-top: 1px solid #4a4a4a;
-
-        .bd-modal-tip {
-            flex-grow: 1;
-            line-height: 26px;
-            color: #FFF;
-        }
-
-        .bd-button {
-            padding: 5px 10px;
-            border-radius: 3px;
-        }
+        flex-grow: 1;
+        border-radius: 4px;
+        max-height: 100%;
+        max-width: 500px;
+        width: 500px;
     }
-}
 
-.bd-modal .bd-modal-inner {
-    background: #36393e;
-    contain: layout;
-    flex-direction: column;
-    pointer-events: auto;
-    -webkit-box-direction: normal;
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    flex-grow: 1;
-    border-radius: 4px;
-    max-height: 100%;
-    max-width: 500px;
-    width: 500px;
-}
-
-.bd-modal .bd-modal-body {
-    display: flex;
-}
-
-.bd-modal {
     .bd-modal-header {
         display: flex;
         padding: 15px;
@@ -120,13 +83,17 @@
         transition: box-shadow .1s ease-out;
 
         .bd-modal-headertext {
-            color: #FFF;
+            color: #fff;
             font-weight: 700;
             flex-grow: 1;
             line-height: 18px;
             padding: 1px;
         }
 
+        .bd-modal-icon .bd-material-design-icon {
+            margin-right: 5px;
+        }
+
         .bd-modal-x {
             display: flex;
             width: 20px;
@@ -160,11 +127,45 @@
 
     .bd-modal-body {
         padding: 0 15px;
+        display: flex;
+
+        .bd-scroller-wrap .bd-scroller {
+            color: #fff;
+            margin: 0;
+            padding: 0;
+        }
+    }
+
+    .bd-modal-titlelink {
+        cursor: pointer;
+        color: $colbdblue;
+
+        &:hover {
+            text-decoration: underline;
+            color: lighten($colbdblue, 5%);
+        }
+    }
+
+    .bd-modal-controls {
+        display: flex;
+        padding: 15px;
+        border-top: 1px solid #4a4a4a;
+
+        .bd-modal-tip {
+            flex-grow: 1;
+            line-height: 26px;
+            color: #FFF;
+        }
+
+        .bd-button {
+            padding: 5px 10px;
+            border-radius: 3px;
+        }
     }
 
     .bd-modal-footer {
         .bd-footer-alert {
-            margin: 10px;
+            margin: -64px 10px 10px;
             height: 0;
             display: flex;
             background-color: rgba(32, 34, 37, 0.9);
@@ -175,6 +176,7 @@
             transform: translateY(100%);
             opacity: 0;
             transition: all .2s ease-in-out;
+            position: relative;
 
             &.bd-warn {
                 background-color: $colerr;
@@ -189,7 +191,7 @@
 
             .bd-footer-alert-text {
                 flex: 1 1 auto;
-                color: #FFF;
+                color: #fff;
                 font-weight: 700;
                 line-height: 34px;
             }
@@ -211,68 +213,3 @@
         }
     }
 }
-
-.bd-modal-error .bd-modal-error-title {
-    padding: 5px;
-    background: rgba(0,0,0,.3);
-    border-radius: 3px 3px 0 0;
-}
-
-.bd-modal-error {
-    margin-top: 5px;
-
-    .bd-scroller-wrap {
-        background: rgba(0,0,0,.2);
-
-        .bd-scroller {
-            overflow-x: auto;
-            padding: 0;
-
-            &::-webkit-scrollbar-corner {
-                background: transparent;
-            }
-        }
-    }
-}
-
-.bd-modal-error .bd-scroller-wrap {
-    opacity: 0;
-}
-
-.bd-modal-error.bd-open {
-    .bd-modal-error-body {
-        transform: scaleY(1) translateY(0%);
-        margin-top: 0%;
-        opacity: 1;
-        user-select: all;
-        span {
-            font-weight: 700;
-        }
-    }
-    .bd-scroller-wrap {
-        opacity: 1;
-    }
-}
-
-.bd-modal-error .bd-modal-error-body {
-    white-space: pre-wrap;
-    font-size: 12px;
-    font-family: 'Consolas';
-    padding: 0 5px;
-    border-radius: 3px;
-    max-height: 100px;
-    width: auto;
-    transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease;
-    transform: scaleY(0) translateY(0%);
-    margin-top: -50%;
-    opacity: 0;
-}
-
-.bd-modal-titlelink {
-    cursor: pointer;
-    color: $colbdblue;
-    &:hover {
-        text-decoration: underline;
-        color: lighten($colbdblue, 5%);
-    }
-}

From 98261a864d6a555d7f72c982b15c23214d2bc602 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Tue, 13 Feb 2018 17:37:05 +0000
Subject: [PATCH 09/10] Hide lower modals

---
 client/src/ui/components/bd/BdModals.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/ui/components/bd/BdModals.vue b/client/src/ui/components/bd/BdModals.vue
index 95dbc461..34a4bed8 100644
--- a/client/src/ui/components/bd/BdModals.vue
+++ b/client/src/ui/components/bd/BdModals.vue
@@ -12,7 +12,7 @@
     <div class="bd-modals-container">
         <div v-for="(modal, index) in modals.stack" :key="`bd-modal-${index}`">
             <div class="bd-backdrop" :class="{'bd-backdrop-out': modal.closing}" :style="{opacity: index === 0 ? undefined : 0}"></div>
-            <div class="bd-modal-wrap" :style="{transform: `scale(${downscale(index + 1)})`, opacity: downscale(index + 1) / 0.5 + 0.5}">
+            <div class="bd-modal-wrap" :style="{transform: `scale(${downscale(index + 1, 0.2)})`, opacity: downscale(index + 1, 1)}">
                 <div class="bd-modal-close-area" @click="closeModal(modal)"></div>
                 <component :is="modal.component" />
             </div>
@@ -50,8 +50,8 @@
             closeModal(modal) {
                 modal.close();
             },
-            downscale(index) {
-                return 1 - ((this.modals.stack.filter(m => !m.closing).length - index) * 0.2);
+            downscale(index, times) {
+                return 1 - ((this.modals.stack.filter(m => !m.closing).length - index) * times);
             }
         }
     }

From a965dc9515f46560595e86098aa5c43d6bc9d61e Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Tue, 13 Feb 2018 17:50:01 +0000
Subject: [PATCH 10/10] Tidy modal SCSS files

---
 client/src/styles/partials/generic/index.scss |   2 -
 .../src/styles/partials/generic/modals.scss   | 215 ------------------
 client/src/styles/partials/index.scss         |   1 +
 .../src/styles/partials/modals/backdrop.scss  |  17 ++
 .../styles/partials/modals/basic-modal.scss   |   5 +
 .../{generic => modals}/error-modal.scss      |   0
 .../styles/partials/modals/footer-alert.scss  |  49 ++++
 client/src/styles/partials/modals/header.scss |  50 ++++
 client/src/styles/partials/modals/index.scss  |   7 +
 client/src/styles/partials/modals/modals.scss |  96 ++++++++
 .../ui/components/bd/modals/BasicModal.vue    |   4 +-
 11 files changed, 227 insertions(+), 219 deletions(-)
 delete mode 100644 client/src/styles/partials/generic/modals.scss
 create mode 100644 client/src/styles/partials/modals/backdrop.scss
 create mode 100644 client/src/styles/partials/modals/basic-modal.scss
 rename client/src/styles/partials/{generic => modals}/error-modal.scss (100%)
 create mode 100644 client/src/styles/partials/modals/footer-alert.scss
 create mode 100644 client/src/styles/partials/modals/header.scss
 create mode 100644 client/src/styles/partials/modals/index.scss
 create mode 100644 client/src/styles/partials/modals/modals.scss

diff --git a/client/src/styles/partials/generic/index.scss b/client/src/styles/partials/generic/index.scss
index 5b265ba3..ba7972dc 100644
--- a/client/src/styles/partials/generic/index.scss
+++ b/client/src/styles/partials/generic/index.scss
@@ -4,6 +4,4 @@
 @import './forms.scss';
 @import './forms/index.scss';
 @import './material-buttons.scss';
-@import './modals.scss';
-@import './error-modal.scss';
 @import './drawers.scss';
diff --git a/client/src/styles/partials/generic/modals.scss b/client/src/styles/partials/generic/modals.scss
deleted file mode 100644
index 3764c4aa..00000000
--- a/client/src/styles/partials/generic/modals.scss
+++ /dev/null
@@ -1,215 +0,0 @@
-.bd-backdrop {
-    position: fixed;
-    right: 0px;
-    left: 0px;
-    top: 0px;
-    bottom: 0px;
-    background: #000;
-    opacity: .85;
-    padding: 20px;
-    z-index: 9000;
-    justify-content: center;
-
-    animation: bd-backdrop-in 0.22s ease;
-    &.bd-backdrop-out {
-        animation: bd-backdrop-out 0.22s ease;
-    }
-}
-
-.bd-modal-wrap {
-    transition: all 0.2s ease;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 9000;
-
-    .bd-modal-close-area {
-        width: 100%;
-        height: 100%;
-    }
-}
-
-.bd-modal {
-    position: fixed;
-    align-content: space-around;
-    display: flex;
-    border-radius: 8px;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    user-select: none;
-    padding: 60px;
-    transform: scale(1) translateZ(0px);
-    -webkit-box-direction: normal;
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    pointer-events: none;
-    z-index: 9001;
-    justify-content: center;
-    animation: bd-modal-in 0.22s ease;
-
-    &.bd-modal-out {
-        animation: bd-modal-out 0.22s ease;
-    }
-
-    .bd-modal-inner {
-        background: #36393e;
-        contain: layout;
-        flex-direction: column;
-        pointer-events: auto;
-        -webkit-box-direction: normal;
-        -webkit-box-orient: vertical;
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        flex-grow: 1;
-        border-radius: 4px;
-        max-height: 100%;
-        max-width: 500px;
-        width: 500px;
-    }
-
-    .bd-modal-header {
-        display: flex;
-        padding: 15px;
-        flex: 0 0;
-        -webkit-transition: -webkit-box-shadow .1s ease-out;
-        transition: -webkit-box-shadow .1s ease-out;
-        transition: box-shadow .1s ease-out;
-
-        .bd-modal-headertext {
-            color: #fff;
-            font-weight: 700;
-            flex-grow: 1;
-            line-height: 18px;
-            padding: 1px;
-        }
-
-        .bd-modal-icon .bd-material-design-icon {
-            margin-right: 5px;
-        }
-
-        .bd-modal-x {
-            display: flex;
-            width: 20px;
-            height: 20px;
-            border-radius: 3px;
-            cursor: pointer;
-            align-content: center;
-            justify-content: center;
-            align-items: center;
-            margin-left: -2px -2px -2px 10px;
-            padding: 2px;
-
-            .bd-material-design-icon {
-                fill: #ccc;
-            }
-
-            &:hover {
-                background: #2d2f34;
-
-                .bd-material-design-icon {
-                    fill: #fff;
-                }
-            }
-        }
-    }
-
-    &.bd-modal-scrolled .bd-modal-header {
-        -webkit-box-shadow: 0 1px 0 0 rgba(24,25,28,.3), 0 1px 2px 0 rgba(24,25,28,.3);
-        box-shadow: 0 1px 0 0 rgba(24,25,28,.3), 0 1px 2px 0 rgba(24,25,28,.3);
-    }
-
-    .bd-modal-body {
-        padding: 0 15px;
-        display: flex;
-
-        .bd-scroller-wrap .bd-scroller {
-            color: #fff;
-            margin: 0;
-            padding: 0;
-        }
-    }
-
-    .bd-modal-titlelink {
-        cursor: pointer;
-        color: $colbdblue;
-
-        &:hover {
-            text-decoration: underline;
-            color: lighten($colbdblue, 5%);
-        }
-    }
-
-    .bd-modal-controls {
-        display: flex;
-        padding: 15px;
-        border-top: 1px solid #4a4a4a;
-
-        .bd-modal-tip {
-            flex-grow: 1;
-            line-height: 26px;
-            color: #FFF;
-        }
-
-        .bd-button {
-            padding: 5px 10px;
-            border-radius: 3px;
-        }
-    }
-
-    .bd-modal-footer {
-        .bd-footer-alert {
-            margin: -64px 10px 10px;
-            height: 0;
-            display: flex;
-            background-color: rgba(32, 34, 37, 0.9);
-            box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
-            padding: 10px 10px 10px 16px;
-            overflow: hidden;
-            border-radius: 5px;
-            transform: translateY(100%);
-            opacity: 0;
-            transition: all .2s ease-in-out;
-            position: relative;
-
-            &.bd-warn {
-                background-color: $colerr;
-                animation: bd-warn-shake 0.4s;
-            }
-
-            &.bd-active {
-                height: auto;
-                opacity: 1;
-                transform: none;
-            }
-
-            .bd-footer-alert-text {
-                flex: 1 1 auto;
-                color: #fff;
-                font-weight: 700;
-                line-height: 34px;
-            }
-
-            .bd-button {
-                height: 30px;
-                border-radius: 3px;
-                padding: 2px 16px;
-
-                &.bd-tp {
-                    background: transparent;
-
-                    &:hover {
-                        text-decoration: underline;
-                        background: transparent;
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/client/src/styles/partials/index.scss b/client/src/styles/partials/index.scss
index dc07738d..bbe120da 100644
--- a/client/src/styles/partials/index.scss
+++ b/client/src/styles/partials/index.scss
@@ -6,6 +6,7 @@
 @import './sidebarview/index.scss';
 @import './bdsettings/index.scss';
 @import './generic/index.scss';
+@import './modals/index.scss';
 @import './profilebadges.scss';
 
 @import './discordoverrides.scss';
diff --git a/client/src/styles/partials/modals/backdrop.scss b/client/src/styles/partials/modals/backdrop.scss
new file mode 100644
index 00000000..207fa298
--- /dev/null
+++ b/client/src/styles/partials/modals/backdrop.scss
@@ -0,0 +1,17 @@
+.bd-backdrop {
+    position: fixed;
+    right: 0px;
+    left: 0px;
+    top: 0px;
+    bottom: 0px;
+    background: #000;
+    opacity: .85;
+    padding: 20px;
+    z-index: 9000;
+    justify-content: center;
+
+    animation: bd-backdrop-in 0.22s ease;
+    &.bd-backdrop-out {
+        animation: bd-backdrop-out 0.22s ease;
+    }
+}
diff --git a/client/src/styles/partials/modals/basic-modal.scss b/client/src/styles/partials/modals/basic-modal.scss
new file mode 100644
index 00000000..90ea3ca6
--- /dev/null
+++ b/client/src/styles/partials/modals/basic-modal.scss
@@ -0,0 +1,5 @@
+.bd-modal-basic {
+    .bd-modal-basic-body {
+        padding-bottom: 15px;
+    }
+}
diff --git a/client/src/styles/partials/generic/error-modal.scss b/client/src/styles/partials/modals/error-modal.scss
similarity index 100%
rename from client/src/styles/partials/generic/error-modal.scss
rename to client/src/styles/partials/modals/error-modal.scss
diff --git a/client/src/styles/partials/modals/footer-alert.scss b/client/src/styles/partials/modals/footer-alert.scss
new file mode 100644
index 00000000..a6b6140f
--- /dev/null
+++ b/client/src/styles/partials/modals/footer-alert.scss
@@ -0,0 +1,49 @@
+.bd-modal-footer {
+    .bd-footer-alert {
+        margin: -64px 10px 10px;
+        height: 0;
+        display: flex;
+        background-color: rgba(32, 34, 37, 0.9);
+        box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
+        padding: 10px 10px 10px 16px;
+        overflow: hidden;
+        border-radius: 5px;
+        transform: translateY(100%);
+        opacity: 0;
+        transition: all .2s ease-in-out;
+        position: relative;
+
+        &.bd-warn {
+            background-color: $colerr;
+            animation: bd-warn-shake 0.4s;
+        }
+
+        &.bd-active {
+            height: auto;
+            opacity: 1;
+            transform: none;
+        }
+
+        .bd-footer-alert-text {
+            flex: 1 1 auto;
+            color: #fff;
+            font-weight: 700;
+            line-height: 34px;
+        }
+
+        .bd-button {
+            height: 30px;
+            border-radius: 3px;
+            padding: 2px 16px;
+
+            &.bd-tp {
+                background: transparent;
+
+                &:hover {
+                    text-decoration: underline;
+                    background: transparent;
+                }
+            }
+        }
+    }
+}
diff --git a/client/src/styles/partials/modals/header.scss b/client/src/styles/partials/modals/header.scss
new file mode 100644
index 00000000..e832f837
--- /dev/null
+++ b/client/src/styles/partials/modals/header.scss
@@ -0,0 +1,50 @@
+.bd-modal-header {
+    display: flex;
+    padding: 15px;
+    flex: 0 0;
+    -webkit-transition: -webkit-box-shadow .1s ease-out;
+    transition: -webkit-box-shadow .1s ease-out;
+    transition: box-shadow .1s ease-out;
+
+    .bd-modal-headertext {
+        color: #fff;
+        font-weight: 700;
+        flex-grow: 1;
+        line-height: 18px;
+        padding: 1px;
+    }
+
+    .bd-modal-icon .bd-material-design-icon {
+        margin-right: 5px;
+    }
+
+    .bd-modal-x {
+        display: flex;
+        width: 20px;
+        height: 20px;
+        border-radius: 3px;
+        cursor: pointer;
+        align-content: center;
+        justify-content: center;
+        align-items: center;
+        margin-left: -2px -2px -2px 10px;
+        padding: 2px;
+
+        .bd-material-design-icon {
+            fill: #ccc;
+        }
+
+        &:hover {
+            background: #2d2f34;
+
+            .bd-material-design-icon {
+                fill: #fff;
+            }
+        }
+    }
+}
+
+.bd-modal-scrolled .bd-modal-header {
+    -webkit-box-shadow: 0 1px 0 0 rgba(24,25,28,.3), 0 1px 2px 0 rgba(24,25,28,.3);
+    box-shadow: 0 1px 0 0 rgba(24,25,28,.3), 0 1px 2px 0 rgba(24,25,28,.3);
+}
diff --git a/client/src/styles/partials/modals/index.scss b/client/src/styles/partials/modals/index.scss
new file mode 100644
index 00000000..e36ebd94
--- /dev/null
+++ b/client/src/styles/partials/modals/index.scss
@@ -0,0 +1,7 @@
+@import './backdrop.scss';
+@import './modals.scss';
+@import './header.scss';
+@import './footer-alert.scss';
+
+@import './basic-modal.scss';
+@import './error-modal.scss';
diff --git a/client/src/styles/partials/modals/modals.scss b/client/src/styles/partials/modals/modals.scss
new file mode 100644
index 00000000..0d7b2121
--- /dev/null
+++ b/client/src/styles/partials/modals/modals.scss
@@ -0,0 +1,96 @@
+.bd-modal-wrap {
+    transition: all 0.2s ease;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 9000;
+
+    .bd-modal-close-area {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.bd-modal {
+    position: fixed;
+    align-content: space-around;
+    display: flex;
+    border-radius: 8px;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    user-select: none;
+    padding: 60px;
+    transform: scale(1) translateZ(0px);
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    pointer-events: none;
+    z-index: 9001;
+    justify-content: center;
+    animation: bd-modal-in 0.22s ease;
+
+    &.bd-modal-out {
+        animation: bd-modal-out 0.22s ease;
+    }
+
+    .bd-modal-inner {
+        background: #36393e;
+        contain: layout;
+        flex-direction: column;
+        pointer-events: auto;
+        -webkit-box-direction: normal;
+        -webkit-box-orient: vertical;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        flex-grow: 1;
+        border-radius: 4px;
+        max-height: 100%;
+        max-width: 500px;
+        width: 500px;
+    }
+
+    .bd-modal-body {
+        padding: 0 15px;
+        display: flex;
+
+        .bd-scroller-wrap .bd-scroller {
+            color: #fff;
+            margin: 0;
+            padding: 0;
+        }
+    }
+
+    .bd-modal-titlelink {
+        cursor: pointer;
+        color: $colbdblue;
+
+        &:hover {
+            text-decoration: underline;
+            color: lighten($colbdblue, 5%);
+        }
+    }
+
+    .bd-modal-controls {
+        display: flex;
+        padding: 15px;
+        border-top: 1px solid #4a4a4a;
+
+        .bd-modal-tip {
+            flex-grow: 1;
+            line-height: 26px;
+            color: #FFF;
+        }
+
+        .bd-button {
+            padding: 5px 10px;
+            border-radius: 3px;
+        }
+    }
+}
diff --git a/client/src/ui/components/bd/modals/BasicModal.vue b/client/src/ui/components/bd/modals/BasicModal.vue
index 8d113e45..850d7dda 100644
--- a/client/src/ui/components/bd/modals/BasicModal.vue
+++ b/client/src/ui/components/bd/modals/BasicModal.vue
@@ -9,8 +9,8 @@
 */
 
 <template>
-    <Modal :class="{'bd-modal-out': modal.closing}" :headerText="modal.title" :close="modal.close">
-        <div slot="body">{{ modal.text }}</div>
+    <Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" :close="modal.close">
+        <div slot="body" class="bd-modal-basic-body">{{ modal.text }}</div>
         <div slot="footer" class="bd-modal-controls">
             <div class="bd-flex-grow"></div>
             <div class="bd-button bd-ok" @click="modal.close">OK</div>