[*] improve ui

src/version.rs

@@ -1 +1 @@
-pub static VERSION: &str = "v0.9.4";
+pub static VERSION: &str = "v0.9.5";

ui/appwindow.slint

@@ -3,25 +3,25 @@ import { Logic } from "./logic.slint";
 import { Store } from "./store.slint";
 import { Util } from "./util.slint";
 import { Panel } from "./panel/panel.slint";
-import { Toast, IconsDialog, IconsDialogSetting, OkCancelDialogV2, Blanket, LanguageDialog, InputBar, OkCancelDialogSetting, LandingPage } from "./base/widgets.slint";
+import { ToolTip, Toast, IconsDialog, IconsDialogSetting, OkCancelDialogV2, Blanket, LanguageDialog, InputBar, OkCancelDialogSetting, LandingPage } from "./base/widgets.slint";
 
 export component AppWindow inherits Window {
     default-font-size: Theme.default-font-size;
     default-font-family: Theme.default-font-family;
-    height: Theme.default-height;
+
+    // uncomment when building desktop app
+    // height: Theme.default-height;
 
     background: Theme.base-background;
     icon: Icons.brand;
     title: "rssbox";
 
     Panel { }
 
-    if IconsDialogSetting.show || OkCancelDialogSetting.body-text != "" : Blanket {
-        TouchArea {
-            clicked => {
-                IconsDialogSetting.show = false;
-                OkCancelDialogSetting.body-text = "";
-            }
+    if IconsDialogSetting.show || OkCancelDialogSetting.body-text != "": Blanket {
+        clicked => {
+            IconsDialogSetting.show = false;
+            OkCancelDialogSetting.body-text = "";
         }
     }
 
@@ -37,6 +37,8 @@ export component AppWindow inherits Window {
         width: Math.min(root.width * 0.9, 380px);
     }
 
+    if Store.tool-tip.show && Store.tool-tip.text != "": ToolTip { }
+
     if Store.message.text != "": Toast {
         x: root.width / 2 - self.width / 2;
         y: 50px;

ui/base/blanket.slint

@@ -6,5 +6,7 @@ export component Blanket inherits Rectangle {
 
     callback clicked <=> ta.clicked;
 
-    ta := TouchArea { }
+    ta := TouchArea {
+        mouse-cursor: MouseCursor.pointer;
+    }
 }

ui/base/elevated-btn.slint

@@ -6,7 +6,7 @@ export component ElevatedBtn inherits Rectangle {
     width: 45px;
     height: self.width;
     border-radius: root.width / 2;
-    background: Theme.secondary-background;
+    background: btn.has-hover ? Theme.secondary-background.darker(10%) : Theme.secondary-background;
     drop-shadow-blur: Theme.padding;
     drop-shadow-color: Theme.secondary-background-drop-shadow;
 
@@ -17,5 +17,6 @@ export component ElevatedBtn inherits Rectangle {
 
     btn := IconBtn {
         icon-width: root.width * 0.65;
+        show-icon-hover-background: false;
     }
 }

ui/base/icon-btn.slint

@@ -1,3 +1,4 @@
+import { Palette } from "std-widgets.slint";
 import { Theme } from "../theme.slint";
 import { Label } from "./label.slint";
 
@@ -6,7 +7,10 @@ export component IconBtn inherits Rectangle {
     in-out property colorize <=> img.colorize;
     in-out property icon-width <=> img.width;
     in-out property icon-rotation-angle <=> img.rotation-angle;
+    in-out property mouse-cursor <=> touch.mouse-cursor;
+    out property has-hover <=> touch.has-hover;
 
+    in-out property <bool> show-icon-hover-background: true;
     in-out property <bool> is-ltr: true;
     in-out property <bool> enable-rotation-animation: false;
     in-out property <bool> use-auto-size: false;
@@ -21,13 +25,22 @@ export component IconBtn inherits Rectangle {
     in-out property <color> bg-pressed-color: Colors.transparent;
 
     border-radius: Theme.border-radius;
-    background: touch.pressed ? bg-pressed-color : bg-color;
+    background: touch.has-hover ? bg-color.darker(10%) : (touch.pressed ? bg-pressed-color : bg-color);
 
     animate background {
         duration: Theme.default-animate-duration;
         easing: ease-in-out;
     }
 
+    // only is a icon showing this hover color
+    if (text == "" && show-icon-hover-background): Rectangle {
+        x: hbox.x - Theme.spacing * 2 - (Theme.icon-size - img.width) / 2;
+        width: Theme.icon-size + Theme.spacing * 4;
+        height: self.width;
+        border-radius: self.width / 2;
+        background: touch.has-hover ? Palette.background : Colors.transparent;
+    }
+
     hbox := HorizontalLayout {
         alignment: center;
         spacing: Theme.spacing * 2;
@@ -63,6 +76,7 @@ export component IconBtn inherits Rectangle {
     fs := FocusScope { }
 
     touch := TouchArea {
+        mouse-cursor: MouseCursor.pointer;
         clicked => {
             if (enable-rotation-animation) {
                 if (icon-rotation-angle == 0) {
@@ -72,7 +86,6 @@ export component IconBtn inherits Rectangle {
                 }
             }
             fs.focus();
-            fs.clear-focus();
             root.clicked();
         }
     }

ui/base/setting-entry.slint

@@ -32,5 +32,7 @@ export component SettingEntry inherits Rectangle {
         }
     }
 
-    ta := TouchArea { }
+    ta := TouchArea {
+        mouse-cursor: MouseCursor.pointer;
+    }
 }

ui/base/tab-btn.slint

@@ -44,6 +44,7 @@ export component TabBtn inherits Rectangle {
     fs := FocusScope {}
 
     touch := TouchArea {
+        mouse-cursor: MouseCursor.pointer;
         clicked => {
             fs.focus();
             root.clicked();

ui/base/tool-tip.slint

@@ -0,0 +1,26 @@
+import { Theme } from "../theme.slint";
+
+export component ToolTip inherits Rectangle {
+    in-out property <string> pos: "up";
+    in-out property text <=> tip-txt.text;
+    in property <length> parent-width: 0px;
+    in property <length> parent-height: 0px;
+
+    x: pos == "left" ? (-self.width - Theme.padding) : (pos == "right" ? (parent-width + Theme.padding) : -(self.width - parent-width) / 2);
+
+    y: (pos == "left" || pos == "right") ? (parent-height - self.height) / 2 : (pos == "bottom" ? parent-height + Theme.padding : -self.height - Theme.padding);
+
+    width: tip-txt.preferred-width + Theme.padding * 2;
+    height: tip-txt.preferred-height + Theme.padding / 2;
+
+    background: Theme.base-background;
+    border-color: Theme.base-border-color;
+    border-width: 1px;
+
+    tip-txt := Text {
+        horizontal-alignment: center;
+        vertical-alignment: center;
+        font-size: Theme.default-font-size - 2px;
+        color: Theme.primary-text-color;
+    }
+}

ui/base/widgets.slint

@@ -23,6 +23,7 @@ import { RadioBtn } from "./radio-btn.slint";
 import { InputBar } from "./input-bar.slint";
 import { ElevatedBtn } from "./elevated-btn.slint";
 import { LandingPage } from "./landing-page.slint";
+import { ToolTip } from "./tool-tip.slint";
 
 export {
     Toast,
@@ -57,5 +58,6 @@ export {
     LanguageDialog,
     RadioBtn,
     InputBar,
-    LandingPage
+    LandingPage,
+    ToolTip
 }

ui/panel/bodyer/add.slint

@@ -52,6 +52,7 @@ component RssList inherits Rectangle {
             border-radius: Theme.border-radius;
 
             touch := TouchArea {
+                mouse-cursor: MouseCursor.pointer;
                 clicked => {
                     root.current-uuid = data.uuid;
                 }
@@ -69,6 +70,8 @@ component RssList inherits Rectangle {
                             icon: IconsDialogSetting.icons[Math.max(0, Math.min(data.icon-index, IconsDialogSetting.icons.length - 1))];
                             width: Theme.icon-size * 1.2;
                             background: Colors.transparent;
+                            show-icon-hover-background: false;
+                            mouse-cursor: MouseCursor.default;
                         }
                     }
 

ui/panel/bodyer/rss.slint

@@ -59,6 +59,7 @@ component RssListItems inherits Rectangle {
 
             Rectangle {
                 touch := TouchArea {
+                    mouse-cursor: MouseCursor.pointer;
                     clicked => {
                         Logic.switch-rss(Store.current-rss-uuid, data.uuid);
                         root.switch-rss();
@@ -434,12 +435,10 @@ export component EntryList inherits Rectangle {
                 if (Store.rss-lists.length == 0) {
                     Logic.load-all-rss();
                 }
-
                 current-list-index = Logic.current-rsslist-index(Store.current-rss-uuid);
                 if (current-list-index >= 0 && current-list-index < Store.rss-lists.length) {
                     Store.rss-lists[current-list-index].current-viewport-y = 0;
                 }
-
                 Logic.sync-rss(Store.current-rss-uuid, true);
             }
         }

ui/store.slint

@@ -230,6 +230,10 @@ export global Store {
           "- Click the top-right list icon of the [RSS] selected card to open the RSS list.\n\n" + "- Swipe right on the [RSS] and [Collection] items to collect or delete items.\n\n" + "- After setting, click the back button in the upper left corner. Save the settings.\n\n" + "- In case of don't show the same articles, It will cache the articles after syncing. You can enter the [Setting] selected card to clear cache.\n\n",
     };
 
+    in-out property <{show: bool, pos: string, text: string, parent-width: length, parent-height: length}> tool-tip:{
+        show: false,
+    };
+
     public function switch-tab(tab-index: TabIndex) {
         current-tab-index = tab-index;
     }