ui: 收到站内消息是增加提醒 (#86)

packages/ui-default/components/message/index.page.js

@@ -7,27 +7,38 @@ import tpl from 'vj/utils/tpl';
 
 const messagePage = new AutoloadPage('messagePage', () => {
   async function init() {
+    if (UserContext.unreadMsg) {
+      new Notification({
+        type: 'info',
+        message: i18n('You have mew message.'),
+        action: () => window.open('/home/messages', '_blank'),
+      }).show();
+    }
+
     const { default: SockJs } = await import('../socket');
 
     const sock = new SockJs('/home/messages-conn');
     sock.onmessage = (message) => {
       const msg = JSON.parse(message.data);
-      if (msg.mdoc.flag | FLAG_ALERT) {
+      console.log('Received message', msg);
+      if (msg.mdoc.flag & FLAG_ALERT) {
         // Is alert
-        const dialog = new InfoDialog({
+       new InfoDialog({
           $body: tpl`
             <div class="typo">
-              <p>${i18n(msg.udoc.content)}</p>
+              <p>${i18n('Message from {0}:', msg.mdoc.from)}</p>
+              <p>${i18n(msg.mdoc.content)}</p>
             </div>`,
-        });
-        dialog.open();
+        }).open();
       } else {
         // Is message
-        Notification.show({
+        new Notification({
           title: msg.udoc.uname,
-          avatar: msg.udoc.gravatar,
+          avatar: msg.udoc.gravatar_url,
           message: msg.mdoc.content,
-        });
+          duration: 15000,
+          action: () => window.open(`/home/messages?uid=${msg.udoc._id}`, '_blank'),
+        }).show();
       }
     };
   }

packages/ui-default/components/notification/index.js

@@ -1,9 +1,6 @@
 import tpl from 'vj/utils/tpl';
 import zIndexManager from 'vj/utils/zIndexManager';
 
-let lastNotification = null;
-let autoHideTimer = null;
-
 export default class Notification {
   constructor({
     avatar, title, message, type = '', duration = 3000, action,
@@ -11,78 +8,48 @@ export default class Notification {
     this.type = type;
     if (avatar) this.type += ' avatar';
     if (title) this.type += ' title';
-    this.action = (() => { }) || action;
+    this.action = action || (() => { });
     this.$dom = $(tpl`<div class="notification ${type} hide"></div>`);
     if (avatar) $(tpl`<img width="64" height="64" class="avatar" src="${avatar}"></img>`).appendTo(this.$dom);
-    if (title) $(tpl`<h2>${title}</h2>`).appendTo(this.$dom);
-    $(tpl`<p>${message}</p>`).appendTo(this.$dom);
-    this.$dom.on('clink', this.handleClick.bind(this));
+    if (title) {
+      $(tpl`<div class="notification-content"><h2>${title}</h2><p>${message}</p></div>`).appendTo(this.$dom);
+    } else $(tpl`<p>${message}</p>`).appendTo(this.$dom);
+    this.$dom.on('click', this.handleClick.bind(this));
     this.$n = this.$dom
       .css('z-index', zIndexManager.getNext())
-      .appendTo('body');
+      .appendTo(document.body);
     this.$n.width(); // force reflow
-    this.$n.removeClass('hide');
-    if (duration) this.autoHideTimer = setTimeout(this.hide.bind(this), duration);
+    this.duration = duration;
   }
 
   handleClick() {
     this.action();
   }
 
+  show(autohide = true) {
+    this.$n.removeClass('hide');
+    if (this.duration && autohide) this.autoHideTimer = setTimeout(this.hide.bind(this), this.duration);
+  }
+
   hide() {
     this.$n.addClass('hide');
     setTimeout(() => this.$n.remove(), 200);
   }
 
   static success(message, duration) {
-    return Notification.show({ type: 'success', message, duration });
+    return new Notification({ type: 'success', message, duration }).show();
   }
 
   static info(message, duration) {
-    return Notification.show({ type: 'info', message, duration });
+    return new Notification({ type: 'info', message, duration }).show();
   }
 
   static warn(message, duration) {
-    return Notification.show({ type: 'warn', message, duration });
+    return new Notification({ type: 'warn', message, duration }).show();
   }
 
   static error(message, duration) {
-    return Notification.show({ type: 'error', message, duration });
-  }
-
-  static show({
-    avatar, title, message, type = '', duration = 3000, action,
-  }) {
-    if (lastNotification) Notification.hide();
-    if (avatar) type += ' avatar';
-    if (title) type += ' title';
-    const $dom = $(tpl`<div class="notification ${type} hide"></div>`);
-    if (avatar) $(tpl`<img width="64" height="64" class="avatar" src="${avatar}"></img>`).appendTo($dom);
-    if (title) $(tpl`<h2>${title}</h2>`).appendTo($dom);
-    $(tpl`<p>${message}</p>`).appendTo($dom);
-    $dom.on('clink', action);
-    const $n = $dom
-      .css('z-index', zIndexManager.getNext())
-      .appendTo('body');
-    $n.width(); // force reflow
-    $n.removeClass('hide');
-    lastNotification = $n;
-    autoHideTimer = setTimeout(Notification.hide, duration);
-    return $n;
-  }
-
-  static hide() {
-    if (!lastNotification) {
-      return;
-    }
-    if (autoHideTimer) {
-      clearTimeout(autoHideTimer);
-      autoHideTimer = null;
-    }
-    const $n = lastNotification;
-    $n.addClass('hide');
-    setTimeout(() => $n.remove(), 200);
-    lastNotification = null;
+    return new Notification({ type: 'error', message, duration }).show();
   }
 }
 

packages/ui-default/components/notification/notification.page.styl

@@ -47,3 +47,16 @@
     width: 100%
     min-width: auto
     bottom: 0
+
+.notification-content
+  float: right
+  margin-top: rem(7px)
+  margin-left: rem(10px)
+  margin-right: rem(15px)
+
+  h2
+    color: #FFFFFF
+
+  p
+    margin-top: rem(7px);
+    font-size: larger