SecondaryTabButton: make ripple radial gradient

2025-08-08 21:36:45 +07:00
parent 2b87d939bb
commit 4328746df0
1 changed files with 20 additions and 4 deletions
@@ -107,13 +107,29 @@ TabButton {
            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
        }

-        Rectangle {
+        Item {
            id: ripple
-
-            radius: Appearance.rounding.full
-            color: root.colRipple
+            width: ripple.implicitWidth
+            height: ripple.implicitHeight
            opacity: 0

+            property real implicitWidth: 0
+            property real implicitHeight: 0
+            visible: width > 0 && height > 0
+
+            Behavior on opacity {
+                animation: Appearance?.animation.elementMoveFast.colorAnimation.createObject(this)
+            }
+
+            RadialGradient {
+                anchors.fill: parent
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: root.colRipple }
+                    GradientStop { position: 0.3; color: root.colRipple }
+                    GradientStop { position: 0.5 ; color: Qt.rgba(root.colRipple.r, root.colRipple.g, root.colRipple.b, 0) }
+                }
+            }
+
            transform: Translate {
                x: -ripple.width / 2
                y: -ripple.height / 2