[*] imporve ui

heng30 · May 10, 2024 · e078fe3 · e078fe3
1 parent 14f93d3
commit e078fe3
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 12 deletions.
diff --git a/ui/base/float-btn.slint → ui/base/elevated-btn.slint b/ui/base/float-btn.slint → ui/base/elevated-btn.slint
@@ -11,6 +11,7 @@ export component ElevatedBtn inherits Rectangle {
     drop-shadow-color: Theme.dark-border-color;
 
     in-out property icon <=> btn.icon;
+    in-out property enable-rotation-animation <=> btn.enable-rotation-animation;
 
     callback clicked <=> btn.clicked;
 

diff --git a/ui/base/icon-btn.slint b/ui/base/icon-btn.slint
@@ -6,17 +6,19 @@ 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<bool> is-ltr: true;
-    in-out property<bool> use-auto-size: false;
 
-    in-out property<string> text;
-    in-out property<length> font-size: Theme.title4-font-size;
-    in-out property<color> text-color: root.colorize;
+    in-out property <bool> is-ltr: true;
+    in-out property <bool> enable-rotation-animation: false;
+    in-out property <bool> use-auto-size: false;
+
+    in-out property <string> text;
+    in-out property <length> font-size: Theme.title4-font-size;
+    in-out property <color> text-color: root.colorize;
 
     callback clicked();
 
-    in-out property<color> bg-color: Colors.transparent;
-    in-out property<color> bg-pressed-color: Colors.transparent;
+    in-out property <color> bg-color: Colors.transparent;
+    in-out property <color> bg-pressed-color: Colors.transparent;
 
     border-radius: Theme.border-radius;
     background: touch.pressed ? bg-pressed-color : bg-color;
@@ -34,7 +36,7 @@ export component IconBtn inherits Rectangle {
         padding-left: root.use-auto-size ? Theme.padding * 4 : 0;
         padding-right: root.use-auto-size ? Theme.padding * 4 : 0;
 
-        if !root.is-ltr && root.text != "" : Label {
+        if !root.is-ltr && root.text != "": Label {
             color: root.text-color;
             font-size: root.font-size;
             text: root.text;
@@ -43,21 +45,34 @@ export component IconBtn inherits Rectangle {
         img := Image {
             width: Theme.icon-size;
             colorize: Theme.icon-color;
+            rotation-angle: 0;
+
+            animate rotation-angle {
+                duration: Theme.default-animate-duration;
+                easing: ease-in-out;
+            }
         }
 
-        if root.is-ltr && root.text != "" : Label {
+        if root.is-ltr && root.text != "": Label {
             color: root.text-color;
             font-size: root.font-size;
             text: root.text;
         }
     }
 
-    fs := FocusScope {}
+    fs := FocusScope { }
 
     touch := TouchArea {
         clicked => {
+            if (enable-rotation-animation) {
+                if (icon-rotation-angle == 0) {
+                    icon-rotation-angle = 360deg;
+                } else {
+                    icon-rotation-angle = 0deg;
+                }
+            }
             fs.focus();
             root.clicked();
         }
-   }
+    }
 }
diff --git a/ui/base/widgets.slint b/ui/base/widgets.slint
@@ -21,7 +21,7 @@ import { TxtEdit } from "./txtedit.slint";
 import { LanguageDialog } from "./language-dialog.slint";
 import { RadioBtn } from "./radio-btn.slint";
 import { InputBar } from "./input-bar.slint";
-import { ElevatedBtn } from "./float-btn.slint";
+import { ElevatedBtn } from "./elevated-btn.slint";
 
 export {
     Toast,

diff --git a/ui/panel/bodyer/find.slint b/ui/panel/bodyer/find.slint
@@ -149,6 +149,7 @@ component Body inherits Rectangle {
         x: root.width - self.width - Theme.padding * 4;
         y: root.height - self.height - Theme.padding * 4;
         icon: Icons.refresh;
+        enable-rotation-animation: true;
 
         clicked => {
             Logic.fetch-all-find-entrys();

diff --git a/ui/panel/bodyer/rss.slint b/ui/panel/bodyer/rss.slint
@@ -189,6 +189,7 @@ component RssList inherits Rectangle {
         y: root.height - self.height - Theme.padding * 4;
 
         icon: Icons.refresh;
+        enable-rotation-animation: true;
 
         clicked => {
             Logic.sync-rss-all();
@@ -397,6 +398,7 @@ export component EntryList inherits Rectangle {
 
         ElevatedBtn {
             icon: Icons.refresh;
+            enable-rotation-animation: true;
 
             clicked => {
                 Logic.sync-rss(Store.current-rss-uuid, true);