add modal footer, styling and error modal on plugin load fail

client/src/modules/contentmanager.js

@@ -11,6 +11,7 @@
 import Globals from './globals';
 import { FileUtils, ClientLogger as Logger } from 'common';
 import path from 'path';
+import { Events } from 'modules';
 
 export default class {
 
@@ -32,6 +33,11 @@ export default class {
                     await this.preloadContent(dir);
                 } catch (err) {
                     //We don't want every plugin/theme to fail loading when one does
+                    Events.emit('bd-error', {
+                        header: `${this.moduleName} - Failed to load plugin: ${dir}`,
+                        text: err.message,
+                        type: 'err'
+                    });
                     Logger.err(this.moduleName, err);
                 }
             }

client/src/modules/pluginmanager.js

@@ -11,6 +11,7 @@
 import ContentManager from './contentmanager';
 import Plugin from './plugin';
 import { ClientLogger as Logger } from 'common';
+import { Events } from 'modules';
 
 export default class extends ContentManager {
 

client/src/styles/partials/generic/modals.scss

@@ -43,6 +43,37 @@
     &.bd-modal-out {
         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 {
+        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 .bd-modal-inner {

client/src/ui/components/bd/BdModals.vue

@@ -6,7 +6,16 @@
             <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"/>
+                    <MiError v-if="modal.type === 'err'" slot="icon" size="20"/>
+                <div slot="body">
+                    {{modal.text}}
+                </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>
     </div>

client/src/ui/components/common/Modal.vue

@@ -12,7 +12,9 @@
     <div :class="['bd-modal', {'bd-modal-scrolled': scrolled}]">
         <div class="bd-modal-inner">
             <div class="bd-modal-header">
-                <slot name="icon"/>
+                <div class="bd-modal-icon">
+                    <slot name="icon" />
+                </div>
                 <span class="bd-modal-headertext">{{headerText}}</span>
                 <div class="bd-modal-x" @click="close">
                     <MiClose size="18"/>

tests/plugins/Example 2/index.js

@@ -1,4 +1,4 @@
-module.exports = (Plugin, Api, Vendor) => {
+module.exports = (Plugin, Api, Vendor) => 
 
     const { $, moment } = Vendor;
     const { Events } = Api;