From 55369d2c8db5850fbdfe80b01196b32cfd79b8be Mon Sep 17 00:00:00 2001 From: blueJpg <2238288979@qq.com> Date: Sat, 6 Jul 2024 19:49:14 +0800 Subject: [PATCH] [*] improve ui --- src/logic/tr.rs | 2 + ui/appwindow.slint | 4 +- ui/base/token-list.slint | 26 +++++++++- ui/base/token-tile.slint | 18 +++++-- ui/base/widgets.slint | 8 +-- ui/images/btc.svg | 1 + ui/images/curve.svg | 1 + ui/images/doge.svg | 1 + ui/images/eth.svg | 1 + ui/images/landing-account.svg | 1 + ui/images/landing-send.svg | 1 + ui/images/solana.svg | 1 + ui/images/token.svg | 1 + ui/images/usdc.svg | 1 + ui/images/usdt.svg | 1 + ui/logic.slint | 15 +++++- ui/panel/bodyer/home.slint | 98 ++++++++++++++++++++++++----------- ui/store.slint | 2 +- ui/theme.slint | 11 ++++ 19 files changed, 149 insertions(+), 45 deletions(-) create mode 100644 ui/images/btc.svg create mode 100644 ui/images/curve.svg create mode 100644 ui/images/doge.svg create mode 100644 ui/images/eth.svg create mode 100644 ui/images/landing-account.svg create mode 100644 ui/images/landing-send.svg create mode 100644 ui/images/solana.svg create mode 100644 ui/images/token.svg create mode 100644 ui/images/usdc.svg create mode 100644 ui/images/usdt.svg diff --git a/src/logic/tr.rs b/src/logic/tr.rs index 38796df..4256ef3 100644 --- a/src/logic/tr.rs +++ b/src/logic/tr.rs @@ -236,6 +236,8 @@ pub fn tr(text: &str) -> String { items.insert("更改密码", "Change password"); items.insert("位组记词", "mnemonics"); items.insert("刷新完成", "Refresh finished"); + items.insert("管理代币", "Manage token"); + items.insert("发送代币", "Send token"); items.insert( "创建账户和使用组记词恢复账户", diff --git a/ui/appwindow.slint b/ui/appwindow.slint index 507e563..1ca3957 100644 --- a/ui/appwindow.slint +++ b/ui/appwindow.slint @@ -94,11 +94,11 @@ export component AppWindow inherits Window { if Store.is-show-landing-page: LandingPage { details: [ { - picture: Icons.landing-subscription, + picture: Icons.landing-account, description: Logic.tr(Store.is-cn, "创建账户和使用组记词恢复账户"), }, { - picture: Icons.landing-reading, + picture: Icons.landing-send, description: Logic.tr(Store.is-cn, "查看、发送和接收Sol代币和Solana的通证"), }, { diff --git a/ui/base/token-list.slint b/ui/base/token-list.slint index 1de8726..a399035 100644 --- a/ui/base/token-list.slint +++ b/ui/base/token-list.slint @@ -1,5 +1,5 @@ import { Theme } from "../theme.slint"; -import { TokenTile, TokenTileEntry } from "token-tile.slint"; +import { TokenTile, TokenTileWithSwitch, TokenTileEntry, TokenTileWithSwitchEntry } from "token-tile.slint"; import { SettingDetailInner } from "setting-detail.slint"; @@ -19,3 +19,27 @@ export component TokenList inherits SettingDetailInner { } } } + +export component TokenListWithSwitch inherits SettingDetailInner { + in-out property <[TokenTileWithSwitchEntry]> entries; + + vbox-alignment: LayoutAlignment.start; + vbox-spacing: Theme.spacing * 2; + + callback clicked(TokenTileEntry); + callback toggled(bool, TokenTileEntry); + + for item[index] in entries: TokenTileWithSwitch { + entry: item.entry; + checked: item.checked; + enabled: item.enabled; + + clicked => { + root.clicked(item.entry); + } + + toggled => { + root.toggled(self.checked, item.entry); + } + } +} diff --git a/ui/base/token-tile.slint b/ui/base/token-tile.slint index c26e64f..17b7fae 100644 --- a/ui/base/token-tile.slint +++ b/ui/base/token-tile.slint @@ -13,10 +13,16 @@ export struct TokenTileEntry { balance-usdt: string, } +export struct TokenTileWithSwitchEntry { + entry: TokenTileEntry, + checked: bool, + enabled: bool, +} + component Tile inherits Rectangle { in-out property entry; - in property icon-size: Theme.icon-size; + in property icon-size: Theme.icon-size * 1.5; in property icon-colorize; in property symbol-font-size: Theme.title3-font-size; @@ -44,13 +50,15 @@ component Tile inherits Rectangle { HorizontalLayout { horizontal-stretch: 1; - spacing: Theme.spacing * 2; + spacing: Theme.spacing * 4; VerticalLayout { alignment: LayoutAlignment.center; Rectangle { width: root.icon-size + Theme.padding * 4; height: self.width; + background: Theme.secondary-background; + border-radius: self.width / 2; img := Image { height: root.icon-size; @@ -95,11 +103,11 @@ export component TokenTile inherits Tile { } } -export component TokenTileWithSwitch inherits Rectangle { +export component TokenTileWithSwitch inherits Tile { in-out property checked <=> sw.checked; + in-out property enabled <=> sw.enabled; callback toggled <=> sw.toggled; - sw := Switch { - } + sw := Switch { } } diff --git a/ui/base/widgets.slint b/ui/base/widgets.slint index 4001758..602ee0e 100644 --- a/ui/base/widgets.slint +++ b/ui/base/widgets.slint @@ -41,8 +41,8 @@ import { Help } from "help.slint"; import { ResetPassword } from "reset-password.slint"; import { Banner } from "banner.slint"; import { AccountBalance } from "account-balance.slint"; -import { TokenTile, TokenTileEntry } from "token-tile.slint"; -import { TokenList } from "token-list.slint"; +import { TokenTile, TokenTileEntry, TokenTileWithSwitchEntry } from "token-tile.slint"; +import { TokenList, TokenListWithSwitch } from "token-list.slint"; export { Toast, @@ -108,5 +108,7 @@ export { AccountBalance, TokenTile, TokenTileEntry, - TokenList + TokenTileWithSwitchEntry, + TokenList, + TokenListWithSwitch } diff --git a/ui/images/btc.svg b/ui/images/btc.svg new file mode 100644 index 0000000..3a51b9b --- /dev/null +++ b/ui/images/btc.svg @@ -0,0 +1 @@ + diff --git a/ui/images/curve.svg b/ui/images/curve.svg new file mode 100644 index 0000000..7af9528 --- /dev/null +++ b/ui/images/curve.svg @@ -0,0 +1 @@ + diff --git a/ui/images/doge.svg b/ui/images/doge.svg new file mode 100644 index 0000000..705d5e6 --- /dev/null +++ b/ui/images/doge.svg @@ -0,0 +1 @@ + diff --git a/ui/images/eth.svg b/ui/images/eth.svg new file mode 100644 index 0000000..2579e3d --- /dev/null +++ b/ui/images/eth.svg @@ -0,0 +1 @@ + diff --git a/ui/images/landing-account.svg b/ui/images/landing-account.svg new file mode 100644 index 0000000..ed0d2cd --- /dev/null +++ b/ui/images/landing-account.svg @@ -0,0 +1 @@ + diff --git a/ui/images/landing-send.svg b/ui/images/landing-send.svg new file mode 100644 index 0000000..eeec885 --- /dev/null +++ b/ui/images/landing-send.svg @@ -0,0 +1 @@ + diff --git a/ui/images/solana.svg b/ui/images/solana.svg new file mode 100644 index 0000000..8629b06 --- /dev/null +++ b/ui/images/solana.svg @@ -0,0 +1 @@ + diff --git a/ui/images/token.svg b/ui/images/token.svg new file mode 100644 index 0000000..e5b8a7d --- /dev/null +++ b/ui/images/token.svg @@ -0,0 +1 @@ + diff --git a/ui/images/usdc.svg b/ui/images/usdc.svg new file mode 100644 index 0000000..f297a4c --- /dev/null +++ b/ui/images/usdc.svg @@ -0,0 +1 @@ + diff --git a/ui/images/usdt.svg b/ui/images/usdt.svg new file mode 100644 index 0000000..47b1599 --- /dev/null +++ b/ui/images/usdt.svg @@ -0,0 +1 @@ + diff --git a/ui/logic.slint b/ui/logic.slint index f089254..02b7fb9 100644 --- a/ui/logic.slint +++ b/ui/logic.slint @@ -1,6 +1,7 @@ import { Store, SetupIndex, SettingUI, SettingDeveloperMode, AccountEntry } from "store.slint"; import { Icons } from "theme.slint"; import { TransactionTileEntry, TransactionTileStatus } from "base/transaction-tile.slint"; +import { TokenTileEntry } from "base/token-tile.slint"; export global Logic { pure callback new-mnemonics(int) -> [string]; @@ -80,14 +81,24 @@ export global Logic { // (network) -> void callback switch-history-network(string); + // TODO // (network, address) -> void callback address-balance(string, string); // (network, address) -> void - callback open-tokens-management(string, string); + callback refresh-tokens-management-entries(string, string); // (network, uuid) -> void - callback open-send-token(string, string); + callback open-send-token-page(string, string); + + // (network, mint-address) -> void + callback open-token-detail(string, string); + + // (entry) -> void + callback add-token(TokenTileEntry); + + // (uuid) -> void + callback remove-token(string); callback update-cache-size(); callback remove-all-cache(); diff --git a/ui/panel/bodyer/home.slint b/ui/panel/bodyer/home.slint index f474c41..86d7f57 100644 --- a/ui/panel/bodyer/home.slint +++ b/ui/panel/bodyer/home.slint @@ -1,63 +1,85 @@ import { Theme, Icons } from "../../theme.slint"; import { Store, HomeIndex } from "../../store.slint"; import { Logic } from "../../logic.slint"; -import { AccountBalance, Head, IconBtn, TextBtn, Banner, Label, Link, SettingDetail, SettingDetailInner, TokenTile, TokenTileEntry, TokenList } from "../../base/widgets.slint"; +import { AccountBalance, Head, IconBtn, TextBtn, Banner, Label, Link, SettingDetail, SettingDetailInner, TokenTile, TokenTileEntry, TokenTileWithSwitchEntry, TokenList, TokenListWithSwitch } from "../../base/widgets.slint"; import { TestModeBanner } from "test-mode-banner.slint"; export global TokensSetting { in-out property <[TokenTileEntry]> entries: [ { uuid: "uuid-1", - icon: Icons.account, + icon: Icons.solana, symbol: "SOL", balance: "100.34", - balance-usdt: "$12321.34" + balance-usdt: "$1221.34" }, { uuid: "uuid-2", - icon: Icons.account, + icon: Icons.token, + symbol: "BOOM", + balance: "130.4", + balance-usdt: "$100.34", + }, + { + uuid: "uuid-2", + icon: Icons.usdt, symbol: "USDT", balance: "100.34", balance-usdt: "$100.34", }, { uuid: "uuid-3", - icon: Icons.account, + icon: Icons.usdc, symbol: "DOG", balance: "120.34", - balance-usdt: "$1100.4", + balance-usdt: "$190.7", }, - ]; - - in-out property <[TokenTileEntry]> all-account-tokens:[ { - uuid: "uuid-1", - icon: Icons.account, - symbol: "SOL", - balance: "100.34", - balance-usdt: "$12321.34" + uuid: "uuid-3", + icon: Icons.doge, + symbol: "DOG", + balance: "120.34", + balance-usdt: "$300.4", }, { - uuid: "uuid-2", - icon: Icons.account, - symbol: "USDT", - balance: "100.34", - balance-usdt: "$100.34", + uuid: "uuid-3", + icon: Icons.btc, + symbol: "BTC", + balance: "120.34", + balance-usdt: "$5380.4", }, { uuid: "uuid-3", - icon: Icons.account, - symbol: "DOG", + icon: Icons.eth, + symbol: "ETH", balance: "120.34", - balance-usdt: "$1100.4", + balance-usdt: "$6360.4", }, + ]; + + in-out property <[TokenTileWithSwitchEntry]> all-account-tokens:[ { - uuid: "uuid-3", - icon: Icons.account, - symbol: "BOOM", - balance: "130.34", - balance-usdt: "$1130.8", + entry: { + uuid: "uuid-1", + icon: Icons.solana, + symbol: "SOL", + balance: "100.34", + balance-usdt: "$1221.34" + }, + checked: true, + enabled: false, }, + { + entry: { + uuid: "uuid-1", + icon: Icons.usdt, + symbol: "USDT", + balance: "10.34", + balance-usdt: "$12.34" + }, + checked: true, + enabled: true, + } ]; } @@ -88,15 +110,29 @@ component ManagementBtn inherits VerticalLayout { icon: Icons.management; text: Logic.tr(Store.is-cn, "管理代币"); clicked => { - Logic.open-tokens-management(Logic.get-current-network(), Store.current-account.pubkey); + Logic.refresh-tokens-management-entries(Logic.get-current-network(), Store.current-account.pubkey); Store.current-home-index = HomeIndex.Management; } } } component Management inherits SettingDetail { - title: Logic.tr(Store.is-cn, "管理通证"); - SettingDetailInner { } + title: Logic.tr(Store.is-cn, "管理代币"); + TokenListWithSwitch { + entries: TokensSetting.all-account-tokens; + + clicked(entry) => { + Logic.open-token-detail(Logic.get-current-network(), entry.uuid); + } + + toggled(checked, entry) => { + if (checked) { + Logic.add-token(entry); + } else { + Logic.remove-token(entry.uuid); + } + } + } } component Send inherits SettingDetail { @@ -115,7 +151,7 @@ component Body inherits Rectangle { TokenList { entries: TokensSetting.entries; clicked(entry) => { - Logic.open-send-token(Logic.get-current-network(), entry.uuid); + Logic.open-send-token-page(Logic.get-current-network(), entry.uuid); Store.current-home-index = HomeIndex.Send; } } diff --git a/ui/store.slint b/ui/store.slint index 45795b8..b4339c8 100644 --- a/ui/store.slint +++ b/ui/store.slint @@ -63,7 +63,7 @@ export struct SettingDeveloperMode { } export global Store { - in-out property current-home-index: HomeIndex.Home; + in-out property current-home-index: HomeIndex.Management; in-out property current-setup-index: SetupIndex.SetupType; in-out property current-tab-index: TabIndex.Home; private property current-tab-index-tmp: TabIndex.None; diff --git a/ui/theme.slint b/ui/theme.slint index e66b984..dbcac19 100644 --- a/ui/theme.slint +++ b/ui/theme.slint @@ -146,6 +146,15 @@ export global Icons { out property add-light : @image-url("./images/add-light.svg"); out property management : @image-url("./images/management.svg"); + out property solana : @image-url("./images/solana.svg"); + out property usdt : @image-url("./images/usdt.svg"); + out property usdc : @image-url("./images/usdc.svg"); + out property btc : @image-url("./images/btc.svg"); + out property eth : @image-url("./images/eth.svg"); + out property doge : @image-url("./images/doge.svg"); + out property curve : @image-url("./images/curve.svg"); + out property token : @image-url("./images/token.svg"); + out property wechat-fill: @image-url("./images/wechat-fill.svg"); out property wechat-light: @image-url("./images/wechat-light.svg"); out property metamask-light: @image-url("./images/metamask-light.svg"); @@ -154,4 +163,6 @@ export global Icons { out property landing-reading: @image-url("./images/landing-reading.svg"); out property landing-welcome: @image-url("./images/landing-welcome.svg"); out property landing-language-switch: @image-url("./images/landing-language-switch.svg"); + out property landing-account: @image-url("./images/landing-account.svg"); + out property landing-send: @image-url("./images/landing-send.svg"); }