release(notification): v0.3.0

index.json

@@ -225,9 +225,9 @@
     "dependencies": []
   },
   "notification": {
-    "version": "0.2.0",
+    "icon": true,
+    "version": "0.3.0",
     "style": true,
-    "icon": false,
     "test": true,
     "install": false,
     "react": false,

src/console/icon/icon.json

@@ -1 +1,6 @@
-["../../share/icon/caret-down.svg", "../../share/icon/caret-right.svg"]
+[
+  "../../share/icon/caret-down.svg",
+  "../../share/icon/caret-right.svg",
+  "../../share/icon/warn.svg",
+  "../../share/icon/error.svg"
+]

src/notification/README.md

@@ -63,6 +63,7 @@ Show notification.
 ### INotifyOptions
 
 * duration(number): Notification duration.
+* icon(string): Notification icon.
 
 ### IPosition
 

src/notification/icon.css

@@ -0,0 +1,28 @@
+@font-face {
+  font-family: 'luna-notification-icon';
+  src: url('data:application/x-font-woff;charset=utf-8;base64,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')
+    format('woff');
+}
+
+[class^='icon-'],
+[class*=' icon-'] {
+  display: inline-block;
+  font-family: 'luna-notification-icon' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-info:before {
+  content: '\f101';
+}
+.icon-check:before {
+  content: '\f102';
+}
+.icon-warn:before {
+  content: '\f103';
+}
+.icon-error:before {
+  content: '\f104';
+}

src/notification/icon/icon.json

@@ -0,0 +1,5 @@
+[
+  "../../share/icon/check.svg",
+  "../../share/icon/warn.svg",
+  "../../share/icon/error.svg"
+]

src/notification/index.ts

@@ -17,6 +17,8 @@ export interface IPosition {
 export interface INotifyOptions {
   /** Notification duration. */
   duration: number
+  /** Notification icon. */
+  icon?: string
 }
 
 /** IOptions */
@@ -72,7 +74,9 @@ export default class Notification extends Component<IOptions> {
       duration: this.options.duration,
     }
   ) {
-    const notification = new NotificationItem(this, content)
+    const notification = new NotificationItem(this, content, {
+      icon: options.icon || 'none',
+    })
     this.notifications.push(notification)
     this.add(notification)
     setTimeout(() => this.remove(notification.id), options.duration)
@@ -129,7 +133,11 @@ class NotificationItem {
   private $container: $.$
   private notification: Notification
   private content: string
-  constructor(notification: Notification, content: string) {
+  constructor(
+    notification: Notification,
+    content: string,
+    options: { icon: string }
+  ) {
     this.$container = $(this.container)
     this.notification = notification
     this.content = content
@@ -144,14 +152,26 @@ class NotificationItem {
       ),
     })
 
-    this.initTpl()
+    this.initTpl(options.icon)
   }
   destroy() {
     this.$container.remove()
   }
-  private initTpl() {
+  private initTpl(icon: string) {
+    let iconName = icon
+    if (icon === 'success') {
+      iconName = 'check'
+    } else if (icon === 'warning') {
+      iconName = 'warn'
+    }
+    const iconHtml =
+      icon === 'none'
+        ? ''
+        : `<div class="icon-container ${icon}"><span class="icon icon-${iconName}"></span></div>`
     this.$container.html(
-      this.notification.c(`<div class="content">${this.content}</div>`)
+      this.notification.c(
+        `${iconHtml}<div class="content">${this.content}</div>`
+      )
     )
   }
 }

src/notification/package.json

@@ -1,5 +1,8 @@
 {
   "name": "notification",
-  "version": "0.2.0",
-  "description": "Show notifications"
+  "version": "0.3.0",
+  "description": "Show notifications",
+  "luna": {
+    "icon": true
+  }
 }

src/notification/story.js

@@ -10,6 +10,7 @@ const def = story(
   (container) => {
     const x = select('X', ['left', 'center', 'right'], 'center')
     const y = select('Y', ['top', 'bottom'], 'top')
+    const icon = select('Icon', ['none', 'info', 'success', 'warning', 'error'])
 
     const inline = boolean('Inline Mode', false)
 
@@ -40,6 +41,7 @@ const def = story(
 
     function notify() {
       notification.notify(content, {
+        icon,
         duration,
       })
     }

src/notification/style.scss

@@ -35,11 +35,63 @@
   margin-bottom: 16px;
 }
 
+.icon-container {
+  margin-right: 8px;
+  color: #fff;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  text-align: center;
+  line-height: 16px;
+  &.info {
+    background: $color-info;
+    .icon {
+      position: relative;
+      top: -2px;
+      font-size: 12px;
+    }
+  }
+  &.success {
+    background: $color-success;
+    .icon {
+      position: relative;
+      top: -1px;
+      font-size: 12px;
+    }
+  }
+  &.warning {
+    color: $color-warning;
+    .icon {
+      font-size: 14px;
+    }
+  }
+  &.error {
+    color: $color-error;
+    .icon {
+      font-size: 14px;
+    }
+  }
+}
+
 .theme-dark {
   .item {
     border-color: $color-border-dark;
     box-shadow: $box-shadow-dark;
     color: $color-text-dark;
     background: $color-bg-container-dark;
   }
+  .icon-container {
+    &.info {
+      background: $color-info-dark;
+    }
+    &.success {
+      background: $color-success-dark;
+    }
+    &.warning {
+      color: $color-warning-dark;
+    }
+    &.error {
+      color: $color-error-dark;
+    }
+  }
 }

src/text-viewer/icon/icon.json

@@ -0,0 +1 @@
+["../../share/icon/check.svg"]