nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

input: ripple anim for all buttons

Browse source 
Also fix up colours for some statelayers
Fix urgent notif action colours
This commit is contained in:
2 * r + 2 * t 2025-06-19 17:03:44 +10:00
parent 554892a363
commit d329949fc8
4 changed files with 89 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
modules/dashboard/Tabs.qml
View file

@ -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;

6
modules/notifications/Notification.qml
View file

@ -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
}

1
modules/session/Content.qml
View file

@ -102,6 +102,7 @@ Column {
StateLayer {
radius: parent.radius
color: button.activeFocus ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
function onClicked(): void {
proc.startDetached();

103
widgets/StateLayer.qml
View file

@ -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
onEntered: hovered = true
onExited: hovered = false
onClicked: event => !root.disabled && root.onClicked(event)
rippleAnim.restart();
}
Behavior on opacity {
NumberAnimation {
duration: Appearance.anim.durations.small
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
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: 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
}
}
}
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
}
}