[*] update normally

heng30 · Aug 23, 2024 · 6d53f22 · 6d53f22
1 parent 7321dc2
commit 6d53f22
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/ui/base/btn.slint b/ui/base/btn.slint
@@ -35,15 +35,20 @@ export component TextBtnWithoutIcon inherits Rectangle {
     in-out property text-color <=> label.color;
     out property has-hover <=> ta.has-hover;
 
+    in-out property <bool> is-circle: false;
+
+    out property text-width <=> label.width;
+    out property text-height <=> label.height;
+
     in-out property <length> font-size: Theme.default-font-size;
     in-out property <color> bg-color: Colors.transparent;
     in-out property <color> bg-pressed-color: self.bg-color;
 
     callback clicked <=> ta.clicked;
 
-    width: Math.max(label.preferred-width, label.preferred-height) + Theme.padding;
-    height: self.width;
-    border-radius: Theme.border-radius;
+    width: is-circle ? Math.max(label.preferred-width, label.preferred-height) + Theme.padding * 2 : label.preferred-width + Theme.padding * 2;
+    height: is-circle ? self.width : label.preferred-height + Theme.padding;
+    border-radius: is-circle ? self.width / 2 : Theme.border-radius;
     background: ta.pressed ? bg-pressed-color : (ta.has-hover ? bg-color.darker(10%) : bg-color);
 
     label := Label {

diff --git a/ui/base/pagination.slint b/ui/base/pagination.slint
@@ -39,12 +39,12 @@ export component Pagination inherits Rectangle {
         HorizontalLayout {
             spacing: Theme.spacing * 4;
             for index in total-pages: TextBtnWithoutIcon {
-                border-radius: self.width / 2;
+                is-circle: true;
                 background: root.real-current-page == index ? Theme.third-brand-color : Colors.transparent;
 
                 text: start-page + index + 1;
                 font-size: root.font-size;
-                text-color: root.real-current-page == index ? Theme.base-color : Theme.primary-text-color;
+                text-color: root.real-current-page == index ? Colors.white : Theme.primary-text-color;
 
                 clicked => {
                     root.real-current-page = index;
@@ -97,12 +97,12 @@ export component Pagination inherits Rectangle {
         HorizontalLayout {
             spacing: Theme.spacing * 4;
             for index in real-show-pages-half: TextBtnWithoutIcon {
-                border-radius: self.width / 2;
+                is-circle: true;
                 background: root.real-current-page == start-page + index ? Theme.third-brand-color : Colors.transparent;
 
                 text: start-page + index + 1;
                 font-size: root.font-size;
-                text-color: root.real-current-page == start-page + index ? Theme.base-color : Theme.primary-text-color;
+                text-color: root.real-current-page == start-page + index ? Colors.white : Theme.primary-text-color;
 
                 clicked => {
                     root.real-current-page = start-page + index;
@@ -129,11 +129,11 @@ export component Pagination inherits Rectangle {
                 for index in real-show-pages-half: TextBtnWithoutIcon {
                     private property <int> inner-real-current-page: total-pages - real-show-pages-half + index;
 
-                    border-radius: self.width / 2;
+                    is-circle: true;
                     text: inner-real-current-page + 1;
                     font-size: root.font-size;
                     background: root.real-current-page == inner-real-current-page ? Theme.third-brand-color : Colors.transparent;
-                    text-color: root.real-current-page == inner-real-current-page ? Theme.base-color : Theme.primary-text-color;
+                    text-color: root.real-current-page == inner-real-current-page ? Colors.white : Theme.primary-text-color;
 
                     clicked => {
                         root.real-current-page = inner-real-current-page;