input: ripple anim for all buttons

Also fix up colours for some statelayers
Fix urgent notif action colours

4 files changed, 87 insertions, 28 deletions

diff --git a/modules/dashboard/Tabs.qml b/modules/dashboard/Tabs.qml
index f45bdea..e6b59e7 100644
--- a/modules/dashboard/Tabs.qml
+++ b/modules/dashboard/Tabs.qml
@@ -107,15 +107,12 @@ Item {
 
             cursorShape: Qt.PointingHandCursor
 
-            onPressed: ({
-                    x,
-                    y
-                }) => {
+            onPressed: event => {
                 tab.TabBar.tabBar.setCurrentIndex(tab.TabBar.index);
 
                 const stateY = stateWrapper.y;
-                rippleAnim.x = x;
-                rippleAnim.y = y - stateY;
+                rippleAnim.x = event.x;
+                rippleAnim.y = event.y - stateY;
 
                 const dist = (ox, oy) => ox * ox + oy * oy;
                 const stateEndY = stateY + stateWrapper.height;
diff --git a/modules/notifications/Notification.qml b/modules/notifications/Notification.qml
index 55f17a2..1f21fc4 100644
--- a/modules/notifications/Notification.qml
+++ b/modules/notifications/Notification.qml
@@ -358,6 +358,7 @@ StyledRect {
 
             StateLayer {
                 radius: Appearance.rounding.full
+                color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
 
                 function onClicked() {
                     root.expanded = !root.expanded;
@@ -457,7 +458,7 @@ StyledRect {
                     required property NotificationAction modelData
 
                     radius: Appearance.rounding.full
-                    color: Colours.palette.m3surfaceContainerHigh
+                    color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondary : Colours.palette.m3surfaceContainerHigh
 
                     Layout.preferredWidth: actionText.width + Appearance.padding.normal * 2
                     Layout.preferredHeight: actionText.height + Appearance.padding.small * 2
@@ -466,6 +467,7 @@ StyledRect {
 
                     StateLayer {
                         radius: Appearance.rounding.full
+                        color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onSecondary : Colours.palette.m3onSurface
 
                         function onClicked(): void {
                             action.modelData.invoke();
@@ -477,7 +479,7 @@ StyledRect {
 
                         anchors.centerIn: parent
                         text: actionTextMetrics.elidedText
-                        color: Colours.palette.m3onSurfaceVariant
+                        color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onSecondary : Colours.palette.m3onSurfaceVariant
                         font.pointSize: Appearance.font.size.small
                     }
 
diff --git a/modules/session/Content.qml b/modules/session/Content.qml
index f6b1258..707a1b9 100644
--- a/modules/session/Content.qml
+++ b/modules/session/Content.qml
@@ -102,6 +102,7 @@ Column {
 
         StateLayer {
             radius: parent.radius
+            color: button.activeFocus ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
 
             function onClicked(): void {
                 proc.startDetached();
diff --git a/widgets/StateLayer.qml b/widgets/StateLayer.qml
index 1c8f947..9c289d7 100644
--- a/widgets/StateLayer.qml
+++ b/widgets/StateLayer.qml
@@ -3,41 +3,100 @@ import "root:/services"
 import "root:/config"
 import QtQuick
 
-StyledRect {
+MouseArea {
     id: root
 
-    readonly property alias hovered: mouse.hovered
-    readonly property alias pressed: mouse.pressed
     property bool disabled
+    property color color: Colours.palette.m3onSurface
+    property real radius: parent?.radius ?? 0
 
-    function onClicked(event: MouseEvent): void {
+    function onClicked(): void {
     }
 
     anchors.fill: parent
 
-    color: Colours.palette.m3onSurface
-    opacity: disabled ? 0 : mouse.pressed ? 0.1 : mouse.hovered ? 0.08 : 0
+    cursorShape: disabled ? undefined : Qt.PointingHandCursor
+    hoverEnabled: true
 
-    MouseArea {
-        id: mouse
+    onPressed: event => {
+        rippleAnim.x = event.x;
+        rippleAnim.y = event.y;
 
-        property bool hovered
+        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)));
 
-        anchors.fill: parent
-        cursorShape: root.disabled ? undefined : Qt.PointingHandCursor
-        hoverEnabled: true
+        rippleAnim.restart();
+    }
+
+    onClicked: event => !disabled && onClicked(event)
+
+    SequentialAnimation {
+        id: rippleAnim
 
-        onEntered: hovered = true
-        onExited: hovered = false
+        property real x
+        property real y
+        property real radius
 
-        onClicked: event => !root.disabled && root.onClicked(event)
+        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: Appearance.anim.durations.large
+                easing.bezierCurve: Appearance.anim.curves.standardDecel
+            }
+            Anim {
+                target: ripple
+                property: "opacity"
+                to: 0
+                duration: Appearance.anim.durations.large
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standardDecel
+            }
+        }
     }
 
-    Behavior on opacity {
-        NumberAnimation {
-            duration: Appearance.anim.durations.small
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Appearance.anim.curves.standard
+    StyledClippingRect {
+        id: hoverLayer
+
+        anchors.fill: parent
+
+        color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.08 : 0)
+        radius: root.radius
+
+        StyledRect {
+            id: ripple
+
+            radius: Appearance.rounding.full
+            color: root.color
+            opacity: 0
+
+            transform: Translate {
+                x: -ripple.width / 2
+                y: -ripple.height / 2
+            }
         }
     }
+
+    component Anim: NumberAnimation {
+        duration: Appearance.anim.durations.normal
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Appearance.anim.curves.standard
+    }
 }