Add a reduced motion option

fixes #1350

3 files changed, 80 insertions, 1 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