From 1cc5d300d7bde7a9dde0f79bc5b6bb2639261eae Mon Sep 17 00:00:00 2001
From: redhoodsu <redhoodsu@tencent.com>
Date: Sun, 7 Jan 2024 13:12:21 +0800
Subject: [PATCH] release(notification): v0.2.0

---
 index.json                    |  4 ++--
 src/notification/README.md    |  1 +
 src/notification/index.ts     |  7 +++++++
 src/notification/package.json |  2 +-
 src/notification/story.js     | 15 ++++++++++++++-
 src/notification/style.scss   | 33 +++++++++++++++++++--------------
 src/share/mixin.scss          |  2 +-
 7 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/index.json b/index.json
index 2351001..d649cd8 100644
--- a/index.json
+++ b/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,
diff --git a/src/notification/README.md b/src/notification/README.md
index 2f111e7..5019b72 100644
--- a/src/notification/README.md
+++ b/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
diff --git a/src/notification/index.ts b/src/notification/index.ts
index 643cfd4..d9de866 100644
--- a/src/notification/index.ts
+++ b/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. */
diff --git a/src/notification/package.json b/src/notification/package.json
index a385289..7587155 100644
--- a/src/notification/package.json
+++ b/src/notification/package.json
@@ -1,5 +1,5 @@
 {
   "name": "notification",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "Show notifications"
 }
diff --git a/src/notification/story.js b/src/notification/story.js
index fbe9d8b..6ad55ba 100644
--- a/src/notification/story.js
+++ b/src/notification/story.js
@@ -1,8 +1,9 @@
 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',
@@ -10,13 +11,25 @@ const def = story(
     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,
diff --git a/src/notification/style.scss b/src/notification/style.scss
index a64756f..971c8f0 100644
--- a/src/notification/style.scss
+++ b/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;
   }
 }
diff --git a/src/share/mixin.scss b/src/share/mixin.scss
index 87394ab..f2da7da 100644
--- a/src/share/mixin.scss
+++ b/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;
   }