[*] improve ui

heng30 · Jun 18, 2024 · 3c40a71 · 3c40a71
1 parent 907aaef
commit 3c40a71
Show file tree

Hide file tree

Showing 12 changed files with 30 additions and 46 deletions.
diff --git a/ui/appwindow.slint b/ui/appwindow.slint
@@ -3,14 +3,14 @@ import { Logic } from "./logic.slint";
 import { Store } from "./store.slint";
 import { Util } from "./util.slint";
 import { Panel } from "./panel/panel.slint";
-import { ToolTip, Toast, IconsDialog, IconsDialogSetting, OkCancelDialogV2, Blanket, LanguageDialog, InputBar, OkCancelDialogSetting, LandingPage } from "./base/widgets.slint";
+import { 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;
 
     // uncomment when building desktop app
-    // height: Theme.default-height;
+    height: Theme.default-height;
 
     background: Theme.base-background;
     icon: Icons.brand;
@@ -37,8 +37,6 @@ 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;

diff --git a/ui/base/dialog.slint b/ui/base/dialog.slint
@@ -43,6 +43,7 @@ export component Dialog inherits Rectangle {
                         width: Theme.icon-size;
                         icon: Icons.close;
                         colorize: txt.color;
+                        show-icon-hover-background: false;
                         clicked => {
                             root.cancel-clicked();
                         }

diff --git a/ui/base/icon-btn.slint b/ui/base/icon-btn.slint
@@ -8,6 +8,7 @@ export component IconBtn inherits Rectangle {
     in-out property icon-width <=> img.width;
     in-out property icon-rotation-angle <=> img.rotation-angle;
     in-out property mouse-cursor <=> touch.mouse-cursor;
+    in-out property enabled-toucharea<=> touch.enabled;
     out property has-hover <=> touch.has-hover;
 
     in-out property <bool> show-icon-hover-background: true;
@@ -34,7 +35,7 @@ export component IconBtn inherits Rectangle {
 
     // 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;
+        x: img.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;

diff --git a/ui/base/link.slint b/ui/base/link.slint
@@ -9,5 +9,7 @@ export component Link inherits Text {
     font-size: Theme.title5-font-size;
     color: root.is-read ? Theme.have-read-text-color : Theme.link-text-color;
 
-    touch := TouchArea { }
+    touch := TouchArea {
+        mouse-cursor: MouseCursor.pointer;
+    }
 }
diff --git a/ui/base/radio-btn.slint b/ui/base/radio-btn.slint
@@ -33,7 +33,7 @@ export component RadioBtn inherits Rectangle {
                 border-radius: self.width / 2;
                 border-color: root.checked ? Palette.accent-background : Theme.secondary-text-color;
 
-                if root.checked : Rectangle {
+                if root.checked: Rectangle {
                     width: 60%;
                     height: self.width;
                     background: parent.border-color;
@@ -44,11 +44,12 @@ export component RadioBtn inherits Rectangle {
 
         VerticalLayout {
             alignment: center;
-            txt := Label {}
+            txt := Label { }
         }
     }
 
     ta := TouchArea {
+        mouse-cursor: MouseCursor.pointer;
         clicked => {
             if (!root.checked) {
                 root.check();

diff --git a/ui/base/tool-tip.slint → ui/base/tip.slint b/ui/base/tool-tip.slint → ui/base/tip.slint
@@ -1,6 +1,6 @@
 import { Theme } from "../theme.slint";
 
-export component ToolTip inherits Rectangle {
+export component Tip inherits Rectangle {
     in-out property <string> pos: "up";
     in-out property text <=> tip-txt.text;
     in property <length> parent-width: 0px;

diff --git a/ui/base/widgets.slint b/ui/base/widgets.slint
@@ -23,7 +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";
+import { Tip } from "./tip.slint";
 
 export {
     Toast,
@@ -59,5 +59,5 @@ export {
     RadioBtn,
     InputBar,
     LandingPage,
-    ToolTip
+    Tip
 }
diff --git a/ui/panel/bodyer/add.slint b/ui/panel/bodyer/add.slint
@@ -94,6 +94,7 @@ component RssList inherits Rectangle {
                             icon-width: Theme.icon-size * 0.8;
                             colorize: Theme.danger-color;
                             border-radius: Theme.border-radius;
+                            show-icon-hover-background: false;
                         }
                     }
 

diff --git a/ui/panel/bodyer/rss.slint b/ui/panel/bodyer/rss.slint
@@ -115,6 +115,7 @@ component RssListItems inherits Rectangle {
                                 icon-width: Theme.icon-size * 0.8;
                                 colorize: Theme.danger-color;
                                 border-radius: Theme.border-radius;
+                                show-icon-hover-background: false;
                             }
                         }
 

diff --git a/ui/panel/bodyer/setting.slint b/ui/panel/bodyer/setting.slint
@@ -9,34 +9,20 @@ import { CenterLayout, OkCancelDialogSetting, Divider, Link, Brand, IconBtn, Lab
 component UI inherits SettingDetail {
     title: Logic.tr(Store.is-cn, "界 面");
 
-    in-out property <string> language: "cn";
-
     public function get() -> SettingUI {
         font-size-lineedit.clear-focus();
 
         return {
             font-size: font-size-lineedit.text,
             font-family: fonts-combox.current-value,
-            language: root.language,
-            is-dark: Theme.is-dark,
+            language: Store.setting-ui.language,
+            is-dark: Store.setting-ui.is-dark,
         };
     }
 
-    public function set(setting: SettingUI) {
-        font-size-lineedit.text = setting.font-size;
-        fonts-combox.current-value = setting.font-family;
-        root.language = setting.language;
-
-        if (setting.font-size == "") {
-            font-size-lineedit.text = Store.setting-ui.font-size;
-        }
-
-        if (setting.font-family == "") {
-            fonts-combox.current-value = "Default";
-        }
-        if (root.language == "") {
-            root.language = "cn";
-        }
+    public function set() {
+        font-size-lineedit.text = Store.setting-ui.font-size;
+        fonts-combox.current-value = Store.setting-ui.font-family;
     }
 
     SettingDetailInner {
@@ -75,20 +61,18 @@ component UI inherits SettingDetail {
                     width: 50%;
                     cn-radio := RadioBtn {
                         text: "中文";
-                        checked: root.language == "cn";
+                        checked: Store.setting-ui.language == "cn";
                         check => {
-                            root.language = "cn";
-                            Logic.set-setting-ui(root.get());
+                            Store.setting-ui.language = "cn";
                         }
                     }
                 }
 
                 en-radio := RadioBtn {
                     text: "English";
-                    checked: root.language == "en";
+                    checked: Store.setting-ui.language == "en";
                     check => {
-                        root.language = "en";
-                        Logic.set-setting-ui(root.get());
+                        Store.setting-ui.language = "en";
                     }
                 }
             }
@@ -107,7 +91,6 @@ component UI inherits SettingDetail {
                         checked: !Theme.is-dark;
                         check => {
                             Theme.toggle();
-                            Logic.set-setting-ui(root.get());
                         }
                     }
                 }
@@ -117,7 +100,6 @@ component UI inherits SettingDetail {
                     checked: Theme.is-dark;
                     check => {
                         Theme.toggle();
-                        Logic.set-setting-ui(root.get());
                     }
                 }
             }
@@ -827,7 +809,7 @@ export component Setting inherits Rectangle {
 
         switch(index) => {
             if (index == SettingDetailIndex.UI) {
-                ui.set(Logic.get-setting-ui());
+                ui.set();
             } else if (index == SettingDetailIndex.Reading) {
                 reading.set(Logic.get-setting-reading());
             } else if (index == SettingDetailIndex.Sync) {

diff --git a/ui/store.slint b/ui/store.slint
@@ -205,6 +205,7 @@ export global Store {
         font-size: "16",
         font-family: "Source Han Serif CN",
         language: "cn",
+        is-dark: false,
     };
 
     in-out property <SettingUpdate> setting-update: {
@@ -230,10 +231,6 @@ 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;
     }

diff --git a/ui/theme.slint b/ui/theme.slint
@@ -4,6 +4,7 @@ import "./fonts/SourceHanSerifCN.ttf";
 import "./fonts/Plaster-Regular.ttf";
 
 export global Theme {
+    out property <bool> is-dark: Store.setting-ui.is-dark;
     out property <length> padding: 4px;
     out property <length> spacing: 4px;
     out property <length> header-height: 35px;
@@ -57,14 +58,13 @@ export global Theme {
 
     out property <[color]> tag-colors: is-dark ? [#a3b3cc, #94c2af, #9ac0c4, #b2acca, #cca8a3, #caa6bc, #a8c085, #b0b2b6] : [#CCE0FF, #BAF3DB, #C1F0F5, #DFD8FD, #FFD2CC, #FDD0EC, #D3F1A7, #DCDFE4];
 
-    in-out property <bool> is-dark: false;
     public function set-dark(flag: bool) {
-        is-dark = flag;
+        Store.setting-ui.is-dark = flag;
         Palette.color-scheme = is-dark ? ColorScheme.dark : ColorScheme.light;
     }
 
     public function toggle() {
-        is-dark = !is-dark;
+        Store.setting-ui.is-dark = !Store.setting-ui.is-dark;
         Palette.color-scheme = is-dark ? ColorScheme.dark : ColorScheme.light;
     }
 }