add ui

ui/components/notification/index.js

@@ -0,0 +1,50 @@
+import tpl from 'vj/utils/tpl';
+import zIndexManager from 'vj/utils/zIndexManager';
+
+let lastNotification = null;
+let autoHideTimer = null;
+
+export default class Notification {
+  static success(message, duration) {
+    Notification.show({ type: 'success', message, duration });
+  }
+
+  static info(message, duration) {
+    Notification.show({ type: 'info', message, duration });
+  }
+
+  static warn(message, duration) {
+    Notification.show({ type: 'warn', message, duration });
+  }
+
+  static error(message, duration) {
+    Notification.show({ type: 'error', message, duration });
+  }
+
+  static show({ message, type = 'info', duration = 3000 }) {
+    if (lastNotification) {
+      Notification.hide();
+    }
+    const $n = $(tpl`<div class="notification ${type} hide">${message}</div>`)
+      .css('z-index', zIndexManager.getNext())
+      .appendTo('body');
+    $n.width(); // force reflow
+    $n.removeClass('hide');
+    lastNotification = $n;
+    autoHideTimer = setTimeout(Notification.hide, duration);
+  }
+
+  static hide() {
+    if (!lastNotification) {
+      return;
+    }
+    if (autoHideTimer) {
+      clearTimeout(autoHideTimer);
+      autoHideTimer = null;
+    }
+    const $n = lastNotification;
+    $n.addClass('hide');
+    setTimeout(() => $n.remove(), 200);
+    lastNotification = null;
+  }
+}

ui/components/notification/notification.page.styl

@@ -0,0 +1,46 @@
+.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)
+
+  &.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