Move plugin/theme settings modals to the modal manager

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;
+                return Modals.pluginSettings(plugin);
-            },
-            closeSettings() {
-                this.settingsOpen = null;
             }
         }
     }
-
 </script>

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;
+                return Modals.themeSettings(theme);
-            },
-            closeSettings() {
-                this.settingsOpen = null;
             }
         }
     }
-
 </script>

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': modal.closing}">
-        <Modal :headerText="plugin.name + ' Settings'" :close="attemptToClose" :class="{'bd-modal-out': 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 { Modal } from '../../common';
-    import SettingsPanel from './SettingsPanel.vue';
+    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;
                 }

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': modal.closing}">
-        <Modal :headerText="theme.name + ' Settings'" :close="attemptToClose" :class="{'bd-modal-out': 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 { Modal } from '../../common';
-    import SettingsPanel from './SettingsPanel.vue';
+    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;
                 }

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 = []);
     }