ui-default: init

将ui-default合并至主存储库便于维护

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

@@ -0,0 +1,89 @@
+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,
+  }) {
+    this.type = type;
+    if (avatar) this.type += ' avatar';
+    if (title) this.type += ' title';
+    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));
+    this.$n = this.$dom
+      .css('z-index', zIndexManager.getNext())
+      .appendTo('body');
+    this.$n.width(); // force reflow
+    this.$n.removeClass('hide');
+    if (duration) this.autoHideTimer = setTimeout(this.hide.bind(this), duration);
+  }
+
+  handleClick() {
+    this.action();
+  }
+
+  hide() {
+    this.$n.addClass('hide');
+    setTimeout(() => this.$n.remove(), 200);
+  }
+
+  static success(message, duration) {
+    return Notification.show({ type: 'success', message, duration });
+  }
+
+  static info(message, duration) {
+    return Notification.show({ type: 'info', message, duration });
+  }
+
+  static warn(message, duration) {
+    return Notification.show({ type: 'warn', message, duration });
+  }
+
+  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;
+  }
+}
+
+window.Hydro.components.Notification = Notification;

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

@@ -0,0 +1,49 @@
+.notification
+  position: fixed
+  left: rem(20px)
+  bottom: rem(20px)
+  padding: rem(10px)
+  border-radius: rem(2px)
+  background: rgba(#222, 0.9)
+  color: #FFF
+  font-size: rem($font-size-secondary)
+  transition: transform .2s, opacity .2s
+  transition-timing-function: ease-out-cubic
+  z-index: 1000  // managed
+  line-height: rem(20px)
+  box-shadow: 0 4px 10px rgba(#000, 0.4)
+  min-width: rem(150px)
+
+  img
+    border-radius: 50%
+
+  &.hide
+    opacity: 0
+    transform: translateY(20px) scale(0.9)
+
+  &:before
+    display: inline-block
+    font-family: $icon-font-name !important
+    margin-right: rem(10px)
+    font-size: rem($font-size-icon)
+    line-height: 1
+    vertical-align: top
+    margin-top: rem((20px - $font-size-icon) / 2)
+
+  for key, value in $notification-color
+    &.{key}
+      border-left: 5px solid value
+      &:before
+        color: value
+
+  for key, value in $notification-icon
+    &.{key}:before
+      content: value
+
++mobile()
+  .notification
+    padding: rem(20px 15px)
+    left: 0
+    width: 100%
+    min-width: auto
+    bottom: 0