diff options
| author | 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> | 2025-07-09 00:03:55 +1000 |
|---|---|---|
| committer | 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> | 2025-07-09 00:03:55 +1000 |
| commit | fc31b43ee61898147332d3242787a365bd0fcc5f (patch) | |
| tree | ed0246dbecd3f064363bc43cc4fcaca77d464034 | |
| parent | paths: decode urls (diff) | |
| download | caelestia-shell-fc31b43ee61898147332d3242787a365bd0fcc5f.tar.gz caelestia-shell-fc31b43ee61898147332d3242787a365bd0fcc5f.tar.bz2 caelestia-shell-fc31b43ee61898147332d3242787a365bd0fcc5f.zip | |
internal: better ripple anim
Fade after expansion, also correctly calculate ripple size
Also fix ripples triggering on disabled buttons
| -rw-r--r-- | modules/dashboard/Tabs.qml | 37 | ||||
| -rw-r--r-- | widgets/StateLayer.qml | 39 |
2 files changed, 37 insertions, 39 deletions
diff --git a/modules/dashboard/Tabs.qml b/modules/dashboard/Tabs.qml index b7aca5f..05f574a 100644 --- a/modules/dashboard/Tabs.qml +++ b/modules/dashboard/Tabs.qml @@ -119,8 +119,7 @@ Item { rippleAnim.y = event.y - stateY; const dist = (ox, oy) => ox * ox + oy * oy; - const stateEndY = stateY + stateWrapper.height; - rippleAnim.radius = Math.sqrt(Math.max(dist(0, stateY), dist(0, stateEndY), dist(width, stateY), dist(width, stateEndY))); + rippleAnim.radius = Math.sqrt(Math.max(dist(event.x, event.y + stateY), dist(event.x, stateWrapper.height - event.y), dist(width - event.x, event.y + stateY), dist(width - event.x, stateWrapper.height - event.y))); rippleAnim.restart(); } @@ -151,25 +150,23 @@ Item { PropertyAction { target: ripple property: "opacity" - value: 0.1 + value: 0.08 } - 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 - } + Anim { + target: ripple + properties: "implicitWidth,implicitHeight" + from: 0 + to: rippleAnim.radius * 2 + duration: Appearance.anim.durations.normal + easing.bezierCurve: Appearance.anim.curves.standardDecel + } + Anim { + target: ripple + property: "opacity" + to: 0 + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard } } diff --git a/widgets/StateLayer.qml b/widgets/StateLayer.qml index 953ee61..06cdc21 100644 --- a/widgets/StateLayer.qml +++ b/widgets/StateLayer.qml @@ -19,11 +19,14 @@ MouseArea { hoverEnabled: true onPressed: event => { + if (disabled) + return; + 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.radius = Math.sqrt(Math.max(dist(event.x, event.y), dist(event.x, height - event.y), dist(width - event.x, event.y), dist(width - event.x, height - event.y))); rippleAnim.restart(); } @@ -50,25 +53,23 @@ MouseArea { PropertyAction { target: ripple property: "opacity" - value: 0.1 + value: 0.08 } - 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.standard - } + Anim { + target: ripple + properties: "implicitWidth,implicitHeight" + from: 0 + to: rippleAnim.radius * 2 + duration: Appearance.anim.durations.normal + easing.bezierCurve: Appearance.anim.curves.standardDecel + } + Anim { + target: ripple + property: "opacity" + to: 0 + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard } } |