From 34219a9249062a955d51a901f59ce0778d9ea0e1 Mon Sep 17 00:00:00 2001 From: cEvolve05 Date: Sat, 31 Aug 2024 20:58:49 +0800 Subject: [PATCH] feat(message): add success type --- ui/assets/image/icon/arrow-left.svg | 6 +-- ui/assets/image/icon/check-circle.svg | 4 ++ ui/assets/image/image_token.slint | 2 + ui/components/toast.slint | 71 ++++++++++----------------- ui/logic/message_manager.slint | 7 +-- ui/views/overlay/login.slint | 2 +- ui/views/overlay/menu.slint | 2 +- ui/views/page/setting.slint | 5 +- 8 files changed, 41 insertions(+), 58 deletions(-) create mode 100644 ui/assets/image/icon/check-circle.svg diff --git a/ui/assets/image/icon/arrow-left.svg b/ui/assets/image/icon/arrow-left.svg index bedbb28b..1401ed18 100644 --- a/ui/assets/image/icon/arrow-left.svg +++ b/ui/assets/image/icon/arrow-left.svg @@ -1,4 +1,4 @@ - - arrow-left - + + \ No newline at end of file diff --git a/ui/assets/image/icon/check-circle.svg b/ui/assets/image/icon/check-circle.svg new file mode 100644 index 00000000..2f12ec0d --- /dev/null +++ b/ui/assets/image/icon/check-circle.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/ui/assets/image/image_token.slint b/ui/assets/image/image_token.slint index 1cf0a25c..b0136ca3 100644 --- a/ui/assets/image/image_token.slint +++ b/ui/assets/image/image_token.slint @@ -31,6 +31,7 @@ struct EventoIconCollection { tree-list: image, account-box: image, pentagon: image, + check-circle: image, } struct EventoDisplayCollection { @@ -88,6 +89,7 @@ export global EventoImageToken { tree-list: @image-url("./icon/tree-list.svg"), account-box: @image-url("./icon/account-box-outline.svg"), pentagon: @image-url("./icon/pentagon.svg"), + check-circle: @image-url("./icon/check-circle.svg"), }; // display used as images bigger than icon // most display image won't change according to darkmode switch diff --git a/ui/components/toast.slint b/ui/components/toast.slint index f7c2c9e7..90baeeba 100644 --- a/ui/components/toast.slint +++ b/ui/components/toast.slint @@ -36,11 +36,13 @@ export component Toast { } _content := HorizontalLayout { - padding: 16px; - spacing: 12px; + padding-left: 16px; + padding-right: 16px; + spacing: 8px; alignment: start; if have-icon: _icon := Empty { width: 24px; + height: 100%; Image { height: 24px; width: 24px; @@ -48,64 +50,41 @@ export component Toast { colorize: on-surface; } } - _text := Text { - vertical-alignment: center; - horizontal-alignment: left; - text: message-data.content; - color: on-surface; - font-size: font.size; - font-weight: font.weight; + Empty { + height: 100%; + _text := Text { + text: message-data.content; + color: on-surface; + font-size: font.size; + font-weight: font.weight; + } } + + states [ + have-icon when have-icon: { + padding-left: 12px; + } + ] } } - // TODO: support more type states [ - error when message-data.type == MessageType.Error: { + error when message-data.type == MessageType.error: { have-icon: true; icon: Token.image.icon.error; surface: Token.color.error; on-surface: Token.color.on-error; } - warning when message-data.type == MessageType.Warning: { + warning when message-data.type == MessageType.warning: { have-icon: true; icon: Token.image.icon.error; } - info when message-data.type == MessageType.Info: { + success when message-data.type == MessageType.success: { + have-icon: true; + icon: Token.image.icon.check-circle; + } + info when message-data.type == MessageType.info: { have-icon: false; } ] } - -component Test { - // HorizontalLayout { - // y: - self.height; - // Button { - // content: "Info"; - // clicked => { - // MessageManagerBridge.type = MessageType.Info; - // } - // } - - // Button { - // content: "Warning"; - // clicked => { - // MessageManagerBridge.type = MessageType.Warning; - // } - // } - - // Button { - // content: "Error"; - // clicked => { - // MessageManagerBridge.type = MessageType.Error; - // } - // } - // } - - Toast { - // width: 20px; - init => { - debug(self.width) - } - } -} diff --git a/ui/logic/message_manager.slint b/ui/logic/message_manager.slint index 9288dc75..cdb6fb45 100644 --- a/ui/logic/message_manager.slint +++ b/ui/logic/message_manager.slint @@ -1,7 +1,8 @@ export enum MessageType{ - Info, - Warning, - Error + info, + success, + warning, + error } export struct MessageData { diff --git a/ui/views/overlay/login.slint b/ui/views/overlay/login.slint index 1dd10581..5fd9366e 100644 --- a/ui/views/overlay/login.slint +++ b/ui/views/overlay/login.slint @@ -8,7 +8,7 @@ export global LoginOverlayBridge { in-out property version:"v0.0.0-00000000"; callback link-login(); public function guest-login() { - MessageManager.show-message("访客登录尚未完成", MessageType.Info); + MessageManager.show-message("访客登录尚未完成", MessageType.info); // ViewManager.prior-view(); } } diff --git a/ui/views/overlay/menu.slint b/ui/views/overlay/menu.slint index 7d294b96..708d6ad1 100644 --- a/ui/views/overlay/menu.slint +++ b/ui/views/overlay/menu.slint @@ -196,7 +196,7 @@ export component MenuOverlay inherits Overlay { label: "纪念卡"; clicked => { // NOTE: Unsupport - MessageManager.show-message("功能还在开发中，咕咕咕 😣", MessageType.Info); + MessageManager.show-message("功能还在开发中，咕咕咕 😣", MessageType.info); } } if AccountManager.is-login:Divider { } diff --git a/ui/views/page/setting.slint b/ui/views/page/setting.slint index 5ca4a079..b84ce900 100644 --- a/ui/views/page/setting.slint +++ b/ui/views/page/setting.slint @@ -9,7 +9,6 @@ export global SettingPageBridge { in-out property notice-begin: false; in-out property notice-end: false; in-out property minimal-to-tray: false; - public function change-theme() { if (theme-index == 1) { Token.set-display-mode(ColorScheme.light); @@ -19,7 +18,6 @@ export global SettingPageBridge { Token.set-display-mode(ColorScheme.unknown); } } - callback language-changed(); callback theme-changed(); callback notice-begin-changed(); @@ -65,7 +63,6 @@ export component SettingPage inherits Page { alignment: LayoutAlignment.start; padding: 50px; spacing: 15px; - Text { text: "设置"; font-size: Token.font.display.medium.size; @@ -129,7 +126,7 @@ export component SettingPage inherits Page { checked <=> SettingPageBridge.minimal-to-tray; toggled => { SettingPageBridge.minimal-to-tray-changed(); - MessageManager.show-message("下次启动应用时生效", MessageType.Info); + MessageManager.show-message("下次启动应用时生效", MessageType.info); } } }