[*] update normally

heng30 · Aug 29, 2024 · 6ddf143 · 6ddf143
1 parent 3a1f83c
commit 6ddf143
Show file tree

Hide file tree

Showing 31 changed files with 495 additions and 113 deletions.
diff --git a/src/logic/tr.rs b/src/logic/tr.rs
@@ -295,6 +295,8 @@ pub fn tr(text: &str) -> String {
         ("Jump to", "跳转到"),
         ("Example", "例子"),
         ("Detail", "说明"),
+        ("Log in", "登陆"),
+        ("Sign in", "注册"),
     ]);
 
     if let Some(txt) = items.get(text) {

diff --git a/ui/base/account-balance.slint b/ui/base/account-balance.slint
@@ -8,7 +8,7 @@ export component AccountBalance inherits Rectangle {
     in-out property account-name <=> account.text;
     in-out property balance <=> balance-label.text;
 
-    callback account-clicked <=> account.clicked;
+    callback name-clicked <=> account.clicked;
     callback copy <=> copy-btn.clicked;
 
     VerticalLayout {

diff --git a/ui/base/address-book.slint b/ui/base/address-book.slint
@@ -99,6 +99,7 @@ export component AddressBookDetail inherits SettingDetail {
     private property <AddressBookEntry> entry: AddressBookSetting.current-entry;
     in property <image> qr-code: Icons.no-data;
     in-out property address <=> address-input.text;
+    in-out property name <=> name-input.text;
 
     // (uuid, name) -> void
     callback update-name(string, string);
@@ -132,10 +133,11 @@ export component AddressBookDetail inherits SettingDetail {
                 text: Logic.tr("Address name");
             }
 
-            LineInput {
+            name-input := LineInput {
                 enabled: AddressBookSetting.enabled-input;
                 width: root.width - Theme.padding * 4;
                 text: entry.name;
+                is-show-icon: true;
                 icon: self.enabled ? Icons.checked-box : Icons.edit;
                 clicked => {
                     self.enabled = !self.enabled;
@@ -166,6 +168,7 @@ export component AddressBookDetail inherits SettingDetail {
                 text: entry.address;
 
                 icon: self.enabled ? Icons.checked-box : Icons.edit;
+                is-show-icon: true;
                 clicked => {
                     self.enabled = !self.enabled;
 

diff --git a/ui/base/btn.slint b/ui/base/btn.slint
@@ -7,7 +7,7 @@ export component CancelBtn inherits IconBtn {
     use-auto-size: true;
     icon: Icons.cancel;
     icon-size: Theme.icon-size;
-    border-radius: self.height / 2;
+    border-radius: Theme.border-radius;
     bg-color: Theme.info-color.brighter(50%);
     bg-pressed-color: self.bg-color.darker(30%);
     colorize: self.bg-pressed-color.darker(100%);
@@ -17,10 +17,10 @@ export component CancelBtn inherits IconBtn {
 export component ConfirmBtn inherits IconBtn {
     use-auto-size: true;
     icon: Icons.success;
-    border-radius: self.height / 2;
-    bg-color: Theme.success-color.darker(20%);
+    border-radius: Theme.border-radius;
+    bg-color: Theme.third-brand-color.darker(20%);
     bg-pressed-color: self.bg-color.darker(30%);
-    colorize: Theme.base-color;
+    colorize: Theme.light-text-color;
     text: Logic.tr("Confirm");
 }
 

diff --git a/ui/base/circle-progress.slint b/ui/base/circle-progress.slint
@@ -27,7 +27,7 @@ export component CircleProgress inherits Rectangle {
 
     in-out property <string> finished-text: Logic.tr("Finished");
     in-out property <string> unfinished-text: root.calc-percent(root.ring-angle) + "%";
-    in-out property <color> finished-text-color: Colors.white;
+    in-out property <color> finished-text-color: Theme.light-text-color;
     in-out property <color> unfinished-text-color: Theme.invert-base-color;
     in-out property font-size <=> txt.font-size;
 

diff --git a/ui/base/dialog.slint b/ui/base/dialog.slint
@@ -3,7 +3,7 @@ import { Store } from "../store.slint";
 import { Logic } from "../logic.slint";
 import { IconBtn } from "./icon-btn.slint";
 import { CenterLayout } from "./center-layout.slint";
-import { TextBtn } from "./btn.slint";
+import { ConfirmBtn, CancelBtn } from "./btn.slint";
 
 export component Dialog inherits Rectangle {
     in-out property <string> title;
@@ -14,9 +14,6 @@ export component Dialog inherits Rectangle {
     in-out property <bool> is-hide-cancel-btn: false;
     in-out property <bool> is-prevent-event-forward: false;
 
-    in-out property <color> cancel-text-color: Theme.info-color;
-    in-out property <color> confirm-text-color: Theme.third-brand-color;
-
     callback close <=> cancel-clicked;
     callback canceled <=> cancel-clicked;
     callback confirmed <=> ok-clicked;
@@ -39,7 +36,7 @@ export component Dialog inherits Rectangle {
             height: txt.preferred-height * 1.33;
             background: root.title-bg;
             txt := Text {
-                color: Colors.white;
+                color: Theme.light-text-color;
                 font-size: Theme.title3-font-size;
                 text: root.title;
             }
@@ -70,22 +67,18 @@ export component Dialog inherits Rectangle {
             spacing: Theme.spacing * 8;
             padding: Theme.padding * 4;
 
-            if !is-hide-cancel-btn: TextBtn {
+            if !is-hide-cancel-btn: CancelBtn {
                 icon: Icons.cancel;
                 text: Logic.tr("Cancel");
-                text-color: root.cancel-text-color;
-                colorize: self.text-color;
 
                 clicked => {
                     root.cancel-clicked();
                 }
             }
 
-            if !is-hide-confirm-btn: TextBtn {
+            if !is-hide-confirm-btn: ConfirmBtn {
                 icon: Icons.success;
                 text: Logic.tr("Confirm");
-                text-color: root.confirm-text-color;
-                colorize: self.text-color;
 
                 clicked => {
                     root.ok-clicked();

diff --git a/ui/base/line-input.slint b/ui/base/line-input.slint
@@ -28,6 +28,7 @@ export component LineInput inherits Rectangle {
     in-out property text <=> text-input.text;
     in-out property font-size <=> text-input.font-size;
     in property input-type <=> text-input.input-type;
+    in property read-only <=> text-input.read-only;
     in property <bool> enabled <=> text-input.enabled;
     in property <string> placeholder-text;
 
@@ -87,6 +88,7 @@ export component LineInput inherits Rectangle {
                     text-input := TextInput {
                         single-line: true;
                         vertical-alignment: TextVerticalAlignment.center;
+                        color: Theme.primary-text-color;
 
                         accepted => {
                             self.clear-focus();

diff --git a/ui/base/login.slint → ui/base/log-in.slint b/ui/base/login.slint → ui/base/log-in.slint
@@ -6,19 +6,18 @@ import { IconBtn } from "./icon-btn.slint";
 import { Label } from "./label.slint";
 import { Head } from "./head.slint";
 import { LineInput } from "./line-input.slint";
-import { CancelBtn, ConfirmBtn } from "./btn.slint";
+import { TextBtnWithoutIcon } from "./btn.slint";
 import { SettingDetailInner, SettingDetailInnerVbox, SettingDetailLabel } from "./setting-detail.slint";
 
-export component Login inherits Rectangle {
+export component LogIn inherits Rectangle {
     in property <bool> is-show-header: true;
 
     private property <string> error-message;
 
     callback back();
-    callback cancel();
 
     // (username, password) -> string
-    callback confirm(string, string) -> string;
+    callback confirmed(string, string) -> string;
 
     public function reset() {
         error-message = "";
@@ -40,6 +39,17 @@ export component Login inherits Rectangle {
         SettingDetailInner {
             vbox-alignment: LayoutAlignment.center;
 
+            SettingDetailInnerVbox {
+                HorizontalLayout {
+                    alignment: LayoutAlignment.center;
+                    Label {
+                        text: Logic.tr("Log in");
+                        font-size: Theme.title1-font-size;
+                        font-weight: Theme.bold-font-weight;
+                    }
+                }
+            }
+
             SettingDetailInnerVbox {
                 username-txt := SettingDetailLabel {
                     text: Logic.tr("Please enter username");
@@ -52,6 +62,7 @@ export component Login inherits Rectangle {
                         icon: Icons.paste;
                         width: root.width - Theme.padding * 4;
                         placeholder-text: Logic.tr("Username");
+                        is-show-icon: true;
 
                         edited => {
                             root.error-message = "";
@@ -77,6 +88,7 @@ export component Login inherits Rectangle {
                     width: root.width - Theme.padding * 4;
                     placeholder-text: Logic.tr("At least 8 chars");
                     input-type: is-show-password ? InputType.text : InputType.password;
+                    is-show-icon: true;
 
                     edited => {
                         root.error-message = "";
@@ -99,24 +111,16 @@ export component Login inherits Rectangle {
                 }
             }
 
-            HorizontalLayout {
-                spacing: Theme.spacing * 10;
-                padding: Theme.padding * 5;
+            confirm-btn := TextBtnWithoutIcon {
+                width: password-lineedit.width;
+                height: self.text-height + Theme.padding * 2;
+                text: Logic.tr("Log in");
+                font-size: Theme.title3-font-size;
+                bg-color: Theme.third-brand-color;
+                text-color: Theme.light-text-color;
 
-                CancelBtn {
-                    text: Logic.tr("Cancel");
-                    clicked => {
-                        root.reset();
-                        root.cancel();
-                    }
-                }
-
-                confirm-btn := ConfirmBtn {
-                    text: Logic.tr("Confirm");
-
-                    clicked => {
-                        root.error-message = root.confirm(username-lineedit.text, password-lineedit.text);
-                    }
+                clicked => {
+                    root.error-message = root.confirmed(username-lineedit.text, password-lineedit.text);
                 }
             }
         }

diff --git a/ui/base/mnemonic.slint b/ui/base/mnemonic.slint
@@ -1,4 +1,3 @@
-import { LineEdit } from "std-widgets.slint";
 import { Theme, Icons } from "../theme.slint";
 import { Store } from "../store.slint";
 import { Logic } from "../logic.slint";
@@ -7,6 +6,7 @@ import { IconBtn } from "icon-btn.slint";
 import { CancelBtn, ConfirmBtn, TextBtn } from "btn.slint";
 import { Label } from "label.slint";
 import { Head } from "head.slint";
+import { LineInput } from "line-input.slint";
 
 export component Mnemonic inherits Rectangle {
     in-out property <[string]> mnemonics;
@@ -18,7 +18,7 @@ export component Mnemonic inherits Rectangle {
     in property <string> header-title;
 
     private property <int> cell-pre-row: 2;
-    private property <length> label-width: 20px;
+    private property <length> label-width: Theme.default-font-size * 2;
     private property <int> max-blocks: mnemonics.length == 24 ? 2 : (mnemonics.length == 12 ? 1 : 0);
 
     out property <bool> is-mnemonic-counts-12: max-blocks != 2;
@@ -28,8 +28,8 @@ export component Mnemonic inherits Rectangle {
     callback copy([string]);
     callback paste();
     callback refresh(int);
-    callback cancel();
-    callback confirm();
+    callback canceled();
+    callback confirmed();
     callback switch-mnemonic-counts(int);
 
     public function reset-mnemonics(counts: int) {
@@ -140,7 +140,7 @@ export component Mnemonic inherits Rectangle {
                             private property <int> cell-start-index: index * cell-pre-row + block-start-index;
 
                             HorizontalLayout {
-                                spacing: Theme.spacing;
+                                spacing: Theme.spacing * 2;
                                 horizontal-stretch: 1;
 
                                 Label {
@@ -149,7 +149,7 @@ export component Mnemonic inherits Rectangle {
                                     horizontal-alignment: TextHorizontalAlignment.right;
                                 }
 
-                                LineEdit {
+                                LineInput {
                                     horizontal-stretch: 1;
                                     read-only: is-read-only;
                                     text: mnemonics[cell-start-index];
@@ -162,15 +162,15 @@ export component Mnemonic inherits Rectangle {
 
                             HorizontalLayout {
                                 horizontal-stretch: 1;
-                                spacing: Theme.spacing;
+                                spacing: Theme.spacing * 2;
 
                                 Label {
                                     width: label-width;
                                     text: cell-start-index + 2;
                                     horizontal-alignment: TextHorizontalAlignment.right;
                                 }
 
-                                LineEdit {
+                                LineInput {
                                     horizontal-stretch: 1;
                                     read-only: is-read-only;
                                     text: mnemonics[cell-start-index + 1];
@@ -197,20 +197,21 @@ export component Mnemonic inherits Rectangle {
                 }
 
                 if is-show-btns: HorizontalLayout {
+                    alignment: LayoutAlignment.end;
                     padding: Theme.padding * 5;
-                    spacing: Theme.spacing * 10;
+                    spacing: Theme.spacing * 8;
 
                     CancelBtn {
                         text: Logic.tr("Cancel");
                         clicked => {
-                            root.cancel();
+                            root.canceled();
                         }
                     }
 
                     ConfirmBtn {
                         text: Logic.tr("Confirm");
                         clicked => {
-                            root.confirm();
+                            root.confirmed();
                         }
                     }
                 }

diff --git a/ui/base/no-data.slint b/ui/base/no-data.slint
@@ -18,8 +18,7 @@ export component NoDataImg inherits Rectangle {
 
         CenterLayout {
             txt := Text {
-                opacity: 0.5;
-                color: Theme.regular-text-color;
+                color: Theme.primary-text-color;
                 font-size: Theme.default-font-size + 4px;
             }
         }

diff --git a/ui/base/no-message.slint b/ui/base/no-message.slint
@@ -18,8 +18,7 @@ export component NoMessageImg inherits Rectangle {
 
         CenterLayout {
             txt := Text {
-                opacity: 0.5;
-                color: Theme.regular-text-color;
+                color: Theme.primary-text-color;
                 font-size: Theme.default-font-size + 4px;
             }
         }

diff --git a/ui/base/pagination.slint b/ui/base/pagination.slint
@@ -59,7 +59,7 @@ export component Pagination inherits Rectangle {
 
                 text: start-page + index + 1;
                 font-size: root.font-size;
-                text-color: root.real-current-page == index ? Colors.white : root.text-color;
+                text-color: root.real-current-page == index ? Theme.light-text-color : root.text-color;
 
                 clicked => {
                     root.real-current-page = index;
@@ -121,7 +121,7 @@ export component Pagination inherits Rectangle {
 
                     text: start-page + index + 1;
                     font-size: root.font-size;
-                    text-color: root.real-current-page == start-page + index ? Colors.white : root.text-color;
+                    text-color: root.real-current-page == start-page + index ? Theme.light-text-color : root.text-color;
 
                     clicked => {
                         root.real-current-page = start-page + index;
@@ -155,7 +155,7 @@ export component Pagination inherits Rectangle {
                         text: inner-real-current-page + 1;
                         font-size: root.font-size;
                         background: root.real-current-page == inner-real-current-page ? Theme.third-brand-color : Colors.transparent;
-                        text-color: root.real-current-page == inner-real-current-page ? Colors.white : root.text-color;
+                        text-color: root.real-current-page == inner-real-current-page ? Theme.light-text-color : root.text-color;
 
                         clicked => {
                             root.real-current-page = inner-real-current-page;