diff options
| -rw-r--r-- | modules/dashboard/Tabs.qml | 9 | ||||
| -rw-r--r-- | modules/notifications/Notification.qml | 6 | ||||
| -rw-r--r-- | modules/session/Content.qml | 1 | ||||
| -rw-r--r-- | widgets/StateLayer.qml | 99 |
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 + } } |