ripple button: add pressed radius

.config/quickshell/modules/common/widgets/RippleButton.qml

@@ -13,6 +13,7 @@ Button {
     property bool toggled
     property string buttonText
     property real buttonRadius: Appearance?.rounding?.small ?? 4
+    property real buttonRadiusPressed: buttonRadius
     property int rippleDuration: 1200
 
     property color colBackground: ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1)
@@ -29,17 +30,7 @@ Button {
             colBackground)) : colBackground
     property color rippleColor: root.toggled ? colRippleToggled : colRipple
 
-    component RippleAnim: NumberAnimation {
+    function startRipple(x, y) {
-        duration: rippleDuration
-        easing.type: Appearance.animation.elementMoveEnter.type
-        easing.bezierCurve: Appearance.animationCurves.standardDecel
-    }
-
-    MouseArea {
-        anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor
-        onPressed: (event) => { 
-            const {x,y} = event
         const stateY = buttonBackground.y;
         rippleAnim.x = x;
         rippleAnim.y = y - stateY;
@@ -51,11 +42,28 @@ Button {
         rippleFadeAnim.complete();
         rippleAnim.restart();
     }
+
+    component RippleAnim: NumberAnimation {
+        duration: rippleDuration
+        easing.type: Appearance.animation.elementMoveEnter.type
+        easing.bezierCurve: Appearance.animationCurves.standardDecel
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onPressed: (event) => { 
+            root.down = true
+            const {x,y} = event
+            startRipple(x, y)
+        }
         onReleased: (event) => {
+            root.down = false
             root.click() // Because the MouseArea already consumed the event
             rippleFadeAnim.restart();
         }
         onCanceled: (event) => {
+            root.down = false
             rippleFadeAnim.restart();
         }
     }
@@ -101,7 +109,7 @@ Button {
 
     background: Rectangle {
         id: buttonBackground
-        radius: root.buttonRadius
+        radius: root.down ? root.buttonRadiusPressed : root.buttonRadius
         implicitHeight: 50
 
         color: root.buttonColor