[*] Improve UI

heng30 · Sep 30, 2023 · 86b4472 · 86b4472
1 parent 14dcb2e
commit 86b4472
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 23 deletions.
diff --git a/rssbox/ui/base/tab-btn.slint b/rssbox/ui/base/tab-btn.slint
@@ -19,7 +19,7 @@ export component TabBtn inherits Rectangle {
         VerticalLayout {
             alignment: center;
             img := Image {
-                height: txt.font-size;
+                height: Theme.icon-size;
                 width: self.height;
                 colorize: root.item-color;
 
@@ -30,16 +30,14 @@ export component TabBtn inherits Rectangle {
             }
         }
 
-        VerticalLayout {
-            alignment: center;
-            txt := Text {
-                color: root.item-color;
-                font-size: Theme.default-font-size;
+        txt := Text {
+            vertical-alignment: center;
+            color: root.item-color;
+            font-size: Theme.default-font-size;
 
-                animate color {
-                    duration: Theme.default-animate-duration;
-                    easing: ease-in-out;
-                }
+            animate color {
+                duration: Theme.default-animate-duration;
+                easing: ease-in-out;
             }
         }
     }

diff --git a/rssbox/ui/dialog/setting/ui.slint b/rssbox/ui/dialog/setting/ui.slint
@@ -53,7 +53,7 @@ export component UI inherits VerticalLayout {
             }
 
             font-size-spin-box := SpinBox {
-                minimum: 15;
+                minimum: 10;
                 maximum: 50;
             }
         }

diff --git a/rssbox/ui/leftPanel/header.slint b/rssbox/ui/leftPanel/header.slint
@@ -1,36 +1,45 @@
 import { Theme } from "../theme.slint";
 import { Store } from "../store.slint";
 import { Logic } from "../logic.slint";
-import { TabBtn } from "../base/tab-btn.slint";
+import { IconBtn } from "../base/icon-btn.slint";
 
-export component Header inherits HorizontalLayout {
+export component Header inherits Rectangle {
     height: Theme.header-height;
-    alignment: space-around;
 
-    TabBtn {
-        text-color: Theme.regular-text-color;
+    function anchor-pos-x(index: int) -> length {
+        return Theme.padding + index * Theme.icon-size + Theme.spacing * 2 * index;
+    }
+
+    IconBtn {
+        x: anchor-pos-x(0);
+        z: 2;
+        tip-pos: "right";
+        tip-text: Store.translator.new;
         icon: @image-url("../images/add.svg");
-        text: Store.translator.new;
         clicked => {
             Logic.reset-rss-dialog();
             Store.rss-dialog-setting.handle-type = "rss-add";
             Store.rss-dialog-setting.show = true;
         }
     }
-    TabBtn {
-        text-color: Theme.regular-text-color;
+    IconBtn {
+        x: anchor-pos-x(1);
+        z: 1;
+        tip-pos: "right";
+        tip-text: Store.translator.edit;
         icon: @image-url("../images/edit-text.svg");
-        text: Store.translator.edit;
         clicked => {
             Logic.set-rss-dialog(Store.current-rss-uuid);
             Store.rss-dialog-setting.handle-type = "rss-edit";
             Store.rss-dialog-setting.show = true;
         }
     }
-    TabBtn {
-        text-color: Theme.regular-text-color;
+    IconBtn {
+        x: anchor-pos-x(2);
+        z: 0;
+        tip-pos: "right";
+        tip-text: Store.translator.delete;
         icon: @image-url("../images/delete-light.svg");
-        text: Store.translator.delete;
         clicked => {
             Store.ok-cancel-dialog-setting.title-type = "warning";
             Store.ok-cancel-dialog-setting.title-text = Store.translator.warning;