Merge pull request #102 from JsSucks/error-modals

Modals

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/plugins/TimeStamps.js

@@ -0,0 +1,3 @@
+export default class {
+
+}

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/bdui.js

@@ -11,6 +11,7 @@
 import DOM from './dom';
 import Vue from './vue';
 import { BdSettingsWrapper } from './components';
+import BdModals from './components/bd/BdModals.vue';
 import { Events, WebpackModules } from 'modules';
 import { Utils } from 'common';
 
@@ -27,7 +28,6 @@ export default class {
                 });
             });
         }, 100);
-        
     }
 
     static get profilePopupModule() {
@@ -37,6 +37,14 @@ 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);
+
+        const modals = new Vue({
+            el: '#bd-modals',
+            components: { BdModals },
+            template: '<BdModals/>'
+        });
+
         const vueInstance = new Vue({
             el: '#bd-settings',
             components: { BdSettingsWrapper },

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

@@ -0,0 +1,64 @@
+/**
+ * BetterDiscord Modals 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>
+    <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">
+                    {{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>
+</template>
+<script>
+    // Imports
+    import { Events } from 'modules';
+    import { Modal } from '../common';
+    import { MiError } from '../common/MaterialIcon';
+
+    export default {
+        data() {
+            return {
+                modals: []
+            }
+        },
+        components: {
+            Modal, MiError
+        },
+        beforeMount() {
+            Events.on('bd-error', e => {
+                e.closing = false;
+                this.modals.push(e);
+            });
+        },
+        methods: {
+            closeModal(index) {
+                this.modals[index].closing = true;
+                setTimeout(() => {
+                    this.modals.splice(index, 1);
+                }, 200);
+            }
+        }
+    }
+</script>

client/src/ui/components/common/MaterialIcon.js

@@ -11,3 +11,4 @@ export { default as MiTwitterCircle } from './materialicons/TwitterCircle.vue';
 export { default as MiPlus } from './materialicons/Plus.vue';
 export { default as MiChevronDown } from './materialicons/ChevronDown.vue';
 export { default as MiExtension } from './materialicons/Extension.vue';
+export { default as MiError } from './materialicons/Error.vue';

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

@@ -12,6 +12,9 @@
     <div :class="['bd-modal', {'bd-modal-scrolled': scrolled}]">
         <div class="bd-modal-inner">
             <div class="bd-modal-header">
+                <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"/>

client/src/ui/components/common/materialicons/Error.vue

@@ -0,0 +1,27 @@
+/**
+ * BetterDiscord Material Design Icon
+ * 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.
+ *
+ * Material Design Icons
+ * Copyright (c) 2014 Google
+ * Apache 2.0 LICENSE
+ * https://www.apache.org/licenses/LICENSE-2.0.txt
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
+        </svg>
+    </span>
+</template>
+<script>
+    export default {
+        props: ['size']
+    }
+</script>

client/src/ui/dom.js

@@ -105,6 +105,9 @@ class DOM {
     static get bdTooltips() {
         return this.getElement('bd-tooltips') || this.createElement('bd-tooltips').appendTo(this.bdBody);
     }
+    static get bdModals() {
+        return this.getElement('bd-modals') || this.createElement('bd-modals').appendTo(this.bdBody);
+    }
 
     static getElement(e) {
         if (e instanceof BdNode) return e.element;

client/webpack.config.js

@@ -44,7 +44,8 @@ module.exports = {
             path.resolve('..', 'node_modules'),
             path.resolve('..', 'common', 'modules'),
             path.resolve('src', 'modules'),
-            path.resolve('src', 'ui')
+            path.resolve('src', 'ui'),
+            path.resolve('src', 'plugins')
         ]
     }
    /* resolve: {

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;