From 03fcf6a6618a82b57f9f76ddb686aeb8c6aa94c4 Mon Sep 17 00:00:00 2001 From: Karthik Nishanth Date: Sun, 23 Jun 2024 12:46:35 -0700 Subject: [PATCH 1/3] theme: refactor theme names --- src/ui/NhekoGlobalObject.cpp | 8 ++++---- src/ui/Theme.cpp | 35 ++++++++++++++++++++++++++--------- src/ui/Theme.h | 17 ++++++++++++----- 3 files changed, 42 insertions(+), 18 deletions(-) diff --git a/src/ui/NhekoGlobalObject.cpp b/src/ui/NhekoGlobalObject.cpp index e28b1bc11..98caeae4a 100644 --- a/src/ui/NhekoGlobalObject.cpp +++ b/src/ui/NhekoGlobalObject.cpp @@ -55,21 +55,21 @@ Nheko::inactiveColors() const auto theme = UserSettings::instance()->theme(); if (theme == QLatin1String("light")) { static QPalette lightInactive = [] { - auto lightInactive = Theme::paletteFromTheme(u"light"); + auto lightInactive = Theme::paletteFromTheme(Theme::Kind::Light); lightInactive.setCurrentColorGroup(QPalette::ColorGroup::Inactive); return lightInactive; }(); return lightInactive; } else if (theme == QLatin1String("dark")) { static QPalette darkInactive = [] { - auto darkInactive = Theme::paletteFromTheme(u"dark"); + auto darkInactive = Theme::paletteFromTheme(Theme::Kind::Dark); darkInactive.setCurrentColorGroup(QPalette::ColorGroup::Inactive); return darkInactive; }(); return darkInactive; } else { static QPalette originalInactive = [] { - auto originalInactive = Theme::paletteFromTheme(u"system"); + auto originalInactive = Theme::paletteFromTheme(Theme::Kind::System); originalInactive.setCurrentColorGroup(QPalette::ColorGroup::Inactive); return originalInactive; }(); @@ -80,7 +80,7 @@ Nheko::inactiveColors() const Theme Nheko::theme() const { - return Theme(UserSettings::instance()->theme()); + return Theme(Theme::kindFromString(UserSettings::instance()->theme())); } int diff --git a/src/ui/Theme.cpp b/src/ui/Theme.cpp index 4d46db137..11d755d9d 100644 --- a/src/ui/Theme.cpp +++ b/src/ui/Theme.cpp @@ -5,10 +5,10 @@ #include "Theme.h" QPalette -Theme::paletteFromTheme(QStringView theme) +Theme::paletteFromTheme(Theme::Kind theme) { static QPalette original; - if (theme == u"light") { + if (theme == Kind::Light) { static QPalette lightActive = [] { QPalette lightActive( /*windowText*/ QColor(0x33, 0x33, 0x33), @@ -30,7 +30,7 @@ Theme::paletteFromTheme(QStringView theme) return lightActive; }(); return lightActive; - } else if (theme == u"dark") { + } else if (theme == Kind::Dark) { static QPalette darkActive = [] { QPalette darkActive( /*windowText*/ QColor(0xca, 0xcc, 0xd1), @@ -57,27 +57,30 @@ Theme::paletteFromTheme(QStringView theme) } } -Theme::Theme(QStringView theme) +QPalette +Theme::paletteFromTheme(QStringView theme) +{ + return paletteFromTheme(kindFromString(theme)); +} + +Theme::Theme(Theme::Kind theme) { auto p = paletteFromTheme(theme); separator_ = p.mid().color(); - if (theme == u"light") { + if (theme == Kind::Light) { sidebarBackground_ = QColor(0x23, 0x36, 0x49); - alternateButton_ = QColor(0xcc, 0xcc, 0xcc); red_ = QColor(0xa8, 0x23, 0x53); green_ = QColor(QColorConstants::Svg::green); orange_ = QColor(0xfc, 0xbe, 0x05); error_ = QColor(0xdd, 0x3d, 0x3d); - } else if (theme == u"dark") { + } else if (theme == Kind::Dark) { sidebarBackground_ = QColor(0x2d, 0x31, 0x39); - alternateButton_ = QColor(0x41, 0x4A, 0x59); red_ = QColor(0xa8, 0x23, 0x53); green_ = QColor(QColorConstants::Svg::green); orange_ = QColor(0xfc, 0xc5, 0x3a); error_ = QColor(0xdd, 0x3d, 0x3d); } else { sidebarBackground_ = p.window().color(); - alternateButton_ = p.dark().color(); red_ = QColor(QColorConstants::Svg::red); green_ = QColor(QColorConstants::Svg::green); orange_ = QColor(QColorConstants::Svg::orange); // SVG orange @@ -85,4 +88,18 @@ Theme::Theme(QStringView theme) } } +Theme::Kind +Theme::kindFromString(QStringView kind) +{ + if (kind == u"light") { + return Kind::Light; + } else if (kind == u"dark") { + return Kind::Dark; + } else if (kind == u"system") { + return Kind::System; + } else { + throw std::invalid_argument("Unknown theme kind: " + kind.toString().toStdString()); + } +} + #include "moc_Theme.cpp" diff --git a/src/ui/Theme.h b/src/ui/Theme.h index d581ffe47..2d3f6b9f1 100644 --- a/src/ui/Theme.h +++ b/src/ui/Theme.h @@ -14,7 +14,6 @@ class Theme final : public QPalette QML_ANONYMOUS Q_PROPERTY(QColor sidebarBackground READ sidebarBackground CONSTANT) - Q_PROPERTY(QColor alternateButton READ alternateButton CONSTANT) Q_PROPERTY(QColor separator READ separator CONSTANT) Q_PROPERTY(QColor red READ red CONSTANT) Q_PROPERTY(QColor green READ green CONSTANT) @@ -23,12 +22,20 @@ class Theme final : public QPalette Q_PROPERTY(QColor online READ online CONSTANT) Q_PROPERTY(QColor unavailable READ unavailable CONSTANT) public: - Theme() {} - explicit Theme(QStringView theme); + enum class Kind { + Light, + Dark, + System, + }; + static Kind kindFromString(QStringView kind); + + static QPalette paletteFromTheme(Kind theme); static QPalette paletteFromTheme(QStringView theme); + Theme() {} + explicit Theme(Kind theme); + QColor sidebarBackground() const { return sidebarBackground_; } - QColor alternateButton() const { return alternateButton_; } QColor separator() const { return separator_; } QColor red() const { return red_; } QColor green() const { return green_; } @@ -38,5 +45,5 @@ class Theme final : public QPalette QColor unavailable() const { return QColor(0xff, 0x99, 0x33); } private: - QColor sidebarBackground_, separator_, red_, green_, error_, orange_, alternateButton_; + QColor sidebarBackground_, separator_, red_, green_, error_, orange_; }; From 3b339a8007bce5013e914837f0c5a5f2da45db6b Mon Sep 17 00:00:00 2001 From: Karthik Nishanth Date: Sun, 23 Jun 2024 18:08:22 -0700 Subject: [PATCH 2/3] disable ripples when reduced motion is enabled --- CMakeLists.txt | 1 + resources/qml/ui/Ripple.qml | 128 +++---------------------------- resources/qml/ui/RippleImpl.qml | 129 ++++++++++++++++++++++++++++++++ 3 files changed, 139 insertions(+), 119 deletions(-) create mode 100644 resources/qml/ui/RippleImpl.qml diff --git a/CMakeLists.txt b/CMakeLists.txt index 04738bda0..cab8f6bf6 100644 --- a/CMakeLists.txt +++ b/CMakeLists.txt @@ -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 diff --git a/resources/qml/ui/Ripple.qml b/resources/qml/ui/Ripple.qml index 9d8714198..d062002fc 100644 --- a/resources/qml/ui/Ripple.qml +++ b/resources/qml/ui/Ripple.qml @@ -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 } } diff --git a/resources/qml/ui/RippleImpl.qml b/resources/qml/ui/RippleImpl.qml new file mode 100644 index 000000000..9091bda29 --- /dev/null +++ b/resources/qml/ui/RippleImpl.qml @@ -0,0 +1,129 @@ +// 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" + + 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 } + } + } + ] + } + } + } +} From f1ce494b74b8c3f79da0cc5e1e52a7f54b7a9a69 Mon Sep 17 00:00:00 2001 From: Karthik Nishanth Date: Sun, 23 Jun 2024 18:24:39 -0700 Subject: [PATCH 3/3] tie transitions to reduced motion setting --- resources/qml/MatrixTextField.qml | 2 ++ resources/qml/MessageInput.qml | 2 ++ resources/qml/MessageView.qml | 1 + resources/qml/PrivacyScreen.qml | 1 + resources/qml/Root.qml | 2 ++ resources/qml/TimelineBubbleMessageStyle.qml | 1 + resources/qml/TimelineDefaultMessageStyle.qml | 1 + resources/qml/ToggleButton.qml | 2 ++ resources/qml/delegates/ImageMessage.qml | 1 + resources/qml/ui/RippleImpl.qml | 2 ++ resources/qml/ui/Snackbar.qml | 2 ++ resources/qml/ui/media/MediaControls.qml | 2 ++ 12 files changed, 19 insertions(+) diff --git a/resources/qml/MatrixTextField.qml b/resources/qml/MatrixTextField.qml index 4ceadf6c4..655c4f07b 100644 --- a/resources/qml/MatrixTextField.qml +++ b/resources/qml/MatrixTextField.qml @@ -79,6 +79,7 @@ ColumnLayout { from: "" reversible: true to: "focused" + enabled: !Settings.reducedMotion NumberAnimation { alwaysRunToEnd: true @@ -164,6 +165,7 @@ ColumnLayout { from: "" reversible: true to: "focused" + enabled: !Settings.reducedMotion NumberAnimation { alwaysRunToEnd: true diff --git a/resources/qml/MessageInput.qml b/resources/qml/MessageInput.qml index 8b6af57a0..fd92e4310 100644 --- a/resources/qml/MessageInput.qml +++ b/resources/qml/MessageInput.qml @@ -335,6 +335,7 @@ Rectangle { y: messageInput.positionToRectangle(messageInput.completerTriggeredAt).y - height enter: Transition { + enabled: !Settings.reducedMotion NumberAnimation { duration: 100 from: 0 @@ -343,6 +344,7 @@ Rectangle { } } exit: Transition { + enabled: !Settings.reducedMotion NumberAnimation { duration: 100 from: 1 diff --git a/resources/qml/MessageView.qml b/resources/qml/MessageView.qml index f253b7a8a..eb8fdc72e 100644 --- a/resources/qml/MessageView.qml +++ b/resources/qml/MessageView.qml @@ -667,6 +667,7 @@ Item { from: "" reversible: true to: "shown" + enabled: !Settings.reducedMotion SequentialAnimation { PauseAnimation { diff --git a/resources/qml/PrivacyScreen.qml b/resources/qml/PrivacyScreen.qml index 764bdf628..07d1f6393 100644 --- a/resources/qml/PrivacyScreen.qml +++ b/resources/qml/PrivacyScreen.qml @@ -68,6 +68,7 @@ Item { from: "Invisible" reversible: true to: "Visible" + enabled: !Settings.reducedMotion SequentialAnimation { NumberAnimation { diff --git a/resources/qml/Root.qml b/resources/qml/Root.qml index f0a83a246..c123eb445 100644 --- a/resources/qml/Root.qml +++ b/resources/qml/Root.qml @@ -432,6 +432,7 @@ Pane { Transition { id: reducedMotionTransitionExit + enabled: !Settings.reducedMotion PropertyAnimation { duration: 200 @@ -442,6 +443,7 @@ Pane { } Transition { id: reducedMotionTransitionEnter + enabled: !Settings.reducedMotion SequentialAnimation { PropertyAction { diff --git a/resources/qml/TimelineBubbleMessageStyle.qml b/resources/qml/TimelineBubbleMessageStyle.qml index dd1972642..71314e9ff 100644 --- a/resources/qml/TimelineBubbleMessageStyle.qml +++ b/resources/qml/TimelineBubbleMessageStyle.qml @@ -107,6 +107,7 @@ TimelineEvent { transitions: Transition { from: "" to: "revealed" + enabled: !Settings.reducedMotion SequentialAnimation { PropertyAnimation { diff --git a/resources/qml/TimelineDefaultMessageStyle.qml b/resources/qml/TimelineDefaultMessageStyle.qml index 16db99644..ec5276c54 100644 --- a/resources/qml/TimelineDefaultMessageStyle.qml +++ b/resources/qml/TimelineDefaultMessageStyle.qml @@ -107,6 +107,7 @@ TimelineEvent { transitions: Transition { from: "" to: "revealed" + enabled: !Settings.reducedMotion SequentialAnimation { PropertyAnimation { diff --git a/resources/qml/ToggleButton.qml b/resources/qml/ToggleButton.qml index 50ed51872..19952b330 100644 --- a/resources/qml/ToggleButton.qml +++ b/resources/qml/ToggleButton.qml @@ -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 @@ -66,6 +67,7 @@ Switch { Transition { reversible: true to: "off" + enabled: !Settings.reducedMotion ParallelAnimation { NumberAnimation { diff --git a/resources/qml/delegates/ImageMessage.qml b/resources/qml/delegates/ImageMessage.qml index f75ad7b73..0ec3d0fd7 100644 --- a/resources/qml/delegates/ImageMessage.qml +++ b/resources/qml/delegates/ImageMessage.qml @@ -72,6 +72,7 @@ AbstractButton { from: "ImageVisible" to: "BlurhashVisible" reversible: true + enabled: !Settings.reducedMotion SequentialAnimation { PropertyAction { diff --git a/resources/qml/ui/RippleImpl.qml b/resources/qml/ui/RippleImpl.qml index 9091bda29..01f054c10 100644 --- a/resources/qml/ui/RippleImpl.qml +++ b/resources/qml/ui/RippleImpl.qml @@ -59,6 +59,7 @@ Item { Transition { from: "NORMAL" to: "ACTIVE" + enabled: !Settings.reducedMotion SequentialAnimation { //PropertyAction { target: circle; property: "centerX"; value: ph.point.position.x } @@ -87,6 +88,7 @@ Item { Transition { from: "ACTIVE" to: "NORMAL" + enabled: !Settings.reducedMotion SequentialAnimation { ParallelAnimation { diff --git a/resources/qml/ui/Snackbar.qml b/resources/qml/ui/Snackbar.qml index 3c526d8d2..c2d3b72b9 100644 --- a/resources/qml/ui/Snackbar.qml +++ b/resources/qml/ui/Snackbar.qml @@ -61,6 +61,7 @@ Popup { } enter: Transition { + enabled: !Settings.reducedMotion NumberAnimation { target: snackbar property: "opacity" @@ -79,6 +80,7 @@ Popup { } } exit: Transition { + enabled: !Settings.reducedMotion NumberAnimation { target: snackbar property: "opacity" diff --git a/resources/qml/ui/media/MediaControls.qml b/resources/qml/ui/media/MediaControls.qml index f43739082..4108064ef 100644 --- a/resources/qml/ui/media/MediaControls.qml +++ b/resources/qml/ui/media/MediaControls.qml @@ -146,6 +146,7 @@ Rectangle { Transition { from: "" to: "shown" + enabled: !Settings.reducedMotion SequentialAnimation { PauseAnimation { @@ -163,6 +164,7 @@ Rectangle { Transition { from: "shown" to: "" + enabled: !Settings.reducedMotion SequentialAnimation { PauseAnimation {