Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adopt reduced motion settings in more places #1760

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CMakeLists.txt
Original file line number Diff line number Diff line change
Expand Up @@ -798,6 +798,7 @@ set(QML_SOURCES
resources/qml/pages/WelcomePage.qml
resources/qml/ui/NhekoSlider.qml
resources/qml/ui/Ripple.qml
resources/qml/ui/RippleImpl.qml
resources/qml/ui/Snackbar.qml
resources/qml/ui/Spinner.qml
resources/qml/ui/animations/BlinkAnimation.qml
Expand Down
2 changes: 2 additions & 0 deletions resources/qml/MatrixTextField.qml
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ ColumnLayout {
from: ""
reversible: true
to: "focused"
enabled: !Settings.reducedMotion

NumberAnimation {
alwaysRunToEnd: true
Expand Down Expand Up @@ -164,6 +165,7 @@ ColumnLayout {
from: ""
reversible: true
to: "focused"
enabled: !Settings.reducedMotion

NumberAnimation {
alwaysRunToEnd: true
Expand Down
2 changes: 2 additions & 0 deletions resources/qml/MessageInput.qml
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,7 @@ Rectangle {
y: messageInput.positionToRectangle(messageInput.completerTriggeredAt).y - height

enter: Transition {
enabled: !Settings.reducedMotion
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Originally we were told that fade effects are fine for reducedMotion, which is why we didn't disable those. Do you have a reason to do otherwise?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, I mechanically disabled all transitions when reducedMotion is enabled. Are there any specific instances where you'd like to keep these? My motivation for disabling transitions is poor performance - on nvidia-wayland, the transitions stutter sometimes on a fairly powerful gpu (1060).

NumberAnimation {
duration: 100
from: 0
Expand All @@ -343,6 +344,7 @@ Rectangle {
}
}
exit: Transition {
enabled: !Settings.reducedMotion
NumberAnimation {
duration: 100
from: 1
Expand Down
1 change: 1 addition & 0 deletions resources/qml/MessageView.qml
Original file line number Diff line number Diff line change
Expand Up @@ -667,6 +667,7 @@ Item {
from: ""
reversible: true
to: "shown"
enabled: !Settings.reducedMotion

SequentialAnimation {
PauseAnimation {
Expand Down
1 change: 1 addition & 0 deletions resources/qml/PrivacyScreen.qml
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ Item {
from: "Invisible"
reversible: true
to: "Visible"
enabled: !Settings.reducedMotion

SequentialAnimation {
NumberAnimation {
Expand Down
2 changes: 2 additions & 0 deletions resources/qml/Root.qml
Original file line number Diff line number Diff line change
Expand Up @@ -432,6 +432,7 @@ Pane {

Transition {
id: reducedMotionTransitionExit
enabled: !Settings.reducedMotion

PropertyAnimation {
duration: 200
Expand All @@ -442,6 +443,7 @@ Pane {
}
Transition {
id: reducedMotionTransitionEnter
enabled: !Settings.reducedMotion

SequentialAnimation {
PropertyAction {
Expand Down
1 change: 1 addition & 0 deletions resources/qml/TimelineBubbleMessageStyle.qml
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ TimelineEvent {
transitions: Transition {
from: ""
to: "revealed"
enabled: !Settings.reducedMotion

SequentialAnimation {
PropertyAnimation {
Expand Down
1 change: 1 addition & 0 deletions resources/qml/TimelineDefaultMessageStyle.qml
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ TimelineEvent {
transitions: Transition {
from: ""
to: "revealed"
enabled: !Settings.reducedMotion

SequentialAnimation {
PropertyAnimation {
Expand Down
2 changes: 2 additions & 0 deletions resources/qml/ToggleButton.qml
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import QtQuick 2.5
import QtQuick 2.12
import QtQuick.Controls 2.12
import im.nheko 1.0

Switch {
id: toggleButton
Expand Down Expand Up @@ -66,6 +67,7 @@ Switch {
Transition {
reversible: true
to: "off"
enabled: !Settings.reducedMotion

ParallelAnimation {
NumberAnimation {
Expand Down
1 change: 1 addition & 0 deletions resources/qml/delegates/ImageMessage.qml
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ AbstractButton {
from: "ImageVisible"
to: "BlurhashVisible"
reversible: true
enabled: !Settings.reducedMotion

SequentialAnimation {
PropertyAction {
Expand Down
128 changes: 9 additions & 119 deletions resources/qml/ui/Ripple.qml
Original file line number Diff line number Diff line change
Expand Up @@ -2,128 +2,18 @@
//
// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick
import QtQuick 2.15
import im.nheko 1.0

Item {
id: ripple
id: wrapper
property color color

property color color: "#22000000"
property real maxRadius: Math.max(width, height)
readonly property real radiusAnimationRate: 0.05
readonly property real radiusTailAnimationRate: 0.5
readonly property real opacityAnimationDuration: 300
property var rippleTarget: parent

anchors.fill: parent

PointHandler {
id: ph

onGrabChanged: (_, point) => {
circle.centerX = point.position.x
circle.centerY = point.position.y
}

target: Rectangle {
id: backgroundLayer
parent: rippleTarget

anchors.fill: parent
color: "transparent"
clip: true

Rectangle {
id: circle

property real centerX
property real centerY

x: centerX - radius
y: centerY - radius

height: radius*2
width: radius*2
radius: 0
color: ripple.color

state: ph.active ? "ACTIVE" : "NORMAL"
states: [
State {
name: "NORMAL"
},
State {
name: "ACTIVE"
}
]
transitions: [
Transition {
from: "NORMAL"
to: "ACTIVE"

SequentialAnimation {
//PropertyAction { target: circle; property: "centerX"; value: ph.point.position.x }
//PropertyAction { target: circle; property: "centerY"; value: ph.point.position.y }
PropertyAction { target: circle; property: "visible"; value: true }
PropertyAction { target: circle; property: "opacity"; value: 1 }

NumberAnimation {
id: radius_animation

target: circle
properties: "radius"
from: 0
to: ripple.maxRadius
duration: ripple.maxRadius / ripple.radiusAnimationRate

easing {
type: Easing.OutQuad
}

}

}

},
Transition {
from: "ACTIVE"
to: "NORMAL"

SequentialAnimation {
ParallelAnimation {
NumberAnimation {
id: radius_tail_animation

target: circle
properties: "radius"
to: ripple.maxRadius
duration: ripple.maxRadius / ripple.radiusTailAnimationRate

easing {
type: Easing.Linear
}

}

NumberAnimation {
id: opacity_animation

target: circle
properties: "opacity"
to: 0
duration: ripple.opacityAnimationDuration

easing {
type: Easing.InQuad
}

}

}
PropertyAction { target: circle; property: "visible"; value: false }
}
}
]
}
Loader {
Component {
id: ripple
RippleImpl { color: color; parent: wrapper.parent; }
}
sourceComponent: !Settings.reducedMotion ? ripple : undefined
}
}
131 changes: 131 additions & 0 deletions resources/qml/ui/RippleImpl.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
// SPDX-FileCopyrightText: Nheko Contributors
//
// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick 2.15

Item {
id: ripple

property color color: "#22000000"
property real maxRadius: Math.max(width, height)
readonly property real radiusAnimationRate: 0.05
readonly property real radiusTailAnimationRate: 0.5
readonly property real opacityAnimationDuration: 300
property var rippleTarget: parent

anchors.fill: parent

PointHandler {
id: ph

onGrabChanged: (_, point) => {
circle.centerX = point.position.x
circle.centerY = point.position.y
}

target: Rectangle {
id: backgroundLayer
parent: rippleTarget

anchors.fill: parent
color: "transparent"
clip: true

Rectangle {
id: circle

property real centerX
property real centerY

x: centerX - radius
y: centerY - radius

height: radius*2
width: radius*2
radius: 0
color: ripple.color

state: ph.active ? "ACTIVE" : "NORMAL"
states: [
State {
name: "NORMAL"
},
State {
name: "ACTIVE"
}
]
transitions: [
Transition {
from: "NORMAL"
to: "ACTIVE"
enabled: !Settings.reducedMotion

SequentialAnimation {
//PropertyAction { target: circle; property: "centerX"; value: ph.point.position.x }
//PropertyAction { target: circle; property: "centerY"; value: ph.point.position.y }
PropertyAction { target: circle; property: "visible"; value: true }
PropertyAction { target: circle; property: "opacity"; value: 1 }

NumberAnimation {
id: radius_animation

target: circle
properties: "radius"
from: 0
to: ripple.maxRadius
duration: ripple.maxRadius / ripple.radiusAnimationRate

easing {
type: Easing.OutQuad
}

}

}

},
Transition {
from: "ACTIVE"
to: "NORMAL"
enabled: !Settings.reducedMotion

SequentialAnimation {
ParallelAnimation {
NumberAnimation {
id: radius_tail_animation

target: circle
properties: "radius"
to: ripple.maxRadius
duration: ripple.maxRadius / ripple.radiusTailAnimationRate

easing {
type: Easing.Linear
}

}

NumberAnimation {
id: opacity_animation

target: circle
properties: "opacity"
to: 0
duration: ripple.opacityAnimationDuration

easing {
type: Easing.InQuad
}

}

}
PropertyAction { target: circle; property: "visible"; value: false }
}
}
]
}
}
}
}
2 changes: 2 additions & 0 deletions resources/qml/ui/Snackbar.qml
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ Popup {
}

enter: Transition {
enabled: !Settings.reducedMotion
NumberAnimation {
target: snackbar
property: "opacity"
Expand All @@ -79,6 +80,7 @@ Popup {
}
}
exit: Transition {
enabled: !Settings.reducedMotion
NumberAnimation {
target: snackbar
property: "opacity"
Expand Down
Loading