init: working version

custom/StateLayer.qml

@@ -0,0 +1,101 @@
+
+import QtQuick
+import qs.config
+import qs.custom
+import qs.services
+
+MouseArea {
+    id: root
+
+    property bool disabled
+    property color color: Config.colors.primary
+    property real radius: 1000
+
+    function onClicked(): void {}
+
+    cursorShape: disabled ? undefined : Qt.PointingHandCursor
+    hoverEnabled: true
+
+    onPressed: event => {
+        rippleAnim.x = event.x;
+        rippleAnim.y = event.y;
+
+        const dist = (ox, oy) => ox * ox + oy * oy;
+        rippleAnim.radius = Math.sqrt(Math.max(dist(0, 0), dist(0, width), dist(width, 0), dist(width, height)));
+
+        rippleAnim.restart();
+    }
+
+    onClicked: event => !disabled && onClicked(event)
+
+    SequentialAnimation {
+        id: rippleAnim
+
+        property real x
+        property real y
+        property real radius
+
+        PropertyAction {
+            target: ripple
+            property: "x"
+            value: rippleAnim.x
+        }
+        PropertyAction {
+            target: ripple
+            property: "y"
+            value: rippleAnim.y
+        }
+        PropertyAction {
+            target: ripple
+            property: "opacity"
+            value: 0.1
+        }
+        ParallelAnimation {
+            Anim {
+                target: ripple
+                properties: "implicitWidth,implicitHeight"
+                from: 0
+                to: rippleAnim.radius * 2
+                duration: Config.anim.durations.large
+                easing.bezierCurve: Config.anim.curves.standardDecel
+            }
+            Anim {
+                target: ripple
+                property: "opacity"
+                to: 0
+                duration: Config.anim.durations.large
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Config.anim.curves.standardDecel
+            }
+        }
+    }
+
+    CustomClippingRect {
+        id: hoverLayer
+
+        anchors.fill: parent
+
+        property real alpha: root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.05 : 0
+        color: Qt.alpha(root.color, alpha)
+        radius: root.radius
+
+        Behavior on alpha {
+            Anim {
+                duration: Config.anim.durations.small
+            }
+        }
+
+        CustomRect {
+            id: ripple
+
+            radius: 1000
+            color: root.color
+            opacity: 0
+
+            transform: Translate {
+                x: -ripple.width / 2
+                y: -ripple.height / 2
+            }
+        }
+    }
+}