diff --git a/ui/base/float-btn.slint b/ui/base/elevated-btn.slint similarity index 85% rename from ui/base/float-btn.slint rename to ui/base/elevated-btn.slint index 249507e..0f31f43 100644 --- a/ui/base/float-btn.slint +++ b/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 index dec622d..d91559c 100644 --- 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 is-ltr: true; - in-out property use-auto-size: false; - in-out property text; - in-out property font-size: Theme.title4-font-size; - in-out property text-color: root.colorize; + in-out property is-ltr: true; + in-out property enable-rotation-animation: false; + in-out property use-auto-size: false; + + in-out property text; + in-out property font-size: Theme.title4-font-size; + in-out property text-color: root.colorize; callback clicked(); - in-out property bg-color: Colors.transparent; - in-out property bg-pressed-color: Colors.transparent; + in-out property bg-color: Colors.transparent; + in-out property 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 index 4a930dd..719802a 100644 --- 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 index e7efcf8..a44b5d5 100644 --- 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 index 5e864e2..8382ddf 100644 --- 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);