add base for notifications. These should be used for things such as "update available" only

client/src/index.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-import { DOM, BdUI, BdMenu, Modals, Reflection, Toasts } from 'ui';
+import { DOM, BdUI, BdMenu, Modals, Reflection, Toasts, Notifications } from 'ui';
 import BdCss from './styles/index.scss';
 import { Events, CssEditor, Globals, Settings, Database, Updater, ModuleManager, PluginManager, ThemeManager, ExtModuleManager, Vendor, WebpackModules, Patcher, MonkeyPatch, ReactComponents, ReactHelpers, ReactAutoPatcher, DiscordApi, BdWebApi, Connectivity, Cache } from 'modules';
 import { ClientLogger as Logger, ClientIPC, Utils } from 'common';
@@ -27,7 +27,7 @@ class BetterDiscord {
         Logger.log('main', 'BetterDiscord starting');
 
         this._bd = {
-            DOM, BdUI, BdMenu, Modals, Reflection, Toasts,
+            DOM, BdUI, BdMenu, Modals, Reflection, Toasts, Notifications,
 
             Events, CssEditor, Globals, Settings, Database, Updater,
             ModuleManager, PluginManager, ThemeManager, ExtModuleManager,

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

@@ -12,3 +12,4 @@
 @import './layouts';
 @import './toasts';
 @import './badges';
+@import './notifications';

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

@@ -0,0 +1,77 @@
+.bd-notifications {
+    position: absolute;
+    left: -300px;
+    top: 0;
+    z-index: 900000;
+
+    .bd-notificationContainer {
+        position: relative;
+        background: rgb(54, 57, 63);
+        width: 280px;
+        height: 130px;
+        top: 30px;
+        border-radius: 2px;
+        box-shadow: 1px 1px 15px #000;
+        animation: bd-notif-slidein 1s reverse;
+
+        .bd-notificationHeader {
+            height: 24px;
+            border-bottom: 1px solid #484b51;
+
+            .bd-notificationDismissBtn {
+                cursor: pointer;
+                border-right: 1px solid #484b51;
+
+                &:hover {
+                    background: rgba(0, 0, 0, .1);
+                }
+
+                .bd-materialDesignIcon {
+                    fill: #fff;
+                    display: flex;
+                    height: 24px;
+                }
+            }
+        }
+
+        .bd-notificationBody {
+            padding: 10px;
+
+            .bd-notificationText {
+                color: #FFF;
+            }
+        }
+
+        &.bd-active {
+            animation: bd-notif-slidein 1s forwards;
+        }
+
+        &.bd-closing {
+            animation: bd-notif-slideout .5s;
+        }
+    }
+}
+
+@keyframes bd-notif-slidein {
+    0% {
+        transform: translatex(0);
+    }
+
+    50% {
+        transform: translatex(315px);
+    }
+
+    100% {
+        transform: translatex(305px);
+    }
+}
+
+@keyframes bd-notif-slideout {
+    0% {
+        transform: translatex(305px);
+    }
+
+    100% {
+        transform: translatex(0);
+    }
+}

client/src/ui/bdui.js

@@ -12,7 +12,7 @@ import { Events, DiscordApi, Settings } from 'modules';
 import { remote } from 'electron';
 import DOM from './dom';
 import Vue from './vue';
-import { BdSettingsWrapper, BdModals, BdToasts } from './components';
+import { BdSettingsWrapper, BdModals, BdToasts, BdNotifications } from './components';
 
 export default class {
 
@@ -52,6 +52,7 @@ export default class {
         DOM.createElement('div', null, 'bd-settings').appendTo(DOM.bdBody);
         DOM.createElement('div', null, 'bd-modals').appendTo(DOM.bdModals);
         DOM.createElement('div', null, 'bd-toasts').appendTo(DOM.bdToasts);
+        DOM.createElement('div', null, 'bd-notifications').appendTo(DOM.bdNotifications);
         DOM.createElement('bd-tooltips').appendTo(DOM.bdBody);
 
         this.toasts = new (Vue.extend(BdToasts))({
@@ -66,6 +67,10 @@ export default class {
             el: '#bd-settings'
         });
 
+        this.notifications = new (Vue.extend(BdNotifications))({
+            el: '#bd-notifications'
+        });
+
         return this.vueInstance;
     }
 

client/src/ui/components/BdNotifications.vue

@@ -0,0 +1,49 @@
+/**
+ * BetterDiscord Notifications 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-notifications">
+        <div v-if="notifications.length" class="bd-notificationContainer bd-flex bd-flexCol bd-active" :class="{'bd-closing': dismissing}">
+            <div class="bd-notificationHeader bd-flex">
+                <div @click="this.dismissFirst" class="bd-notificationDismissBtn"><MiArrowLeft/></div>
+            </div>
+            <div class="bd-notificationBody bd-flex">
+                <div class="bd-notificationText">{{notifications[0].text}}</div>
+            </div>
+            <div class="bd-notificationFooter bd-flex"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    // Imports
+    import { Notifications } from 'ui';
+    import { MiArrowLeft } from './common';
+
+    export default {
+        data() {
+            return {
+                notifications: Notifications.stack,
+                dismissing: false
+            };
+        },
+        components: { MiArrowLeft },
+        methods: {
+            dismissFirst() {
+                if (this.dismissing) return;
+                this.dismissing = true;
+                setTimeout(() => {
+                    Notifications.dismiss(0);
+                    this.dismissing = false;
+                }, 500);
+            }
+        }
+    }
+</script>

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

@@ -20,3 +20,4 @@ export { default as MiSuccess } from './materialicons/Success.vue';
 export { default as AccountCircle } from './materialicons/AccountCircle.vue';
 export { default as MiLock } from './materialicons/Lock.vue';
 export { default as MiImagePlus } from './materialicons/ImagePlus.vue';
+export { default as MiArrowLeft } from './materialicons/ArrowLeft.vue';

client/src/ui/components/common/materialicons/ArrowLeft.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-materialDesignIcon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+            <path stroke-linejoin="round" d="M 20,11L 20,13L 7.98958,13L 13.4948,18.5052L 12.0806,19.9194L 4.16116,12L 12.0806,4.08058L 13.4948,5.49479L 7.98958,11L 20,11 Z " />
+        </svg>
+    </span>
+</template>
+<script>
+    export default {
+        props: ['size']
+    }
+</script>

client/src/ui/components/index.js

@@ -2,3 +2,4 @@ export { default as BdSettingsWrapper } from './BdSettingsWrapper.vue';
 export { default as BdSettings } from './BdSettings.vue';
 export { default as BdModals } from './BdModals.vue';
 export { default as BdToasts } from './BdToasts.vue';
+export { default as BdNotifications } from './BdNotifications.vue';

client/src/ui/dom.js

@@ -184,9 +184,8 @@ export default class DOM {
     static get bdThemes() { return this.getElement('bd-themes') || this.createElement('bd-themes').appendTo(this.bdHead) }
     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 get bdToasts() {
+    static get bdToasts() { return this.getElement('bd-toasts') || this.createElement('bd-toasts').appendTo(this.bdBody) }
-        return this.getElement('bd-toasts') || this.createElement('bd-toasts').appendTo(this.bdBody);
+    static get bdNotifications() { return this.getElement('bd-notifications') || this.createElement('bd-notifications').appendTo(this.bdBody) }
-    }
 
     static getElement(e) {
         if (e instanceof BdNode) return e.element;

client/src/ui/notifications.js

@@ -0,0 +1,41 @@
+/*
+ * BetterDiscord Notifications
+ * 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 { Events } from 'modules';
+
+export default class Notifications {
+
+    /**
+     * Add a new notification to the stack.
+     * Notifications should only be used for important things.
+     * @param {String} text
+     * @param {Object} [buttons] buttons to show { text: 'Text for the button', onClick: fn() { return true if notification should be dismissed } }
+     */
+    static add(text, buttons = []) {
+        this.stack.push({ text, buttons });
+    }
+
+    /**
+     * Notifications currently in the stack.
+     * @type {Object[]}
+     */
+    static get stack() {
+        return this._stack || (this._stack = []);
+    }
+
+    /**
+     * Dismiss a notification at index.
+     * @param {Number} index Index of the notification
+     */
+    static dismiss(index) {
+        this.stack.splice(index, 1);
+    }
+
+}

client/src/ui/ui.js

@@ -3,6 +3,7 @@ export { default as BdUI } from './bdui';
 export { default as BdMenu, BdMenuItems } from './bdmenu';
 export { default as Modals } from './modals';
 export { default as Toasts } from './toasts';
+export { default as Notifications } from './notifications';
 
 export { default as VueInjector } from './vueinjector';
 export { default as Reflection } from './reflection';