[*] improve ui

heng30 · Sep 13, 2024 · cd4d599 · cd4d599
1 parent 6ab2caa
commit cd4d599
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 14 deletions.
diff --git a/src/logic/toast.rs b/src/logic/toast.rs
@@ -78,14 +78,14 @@ pub fn init(ui: &AppWindow) {
             2
         };
 
+        ui.global::<ToastSetting>().set_is_timeout(false);
         ui.global::<ToastSetting>().invoke_set(msg, status);
 
         timer.start(
             TimerMode::SingleShot,
             std::time::Duration::from_secs(interval),
             move || {
-                ui.global::<ToastSetting>()
-                    .invoke_set("".into(), ToastStatus::None);
+                ui.global::<ToastSetting>().set_is_timeout(true);
             },
         );
     });

diff --git a/ui/android-window.slint b/ui/android-window.slint
@@ -38,7 +38,7 @@ export component AppWindow inherits Window {
         width: Math.min(root.width * 0.9, self.vbox-preferred-width * 2);
     }
 
-    if ToastSetting.text != "" && ToastSetting.status != ToastStatus.None: Toast {
+    if !ToastSetting.is-timeout || ToastSetting.is-hover: Toast {
         x: root.width / 2 - self.width / 2;
         y: 50px;
         inner-max-width: root.width * 80%;

diff --git a/ui/base/check-btn.slint b/ui/base/check-btn.slint
@@ -7,6 +7,8 @@ export component CheckBtn inherits Rectangle {
     in-out property <bool> checked;
     in-out property <color> text-color: Theme.primary-text-color;
 
+    in-out property h-spacing <=> hbox.spacing;
+
     width: hbox.preferred-width;
     height: hbox.preferred-height;
 
@@ -21,7 +23,7 @@ export component CheckBtn inherits Rectangle {
     }
 
     hbox := HorizontalLayout {
-        spacing: Theme.spacing * 4;
+        spacing: Theme.spacing * 2;
         alignment: start;
 
         VerticalLayout {
@@ -32,11 +34,12 @@ export component CheckBtn inherits Rectangle {
                 border-width: 2px;
                 border-radius: Theme.border-radius;
                 border-color: root.enabled ? (root.checked ? Theme.thirdly-brand-color : Theme.secondary-text-color) : Theme.disabled-color;
+                background: root.checked ? (root.enabled ? Theme.thirdly-brand-color : Colors.transparent) : Colors.transparent;
 
                 if root.checked: Image {
                     width: 60%;
                     height: self.width;
-                    colorize: parent.border-color;
+                    colorize: root.enabled ? Theme.light-text-color : parent.border-color;
                     source: Icons.checked;
                 }
             }

diff --git a/ui/base/def.slint b/ui/base/def.slint
@@ -15,7 +15,6 @@ export enum ToastStatus {
     Info,
     Warning,
     Danger,
-    None,
 }
 
 export enum ComponentPosition {

diff --git a/ui/base/radio-btn.slint b/ui/base/radio-btn.slint
@@ -7,6 +7,8 @@ export component RadioBtn inherits Rectangle {
     in-out property <bool> checked;
     in-out property <color> text-color: Theme.primary-text-color;
 
+    in-out property h-spacing <=> hbox.spacing;
+
     width: hbox.preferred-width;
     height: hbox.preferred-height;
 
@@ -17,11 +19,11 @@ export component RadioBtn inherits Rectangle {
         width: inner.width + Theme.spacing * 4;
         height: self.width;
         border-radius: self.width / 2;
-        background: ta.has-hover ? Theme.hover-background : Colors.transparent;
+        background: (ta.has-hover && !root.checked) ? Theme.hover-background : Colors.transparent;
     }
 
     hbox := HorizontalLayout {
-        spacing: Theme.spacing * 4;
+        spacing: Theme.spacing * 2;
         alignment: start;
 
         VerticalLayout {
@@ -53,7 +55,7 @@ export component RadioBtn inherits Rectangle {
     fs := FocusScope { }
 
     ta := TouchArea {
-        mouse-cursor: MouseCursor.pointer;
+        mouse-cursor: root.checked ? MouseCursor.default : MouseCursor.pointer;
         clicked => {
             fs.focus();
 

diff --git a/ui/base/toast.slint b/ui/base/toast.slint
@@ -7,6 +7,8 @@ import { ToastStatus } from "def.slint";
 export global ToastSetting {
     in-out property <string> text;
     in-out property <ToastStatus> status;
+    in-out property <bool> is-hover;
+    in-out property <bool> is-timeout: true;
 
     public function set(text: string, status: ToastStatus) {
         self.text = text;
@@ -15,7 +17,7 @@ export global ToastSetting {
 }
 
 export component Toast inherits Rectangle {
-    in-out property<length> inner-max-width: 300px;
+    in-out property <length> inner-max-width: 300px;
 
     callback clicked <=> touch.clicked;
 
@@ -48,5 +50,14 @@ export component Toast inherits Rectangle {
         }
     }
 
-    touch := TouchArea { }
+    touch := TouchArea {
+        mouse-cursor: self.has-hover ? MouseCursor.pointer : MouseCursor.default;
+        changed has-hover => {
+            if (self.has-hover) {
+                ToastSetting.is-hover = true;
+            } else {
+                ToastSetting.is-hover = false;
+            }
+        }
+    }
 }
diff --git a/ui/desktop-window.slint b/ui/desktop-window.slint
@@ -44,7 +44,7 @@ export component AppWindow inherits Window {
         width: Math.min(root.width * 0.9, self.vbox-preferred-width * 2);
     }
 
-    if ToastSetting.text != "" && ToastSetting.status != ToastStatus.None: Toast {
+    if !ToastSetting.is-timeout || ToastSetting.is-hover: Toast {
         x: root.width / 2 - self.width / 2;
         y: 50px;
         inner-max-width: root.width * 80%;

diff --git a/ui/panel/desktop/examples/button.slint b/ui/panel/desktop/examples/button.slint
@@ -58,6 +58,12 @@ export component ButtonExample inherits Flickable {
                         text: Logic.tr("Disable");
                         enabled: false;
                     }
+
+                    CheckBtn {
+                        text: Logic.tr("Disable");
+                        checked: true;
+                        enabled: false;
+                    }
                 }
 
                 code: "HorizontalLayout {\n    spacing: Theme.spacing * 20;\n\n    CheckBtn {\n        text: Logic.tr(self.checked ? \"Checked\" : \"Unchecked\");\n\n        toggled => {\n            debug(self.checked);\n        }\n    }\n\n    CheckBtn {\n        text: Logic.tr(\"Disable\");\n        enabled: false;\n    }\n}";
@@ -96,6 +102,12 @@ export component ButtonExample inherits Flickable {
                         text: Logic.tr("Disable");
                         enabled: false;
                     }
+
+                    RadioBtn {
+                        text: Logic.tr("Disable");
+                        checked: true;
+                        enabled: false;
+                    }
                 }
 
                 code: "HorizontalLayout {\n    spacing: Theme.spacing * 20;\n\n    RadioBtn {\n        text: Logic.tr(\"Unchecked\");\n\n        check => {\n            self.checked = !self.checked;\n            debug(self.checked);\n        }\n    }\n\n    RadioBtn {\n        text: Logic.tr(\"Checked\");\n        checked: true;\n\n        check => {\n            debug(self.checked);\n        }\n    }\n\n    RadioBtn {\n        text: Logic.tr(\"Disable\");\n    }\n}";

diff --git a/ui/util.slint b/ui/util.slint
@@ -80,8 +80,9 @@ export global Util {
             return Theme.warning-color.darker(10%);
         } else if (status == ToastStatus.Danger) {
             return Theme.danger-color;
+        } else {
+            return Theme.info-color;
         }
-        return Theme.info-color;
     }
 
     public pure function icon-source(status: ToastStatus) -> image {

diff --git a/ui/web-window.slint b/ui/web-window.slint
@@ -23,7 +23,7 @@ export component AppWindow inherits Window {
         width: Math.min(root.width * 0.9, self.vbox-preferred-width * 2);
     }
 
-    if ToastSetting.text != "" && ToastSetting.status != ToastStatus.None: Toast {
+    if !ToastSetting.is-timeout || ToastSetting.is-hover: Toast {
         x: root.width / 2 - self.width / 2;
         y: 50px;
         inner-max-width: root.width * 80%;