add error mi, event based modals

client/src/plugins/TimeStamps.js

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

client/src/plugins/index.js

@@ -0,0 +1 @@
+export TimeStamps from './TimeStamps.js';

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,43 @@
+<template>
+    <div class="bd-modals-container">
+        <div v-for="(modal, index) in modals" :key="`bd-modal-${index}`">
+            <div 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"/>
+            </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,7 @@
     <div :class="['bd-modal', {'bd-modal-scrolled': scrolled}]">
         <div class="bd-modal-inner">
             <div class="bd-modal-header">
+                <slot name="icon"/>
                 <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: {