From ad4ea02547df07538946c9e8ad01a5d8a3106c32 Mon Sep 17 00:00:00 2001 From: Nicolas Werner Date: Mon, 6 Feb 2023 13:56:23 +0100 Subject: [PATCH] Add a reduced motion option fixes #1350 --- resources/qml/Root.qml | 57 +++++++++++++++++++++ resources/qml/components/AdaptiveLayout.qml | 2 +- resources/qml/pages/WelcomePage.qml | 22 ++++++++ src/UserSettingsPage.cpp | 40 +++++++++++++++ src/UserSettingsPage.h | 15 ++++-- 5 files changed, 132 insertions(+), 4 deletions(-) diff --git a/resources/qml/Root.qml b/resources/qml/Root.qml index f60ebac1..49e07d38 100644 --- a/resources/qml/Root.qml +++ b/resources/qml/Root.qml @@ -345,6 +345,63 @@ Pane { anchors.fill: parent initialItem: welcomePage + + Transition { + id: reducedMotionTransitionExit + PropertyAnimation { + property: "opacity" + from: 1 + to:0 + duration: 200 + } + } + Transition { + id: reducedMotionTransitionEnter + SequentialAnimation { + PropertyAction { property: "opacity"; value: 0 } + PauseAnimation { duration: 200 } + PropertyAnimation { + property: "opacity" + from: 0 + to:1 + duration: 200 + } + } + } + + // for some reason direct bindings to a hidden StackView don't work, so manually store and restore here. + property Transition pushEnterOrg + property Transition pushExitOrg + property Transition popEnterOrg + property Transition popExitOrg + property Transition replaceEnterOrg + property Transition replaceExitOrg + Component.onCompleted: { + pushEnterOrg = pushEnter; + popEnterOrg = popEnter; + replaceEnterOrg = replaceEnter; + pushExitOrg = pushExit; + popExitOrg = popExit; + replaceExitOrg = replaceExit; + + updateTrans() + } + + function updateTrans() { + pushEnter = Settings.reducedMotion ? reducedMotionTransitionEnter : pushEnterOrg; + pushExit = Settings.reducedMotion ? reducedMotionTransitionExit : pushExitOrg; + popEnter = Settings.reducedMotion ? reducedMotionTransitionEnter : popEnterOrg; + popExit = Settings.reducedMotion ? reducedMotionTransitionExit : popExitOrg; + replaceEnter = Settings.reducedMotion ? reducedMotionTransitionEnter : replaceEnterOrg; + replaceExit = Settings.reducedMotion ? reducedMotionTransitionExit : replaceExitOrg; + } + + Connections { + target: Settings + function onReducedMotionChanged() { + mainWindow.updateTrans(); + } + } } Component { diff --git a/resources/qml/components/AdaptiveLayout.qml b/resources/qml/components/AdaptiveLayout.qml index a2148c06..5b20a7cf 100644 --- a/resources/qml/components/AdaptiveLayout.qml +++ b/resources/qml/components/AdaptiveLayout.qml @@ -130,7 +130,7 @@ Container { orientation: ListView.Horizontal highlightRangeMode: ListView.StrictlyEnforceRange interactive: singlePageMode - highlightMoveDuration: container.singlePageMode ? 200 : 0 + highlightMoveDuration: (container.singlePageMode && !Settings.reducedMotion) ? 200 : 0 currentIndex: container.singlePageMode ? container.pageIndex : 0 boundsBehavior: Flickable.StopAtBounds } diff --git a/resources/qml/pages/WelcomePage.qml b/resources/qml/pages/WelcomePage.qml index 914de763..77c50b59 100644 --- a/resources/qml/pages/WelcomePage.qml +++ b/resources/qml/pages/WelcomePage.qml @@ -9,6 +9,7 @@ import QtQuick.Layouts 1.2 import QtQuick.Window 2.15 import im.nheko 1.0 import "../components/" +import ".." ColumnLayout { Item { @@ -64,9 +65,30 @@ ColumnLayout { mainWindow.push(loginPage); } } + Item { Layout.fillWidth: true } + + } + + RowLayout { + Layout.alignment: Qt.AlignHCenter + Layout.margins: Nheko.paddingLarge + + ToggleButton { + Layout.margins: Nheko.paddingLarge + Layout.alignment: Qt.AlignRight + checked: Settings.reducedMotion + onCheckedChanged: Settings.reducedMotion = checked + } + + Label { + Layout.alignment: Qt.AlignLeft + Layout.margins: Nheko.paddingLarge + text: qsTr("Reduce animations") + color: Nheko.colors.text + } } Item { Layout.fillHeight: true diff --git a/src/UserSettingsPage.cpp b/src/UserSettingsPage.cpp index 2bb8a118..ec873e92 100644 --- a/src/UserSettingsPage.cpp +++ b/src/UserSettingsPage.cpp @@ -94,6 +94,7 @@ UserSettings::load(std::optional profile) settings.value(QStringLiteral("user/decrypt_notifications"), true).toBool(); spaceNotifications_ = settings.value(QStringLiteral("user/space_notifications"), true).toBool(); fancyEffects_ = settings.value(QStringLiteral("user/fancy_effects"), true).toBool(); + reducedMotion_ = settings.value(QStringLiteral("user/reduced_motion"), false).toBool(); privacyScreen_ = settings.value(QStringLiteral("user/privacy_screen"), false).toBool(); privacyScreenTimeout_ = settings.value(QStringLiteral("user/privacy_screen_timeout"), 0).toInt(); @@ -471,6 +472,22 @@ UserSettings::setFancyEffects(bool state) save(); } +void +UserSettings::setReducedMotion(bool state) +{ + if (state == reducedMotion_) + return; + reducedMotion_ = state; + emit reducedMotionChanged(state); + save(); + + // Also toggle other motion related settings + if (reducedMotion_) { + setFancyEffects(false); + setAnimateImagesOnHover(true); + } +} + void UserSettings::setPrivacyScreen(bool state) { @@ -835,6 +852,7 @@ UserSettings::save() settings.setValue(QStringLiteral("decrypt_notificatons"), decryptNotifications_); settings.setValue(QStringLiteral("space_notifications"), spaceNotifications_); settings.setValue(QStringLiteral("fancy_effects"), fancyEffects_); + settings.setValue(QStringLiteral("reduced_motion"), reducedMotion_); settings.setValue(QStringLiteral("privacy_screen"), privacyScreen_); settings.setValue(QStringLiteral("privacy_screen_timeout"), privacyScreenTimeout_); settings.setValue(QStringLiteral("mobile_mode"), mobileMode_); @@ -991,6 +1009,8 @@ UserSettingsModel::data(const QModelIndex &index, int role) const return tr("Show message counts for communities and tags"); case FancyEffects: return tr("Display fancy effects such as confetti"); + case ReducedMotion: + return tr("Reduce or disable animations"); case PrivacyScreen: return tr("Privacy Screen"); case PrivacyScreenTimeout: @@ -1039,6 +1059,8 @@ UserSettingsModel::data(const QModelIndex &index, int role) const return tr("Platform"); case GeneralSection: return tr("GENERAL"); + case AccessibilitySection: + return tr("ACCESSIBILITY"); case TimelineSection: return tr("TIMELINE"); case SidebarSection: @@ -1129,6 +1151,8 @@ UserSettingsModel::data(const QModelIndex &index, int role) const return i->spaceNotifications(); case FancyEffects: return i->fancyEffects(); + case ReducedMotion: + return i->reducedMotion(); case PrivacyScreen: return i->privacyScreen(); case PrivacyScreenTimeout: @@ -1296,6 +1320,9 @@ UserSettingsModel::data(const QModelIndex &index, int role) const case FancyEffects: return tr("Some messages can be sent with fancy effects. For example, messages sent " "with '/confetti' will show confetti on screen."); + case ReducedMotion: + return tr("Nheko uses animations in several places to make stuff pretty. This allows " + "you to turn those off if they make you feel unwell."); case PrivacyScreen: return tr("When the window loses focus, the timeline will\nbe blurred."); case MobileMode: @@ -1326,6 +1353,7 @@ UserSettingsModel::data(const QModelIndex &index, int role) const case Version: case Platform: case GeneralSection: + case AccessibilitySection: case TimelineSection: case SidebarSection: case TraySection: @@ -1409,6 +1437,7 @@ UserSettingsModel::data(const QModelIndex &index, int role) const case ExposeDBusApi: case SpaceNotifications: case FancyEffects: + case ReducedMotion: return Toggle; case Profile: case UserId: @@ -1420,6 +1449,7 @@ UserSettingsModel::data(const QModelIndex &index, int role) const case Platform: return ReadOnlyText; case GeneralSection: + case AccessibilitySection: case TimelineSection: case SidebarSection: case TraySection: @@ -1744,6 +1774,13 @@ UserSettingsModel::setData(const QModelIndex &index, const QVariant &value, int } else return false; } + case ReducedMotion: { + if (value.userType() == QMetaType::Bool) { + i->setReducedMotion(value.toBool()); + return true; + } else + return false; + } case PrivacyScreen: { if (value.userType() == QMetaType::Bool) { i->setPrivacyScreen(value.toBool()); @@ -2068,6 +2105,9 @@ UserSettingsModel::UserSettingsModel(QObject *p) connect(s.get(), &UserSettings::fancyEffectsChanged, this, [this]() { emit dataChanged(index(FancyEffects), index(FancyEffects), {Value}); }); + connect(s.get(), &UserSettings::reducedMotionChanged, this, [this]() { + emit dataChanged(index(ReducedMotion), index(ReducedMotion), {Value}); + }); connect(s.get(), &UserSettings::trayChanged, this, [this]() { emit dataChanged(index(Tray), index(Tray), {Value}); emit dataChanged(index(StartInTray), index(StartInTray), {Enabled}); diff --git a/src/UserSettingsPage.h b/src/UserSettingsPage.h index 37a53ab2..867568b1 100644 --- a/src/UserSettingsPage.h +++ b/src/UserSettingsPage.h @@ -66,6 +66,8 @@ class UserSettings final : public QObject Q_PROPERTY(bool spaceNotifications READ spaceNotifications WRITE setSpaceNotifications NOTIFY spaceNotificationsChanged) Q_PROPERTY(bool fancyEffects READ fancyEffects WRITE setFancyEffects NOTIFY fancyEffectsChanged) + Q_PROPERTY( + bool reducedMotion READ reducedMotion WRITE setReducedMotion NOTIFY reducedMotionChanged) Q_PROPERTY( bool privacyScreen READ privacyScreen WRITE setPrivacyScreen NOTIFY privacyScreenChanged) Q_PROPERTY(int privacyScreenTimeout READ privacyScreenTimeout WRITE setPrivacyScreenTimeout @@ -174,6 +176,7 @@ public: void setDecryptNotifications(bool state); void setSpaceNotifications(bool state); void setFancyEffects(bool state); + void setReducedMotion(bool state); void setPrivacyScreen(bool state); void setPrivacyScreenTimeout(int state); void setPresence(Presence state); @@ -218,6 +221,7 @@ public: bool decryptNotifications() const { return decryptNotifications_; } bool spaceNotifications() const { return spaceNotifications_; } bool fancyEffects() const { return fancyEffects_; } + bool reducedMotion() const { return reducedMotion_; } bool privacyScreen() const { return privacyScreen_; } int privacyScreenTimeout() const { return privacyScreenTimeout_; } bool markdown() const { return markdown_; } @@ -300,6 +304,7 @@ signals: void decryptNotificationsChanged(bool state); void spaceNotificationsChanged(bool state); void fancyEffectsChanged(bool state); + void reducedMotionChanged(bool state); void privacyScreenChanged(bool state); void privacyScreenTimeoutChanged(int state); void timelineMaxWidthChanged(int state); @@ -366,6 +371,7 @@ private: bool decryptNotifications_; bool spaceNotifications_; bool fancyEffects_; + bool reducedMotion_; bool privacyScreen_; int privacyScreenTimeout_; bool shareKeysWithTrustedUsers_; @@ -434,11 +440,15 @@ class UserSettingsModel final : public QAbstractListModel ExposeDBusApi, #endif + AccessibilitySection, + ReducedMotion, + FancyEffects, + AnimateImagesOnHover, + MessageHoverHighlight, + TimelineSection, TimelineMaxWidth, - MessageHoverHighlight, EnlargeEmojiOnlyMessages, - AnimateImagesOnHover, OpenImageExternal, OpenVideoExternal, ButtonsInTimeline, @@ -448,7 +458,6 @@ class UserSettingsModel final : public QAbstractListModel InvertEnterKey, Bubbles, SmallAvatars, - FancyEffects, SidebarSection, GroupView,