From f62df499889214c49bf9bee1acb6bb6c71346d7f Mon Sep 17 00:00:00 2001 From: redhoodsu Date: Tue, 28 May 2024 18:29:35 +0800 Subject: [PATCH] release(notification): v0.3.0 --- index.json | 4 +- src/console/icon/icon.json | 7 ++- src/notification/README.md | 1 + src/notification/icon.css | 28 ++++++++++++ src/notification/icon/icon.json | 5 +++ src/notification/icon/info.svg | 4 ++ src/notification/index.ts | 30 ++++++++++--- src/notification/package.json | 7 ++- src/notification/story.js | 2 + src/notification/style.scss | 52 +++++++++++++++++++++++ src/{text-viewer => share}/icon/check.svg | 0 src/{console => share}/icon/error.svg | 0 src/{console => share}/icon/warn.svg | 0 src/text-viewer/icon/icon.json | 1 + 14 files changed, 131 insertions(+), 10 deletions(-) create mode 100644 src/notification/icon.css create mode 100644 src/notification/icon/icon.json create mode 100644 src/notification/icon/info.svg rename src/{text-viewer => share}/icon/check.svg (100%) rename src/{console => share}/icon/error.svg (100%) rename src/{console => share}/icon/warn.svg (100%) create mode 100644 src/text-viewer/icon/icon.json diff --git a/index.json b/index.json index bf0e526..fd216a3 100644 --- a/index.json +++ b/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, diff --git a/src/console/icon/icon.json b/src/console/icon/icon.json index 5b098a0..4641f1b 100644 --- a/src/console/icon/icon.json +++ b/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" +] diff --git a/src/notification/README.md b/src/notification/README.md index 5019b72..ba4c3e0 100644 --- a/src/notification/README.md +++ b/src/notification/README.md @@ -63,6 +63,7 @@ Show notification. ### INotifyOptions * duration(number): Notification duration. +* icon(string): Notification icon. ### IPosition diff --git a/src/notification/icon.css b/src/notification/icon.css new file mode 100644 index 0000000..12c49da --- /dev/null +++ b/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'; +} diff --git a/src/notification/icon/icon.json b/src/notification/icon/icon.json new file mode 100644 index 0000000..a958384 --- /dev/null +++ b/src/notification/icon/icon.json @@ -0,0 +1,5 @@ +[ + "../../share/icon/check.svg", + "../../share/icon/warn.svg", + "../../share/icon/error.svg" +] diff --git a/src/notification/icon/info.svg b/src/notification/icon/info.svg new file mode 100644 index 0000000..397eca2 --- /dev/null +++ b/src/notification/icon/info.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/notification/index.ts b/src/notification/index.ts index d9de866..f8deda7 100644 --- a/src/notification/index.ts +++ b/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 { 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' + ? '' + : `
` this.$container.html( - this.notification.c(`
${this.content}
`) + this.notification.c( + `${iconHtml}
${this.content}
` + ) ) } } diff --git a/src/notification/package.json b/src/notification/package.json index 7587155..977f1bb 100644 --- a/src/notification/package.json +++ b/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 + } } diff --git a/src/notification/story.js b/src/notification/story.js index 6ad55ba..5e04fe9 100644 --- a/src/notification/story.js +++ b/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, }) } diff --git a/src/notification/style.scss b/src/notification/style.scss index 971c8f0..d6a6345 100644 --- a/src/notification/style.scss +++ b/src/notification/style.scss @@ -35,6 +35,44 @@ 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; @@ -42,4 +80,18 @@ 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; + } + } } diff --git a/src/text-viewer/icon/check.svg b/src/share/icon/check.svg similarity index 100% rename from src/text-viewer/icon/check.svg rename to src/share/icon/check.svg diff --git a/src/console/icon/error.svg b/src/share/icon/error.svg similarity index 100% rename from src/console/icon/error.svg rename to src/share/icon/error.svg diff --git a/src/console/icon/warn.svg b/src/share/icon/warn.svg similarity index 100% rename from src/console/icon/warn.svg rename to src/share/icon/warn.svg diff --git a/src/text-viewer/icon/icon.json b/src/text-viewer/icon/icon.json new file mode 100644 index 0000000..31419b0 --- /dev/null +++ b/src/text-viewer/icon/icon.json @@ -0,0 +1 @@ +["../../share/icon/check.svg"]