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

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