Add notification titles

client/src/index.js

@@ -105,8 +105,9 @@ class BetterDiscord {
     }
 
     initTests() {
+        let notifications = 0;
         function showDummyNotif() { // eslint-disable-line no-inner-declarations
-            Notifications.add('Dummy Notification', [
+            Notifications.add(notifications++ ? `Notification ${notifications}` : undefined, 'Dummy Notification', [
                 {
                     text: 'Show Again', onClick: function () {
                         setTimeout(showDummyNotif, 5000);

client/src/modules/pluginapi.js

@@ -355,8 +355,11 @@ export default class PluginApi {
     get notificationStack() {
         return this._notificationStack || (this._notificationStack = []);
     }
-    addNotification(text, buttons = []) {
+    addNotification(title, text, buttons = []) {
-        const notification = Notifications.add(text, buttons, () => Utils.removeFromArray(this.notificationStack, notification));
+        if (arguments.length <= 1) text = title, title = undefined;
+        if (arguments[1] instanceof Array) [text, buttons] = arguments, title = undefined;
+
+        const notification = Notifications.add(title, text, buttons, () => Utils.removeFromArray(this.notificationStack, notification));
         this.notificationStack.push(notification);
         return notification;
     }
@@ -364,7 +367,7 @@ export default class PluginApi {
         index = Notifications.stack.indexOf(this.notificationStack[index]);
         if (index) Notifications.dismiss(index);
     }
-    dismissAll() {
+    dismissAllNotifications() {
         for (let index in this.notificationStack) {
             this.dismissNotification(index);
         }
@@ -372,7 +375,8 @@ export default class PluginApi {
     get Notifications() {
         return Object.defineProperty({
             add: this.addNotification.bind(this),
-            dismiss: this.dismissNotification.bind(this)
+            dismiss: this.dismissNotification.bind(this),
+            dismissAll: this.dismissAllNotifications.bind(this)
         }, 'stack', {
             get: () => this.notificationStack
         });

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

@@ -49,6 +49,13 @@
         .bd-notificationBody {
             padding: 10px 25px;
             flex-grow: 1;
+            flex-direction: column;
+
+            .bd-notificationTitle {
+                margin-bottom: 10px;
+                color: #fff;
+                font-size: 16px;
+            }
 
             .bd-notificationText {
                 color: #fff;

client/src/ui/components/BdNotifications.vue

@@ -15,6 +15,7 @@
                 <div @click="this.dismissFirst" class="bd-notificationDismissBtn"><MiArrowLeft size="20"/></div>
             </div>
             <div class="bd-notificationBody bd-flex">
+                <div v-if="notifications[0].title" class="bd-notificationTitle">{{notifications[0].title}}</div>
                 <div class="bd-notificationText">{{notifications[0].text}}</div>
             </div>
             <div class="bd-notificationFooter bd-flex">

client/src/ui/notifications.js

@@ -15,11 +15,15 @@ export default class Notifications {
     /**
      * Add a new notification to the stack.
      * Notifications should only be used for important things.
+     * @param {String} [title]
      * @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 = [], ondismiss) {
+    static add(title, text, buttons = [], ondismiss) {
-        const notification = { text, buttons, ondismiss };
+        if (arguments.length <= 1) text = title, title = undefined;
+        if (arguments[1] instanceof Array) [text, buttons, ondismiss] = arguments, title = undefined;
+
+        const notification = { title, text, buttons, ondismiss };
         this.stack.push(notification);
         return notification;
     }