From 84f28f6411ac330c98c6b86cd5b289defd4841f5 Mon Sep 17 00:00:00 2001
From: end-4 <97237370+end-4@users.noreply.github.com>
Date: Fri, 16 May 2025 23:50:20 +0200
Subject: [PATCH] tabs: nicer indicator anim

---
 .../modules/common/widgets/PrimaryTabBar.qml  | 53 ++++++++++---------
 .../common/widgets/SecondaryTabButton.qml     |  2 +-
 .../modules/sidebarRight/todo/TodoWidget.qml  | 50 +++++++++--------
 3 files changed, 55 insertions(+), 50 deletions(-)

diff --git a/.config/quickshell/modules/common/widgets/PrimaryTabBar.qml b/.config/quickshell/modules/common/widgets/PrimaryTabBar.qml
index e0fbd6d9..d8eff337 100644
--- a/.config/quickshell/modules/common/widgets/PrimaryTabBar.qml
+++ b/.config/quickshell/modules/common/widgets/PrimaryTabBar.qml
@@ -52,38 +52,39 @@ ColumnLayout {
                 root.enableIndicatorAnimation = true
             }
         }
+
         Rectangle {
+            id: indicator
+            property int tabCount: root.tabButtonList.length
+            property real fullTabSize: root.width / tabCount;
+            property real targetWidth: tabBar.contentItem.children[0].children[tabBar.currentIndex].tabContentWidth
+
+            implicitWidth: targetWidth
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+            }
+
+            x: tabBar.currentIndex * fullTabSize + (fullTabSize - targetWidth) / 2
+
             color: Appearance.m3colors.m3primary
             radius: Appearance.rounding.full
-            z: 2
 
-            anchors.fill: parent
-            // TODO: make the end point in the moving direction go first
-            anchors.leftMargin: {
-                const tabCount = root.tabButtonList.length
-                const targetWidth = tabBar.contentItem.children[0].children[tabBar.currentIndex].tabContentWidth
-                const fullTabSize = root.width / tabCount;
-                return fullTabSize * root.externalTrackedTab + (fullTabSize - targetWidth) / 2;
+            Behavior on x {
+                NumberAnimation {
+                    duration: Appearance.animation.elementMove.duration
+                    easing.type: Appearance.animation.elementMove.type
+                    easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
+                }
             }
-            anchors.rightMargin: {
-                const tabCount = root.tabButtonList.length
-                const targetWidth = tabBar.contentItem.children[0].children[tabBar.currentIndex].tabContentWidth
-                const fullTabSize = root.width / tabCount;
-                return fullTabSize * (tabCount - root.externalTrackedTab - 1) + (fullTabSize - targetWidth) / 2;
+
+            Behavior on implicitWidth {
+                NumberAnimation {
+                    duration: Appearance.animation.elementMove.duration
+                    easing.type: Appearance.animation.elementMove.type
+                    easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
+                }
             }
-            Behavior on anchors.leftMargin { 
-                enabled: root.enableIndicatorAnimation
-                SmoothedAnimation {
-                    velocity: Appearance.animation.positionShift.velocity
-                } 
-            }
-            Behavior on anchors.rightMargin { 
-                enabled: root.enableIndicatorAnimation
-                SmoothedAnimation {
-                    velocity: Appearance.animation.positionShift.velocity
-                } 
-            }
-            
         }
     }
 
diff --git a/.config/quickshell/modules/common/widgets/SecondaryTabButton.qml b/.config/quickshell/modules/common/widgets/SecondaryTabButton.qml
index 050cec6c..01532445 100644
--- a/.config/quickshell/modules/common/widgets/SecondaryTabButton.qml
+++ b/.config/quickshell/modules/common/widgets/SecondaryTabButton.qml
@@ -70,7 +70,7 @@ TabButton {
                     ColorAnimation {
                         duration: Appearance.animation.elementMove.duration
                         easing.type: Appearance.animation.elementMove.type
-                easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
+                        easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
                     }
                 }
             }
diff --git a/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml b/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml
index b545eba3..c735f451 100644
--- a/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml
+++ b/.config/quickshell/modules/sidebarRight/todo/TodoWidget.qml
@@ -79,37 +79,41 @@ Item {
                     tabIndicator.enableIndicatorAnimation = true
                 }
             }
+
             Rectangle {
+                id: indicator
+                property int tabCount: root.tabButtonList.length
+                property real fullTabSize: root.width / tabCount;
+                property real targetWidth: tabBar.contentItem.children[0].children[tabBar.currentIndex].tabContentWidth
+
+                implicitWidth: targetWidth
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                }
+
+                x: tabBar.currentIndex * fullTabSize + (fullTabSize - targetWidth) / 2
+
                 color: Appearance.m3colors.m3primary
                 radius: Appearance.rounding.full
-                z: 2
 
-                anchors.fill: parent
-                anchors.leftMargin: {
-                    const tabCount = root.tabButtonList.length
-                    const targetWidth = tabBar.contentItem.children[0].children[tabBar.currentIndex].tabContentWidth
-                    const fullTabSize = tabBar.width / tabCount;
-                    return fullTabSize * currentTab + (fullTabSize - targetWidth) / 2;
-                }
-                anchors.rightMargin: {
-                    const tabCount = root.tabButtonList.length
-                    const targetWidth = tabBar.contentItem.children[0].children[tabBar.currentIndex].tabContentWidth
-                    const fullTabSize = tabBar.width / tabCount;
-                    return fullTabSize * (tabCount - currentTab - 1) + (fullTabSize - targetWidth) / 2;
-                }
-                Behavior on anchors.leftMargin { 
+                Behavior on x {
                     enabled: tabIndicator.enableIndicatorAnimation
-                    SmoothedAnimation {
-                        velocity: Appearance.animation.positionShift.velocity
-                    } 
+                    NumberAnimation {
+                        duration: Appearance.animation.elementMove.duration
+                        easing.type: Appearance.animation.elementMove.type
+                        easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
+                    }
                 }
-                Behavior on anchors.rightMargin { 
+
+                Behavior on implicitWidth {
                     enabled: tabIndicator.enableIndicatorAnimation
-                    SmoothedAnimation {
-                        velocity: Appearance.animation.positionShift.velocity
-                    } 
+                    NumberAnimation {
+                        duration: Appearance.animation.elementMove.duration
+                        easing.type: Appearance.animation.elementMove.type
+                        easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
+                    }
                 }
-                
             }
         }