Add a reduced motion option

fixes #1350

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 {

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
     }

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

src/UserSettingsPage.cpp

@@ -94,6 +94,7 @@ UserSettings::load(std::optional<QString> 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});

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,