release(notification): v0.2.0

index.json

@@ -216,7 +216,7 @@
     "dependencies": []
   },
   "notification": {
-    "version": "0.1.6",
+    "version": "0.2.0",
     "style": true,
     "icon": false,
     "test": true,
@@ -234,9 +234,9 @@
     "dependencies": []
   },
   "painter": {
+    "icon": true,
     "version": "0.1.0",
     "style": true,
-    "icon": false,
     "test": true,
     "install": false,
     "react": false,

src/notification/README.md

@@ -45,6 +45,7 @@ notification.dismissAll()
 ## Configuration
 
 * duration(number): Default duration, 0 means infinite.
+* inline(boolean): Enable inline mode.
 * position(IPosition): Notification position.
 
 ## Api

src/notification/index.ts

@@ -25,6 +25,8 @@ export interface IOptions extends IComponentOptions {
   position?: IPosition
   /** Default duration, 0 means infinite. */
   duration?: number
+  /** Enable inline mode. */
+  inline?: boolean
 }
 
 /**
@@ -53,9 +55,14 @@ export default class Notification extends Component<IOptions> {
         x: 'right',
         y: 'bottom',
       },
+      inline: false,
       duration: 2000,
     })
 
+    if (!this.options.inline) {
+      this.$container.addClass(this.c('full'))
+    }
+
     this.initTpl()
   }
   /** Show notification. */

src/notification/package.json

@@ -1,5 +1,5 @@
 {
   "name": "notification",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "Show notifications"
 }

src/notification/story.js

@@ -1,22 +1,35 @@
 import 'luna-notification.css'
 import Notification from 'luna-notification.js'
 import readme from './README.md'
-import { select, text, number, button } from '@storybook/addon-knobs'
+import { select, text, number, button, boolean } from '@storybook/addon-knobs'
 import story from '../share/story'
+import $ from 'licia/$'
 
 const def = story(
   'notification',
   (container) => {
     const x = select('X', ['left', 'center', 'right'], 'center')
     const y = select('Y', ['top', 'bottom'], 'top')
 
+    const inline = boolean('Inline Mode', false)
+
     const notification = new Notification(container, {
       position: {
         x,
         y,
       },
+      inline,
     })
 
+    if (inline) {
+      $(container).css({
+        width: '100%',
+        maxWidth: 640,
+        height: 360,
+        border: '1px solid #eee',
+      })
+    }
+
     const content = text('Content', 'Luna Notification')
     const duration = number('Duration', 5000, {
       range: true,

src/notification/style.scss

@@ -1,26 +1,30 @@
-@import '../share/variable';
+@import '../share/mixin';
+@import '../share/theme';
 
 .luna-notification {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  @include component();
+  position: relative;
   padding: 20px;
-  box-sizing: border-box;
   pointer-events: none;
   display: flex;
   flex-direction: column;
-  font-size: 14px;
-  font-family: $font-family;
+  overflow: hidden;
+  background: transparent;
+  &.full {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .item {
   display: flex;
-  box-shadow: $box-shadow;
+  border: 1px solid $color-border;
   padding: 10px 16px;
-  color: $foreground-color;
-  background: $background-color;
+  color: $color-text;
+  background: $color-bg-container;
 }
 
 .lower {
@@ -33,8 +37,9 @@
 
 .theme-dark {
   .item {
+    border-color: $color-border-dark;
     box-shadow: $box-shadow-dark;
-    color: $foreground-color-dark;
-    background: $background-color-dark;
+    color: $color-text-dark;
+    background: $color-bg-container-dark;
   }
 }

src/share/mixin.scss

@@ -16,7 +16,7 @@
   font-family: $font-family;
   box-sizing: border-box;
   user-select: none;
-  font-size: $font-size;
+  font-size: #{$font-size}px;
   &.platform-windows {
     font-family: 'Segoe UI', Tahoma, sans-serif;
   }