Simplify Ripple effect and make it easier to use everywhere

resources/qml/Avatar.qml

@@ -47,17 +47,6 @@ Rectangle {
         anchors.fill: parent
         visible: Settings.useIdenticon && img.status != Image.Ready
         source: Settings.useIdenticon ? ("image://jdenticon/" + (userid !== "" ? userid : roomid) + "?radius=" + (Settings.avatarCircles ? 100 : 25)) : ""
-
-        MouseArea {
-            anchors.fill: parent
-
-            Ripple {
-                rippleTarget: parent
-                color: Qt.rgba(Nheko.colors.alternateBase.r, Nheko.colors.alternateBase.g, Nheko.colors.alternateBase.b, 0.5)
-            }
-
-        }
-
     }
 
     Image {
@@ -118,4 +107,8 @@ Rectangle {
         onSingleTapped: avatar.clicked(eventPoint)
     }
 
+    Ripple {
+        color: Qt.rgba(Nheko.colors.alternateBase.r, Nheko.colors.alternateBase.g, Nheko.colors.alternateBase.b, 0.5)
+    }
+
 }

resources/qml/Completer.qml

@@ -129,10 +129,9 @@ Popup {
                      if (popup.completerName == "room")
                          popup.completionSelected(model.roomid);
                 }
-                Ripple {
-                    rippleTarget: mouseArea
-                    color: Qt.rgba(Nheko.colors.base.r, Nheko.colors.base.g, Nheko.colors.base.b, 0.5)
             }
+            Ripple {
+                color: Qt.rgba(Nheko.colors.base.r, Nheko.colors.base.g, Nheko.colors.base.b, 0.5)
             }
 
             DelegateChooser {

resources/qml/ImageButton.qml

@@ -39,8 +39,6 @@ AbstractButton {
 
     Ripple {
         color: Qt.rgba(buttonTextColor.r, buttonTextColor.g, buttonTextColor.b, 0.5)
-        clip: false
-        rippleTarget: button
     }
 
 }

resources/qml/RoomList.qml

@@ -4,6 +4,7 @@
 // SPDX-License-Identifier: GPL-3.0-or-later
 
 import "./dialogs"
+import "./ui"
 import Qt.labs.platform 1.1 as Platform
 import QtQml 2.12
 import QtQuick 2.15
@@ -137,6 +138,10 @@ Page {
             required property bool isDirect
             required property string directChatOtherUserId
 
+            Ripple {
+                color: Qt.rgba(Nheko.colors.dark.r, Nheko.colors.dark.g, Nheko.colors.dark.b, 0.5)
+            }
+
             height: avatarSize + 2 * Nheko.paddingMedium
             width: ListView.view.width
             state: "normal"

resources/qml/components/TextButton.qml

@@ -42,8 +42,6 @@ AbstractButton {
 
     Ripple {
         color: Qt.rgba(buttonTextColor.r, buttonTextColor.g, buttonTextColor.b, 0.5)
-        clip: false
-        rippleTarget: button
     }
 
 }

resources/qml/ui/Ripple.qml

@@ -4,36 +4,52 @@
 // SPDX-License-Identifier: GPL-3.0-or-later
 
 import QtGraphicalEffects 1.0
-import QtQuick 2.10
+import QtQuick 2.15
-import QtQuick.Controls 2.3
+import QtQuick.Controls 2.15
 
 Item {
     id: ripple
 
-    property alias clip: backgroundLayer.clip
-    property real radius: 0
     property color color: "#22000000"
     property real maxRadius: Math.max(width, height)
     readonly property real radiusAnimationRate: 0.05
     readonly property real radiusTailAnimationRate: 0.5
     readonly property real opacityAnimationDuration: 300
-    readonly property real diameter: radius * 2
-    property real centerX
-    property real centerY
     property var rippleTarget: parent
 
-    function start() {
+    anchors.fill: parent
-        console.log("Starting ripple animation");
+
-        ripple.state = "ACTIVE";
+    PointHandler {
+        id: ph
+
+        onGrabChanged: {
+            circle.centerX = point.position.x
+            circle.centerY = point.position.y
         }
 
-    function stop() {
+        target: Rectangle {
-        console.log("Stopping ripple animation");
+            id: backgroundLayer
-        ripple.state = "NORMAL";
+            parent: rippleTarget
-    }
 
             anchors.fill: parent
-    state: "NORMAL"
+            color: "transparent"
+            clip: true
+
+            Rectangle {
+                id: circle
+
+                property real centerX
+                property real centerY
+
+                x: centerX - radius
+                y: centerY - radius
+
+                height: radius*2
+                width: radius*2
+                radius: 0
+                color: ripple.color
+
+                state: ph.active ? "ACTIVE" : "NORMAL"
                 states: [
                     State {
                         name: "NORMAL"
@@ -48,17 +64,15 @@ Item {
                         to: "ACTIVE"
 
                         SequentialAnimation {
-                ScriptAction {
+                            //PropertyAction { target: circle; property: "centerX"; value: ph.point.position.x }
-                    script: {
+                            //PropertyAction { target: circle; property: "centerY"; value: ph.point.position.y }
-                        ripple.opacity = 1;
+                            PropertyAction { target: circle; property: "visible"; value: true }
-                        ripple.visible = true;
+                            PropertyAction { target: circle; property: "opacity"; value: 1 }
-                    }
-                }
 
                             NumberAnimation {
                                 id: radius_animation
 
-                    target: ripple
+                                target: circle
                                 properties: "radius"
                                 from: 0
                                 to: ripple.maxRadius
@@ -82,7 +96,7 @@ Item {
                                 NumberAnimation {
                                     id: radius_tail_animation
 
-                        target: ripple
+                                    target: circle
                                     properties: "radius"
                                     to: ripple.maxRadius
                                     duration: ripple.maxRadius / ripple.radiusTailAnimationRate
@@ -108,75 +122,11 @@ Item {
                                 }
 
                             }
-
+                            PropertyAction { target: circle; property: "visible"; value: false }
-                ScriptAction {
-                    script: {
-                        ripple.visible = false;
                         }
                     }
-
-            }
-
-        }
                 ]
-
-    Connections {
-        // Button
-        // Default to center
-
-        function onPressed(mouse) {
-            // MouseArea
-            if (mouse) {
-                ripple.centerX = mouse.x;
-                ripple.centerY = mouse.y;
-            } else if (rippleTarget.pressX) {
-                ripple.centerX = rippleTarget.pressX;
-                ripple.centerY = rippleTarget.pressY;
-            } else {
-                ripple.centerX = width / 2;
-                ripple.centerY = height / 2;
             }
-            ripple.start();
         }
-
-        function onReleased() {
-            ripple.stop();
     }
-
-        function onExited() {
-            ripple.stop();
-        }
-
-        function onCanceled() {
-            ripple.stop();
-        }
-
-        function onClicked() {
-            ripple.stop();
-        }
-
-        target: rippleTarget
-        ignoreUnknownSignals: true
-    }
-
-    Rectangle {
-        id: backgroundLayer
-
-        anchors.fill: parent
-        color: "transparent"
-        clip: true
-
-        Rectangle {
-            id: circle
-
-            x: ripple.centerX - ripple.radius
-            y: ripple.centerY - ripple.radius
-            height: ripple.diameter
-            width: ripple.diameter
-            radius: ripple.radius
-            color: ripple.color
-        }
-
-    }
-
 }