From 51d2e7be05a33a8bf62c8494aaa6837bc7533a7b Mon Sep 17 00:00:00 2001
From: 0xFEEDC0DE64 <daniel@brunner.ninja>
Date: Fri, 12 Jul 2024 22:27:09 +0200
Subject: [PATCH] Add transitions in stack layout

---
 AnimatedStackLayout.qml | 52 +++++++++++++++++++++++++++++++++++++++++
 CMakeLists.txt          |  1 +
 MainScreen.qml          |  2 +-
 qmldir                  |  1 +
 4 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 AnimatedStackLayout.qml

diff --git a/AnimatedStackLayout.qml b/AnimatedStackLayout.qml
new file mode 100644
index 0000000..573d18c
--- /dev/null
+++ b/AnimatedStackLayout.qml
@@ -0,0 +1,52 @@
+import QtQuick
+import QtQuick.Layouts
+
+StackLayout {
+    id: root
+    property int previousIndex: 0
+    property var items: children
+    property Item previousItem: items[previousIndex]
+    property Item currentItem: items[currentIndex]
+
+    Component.onCompleted: {
+        previousIndex = currentIndex
+
+        for(var i = 1; i < count; ++i) {
+            children[i].opacity = 0
+        }
+    }
+
+    Component {
+        id: crossFader
+        ParallelAnimation {
+            property Item fadeOutTarget
+            property Item fadeInTarget
+
+            NumberAnimation {
+                target: fadeOutTarget
+                property: "opacity"
+                to: 0
+                duration: 300
+            }
+
+            NumberAnimation {
+                target: fadeInTarget
+                property: "opacity"
+                to: 1
+                duration: 300
+            }
+        }
+    }
+
+    onCurrentIndexChanged: {
+        items = root.children
+
+        if(previousItem && currentItem && (previousItem != currentItem)) {
+            previousItem.visible = false
+            currentItem.visible = true    
+            var crossFaderAnim = crossFader.createObject(parent, {fadeOutTarget: previousItem, fadeInTarget: currentItem})
+            crossFaderAnim.restart()
+        }
+        previousIndex = currentIndex
+    }
+}
diff --git a/CMakeLists.txt b/CMakeLists.txt
index 031755f..ded8c5c 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -53,6 +53,7 @@ qt_add_qml_module(evcharger-app
         AboutPage.qml
         AccessPage.qml
         AddDeviceScreen.qml
+        AnimatedStackLayout.qml
         AnimatedStackView.qml
         ApiKeyValueItem.qml
         ApiSettingsPage.qml
diff --git a/MainScreen.qml b/MainScreen.qml
index 96e9f0a..a753a6d 100644
--- a/MainScreen.qml
+++ b/MainScreen.qml
@@ -175,7 +175,7 @@ ColumnLayout {
         }
     }
 
-    StackLayout {
+    AnimatedStackLayout {
         id: stackLayout
         Layout.fillWidth: true
         Layout.fillHeight: true
diff --git a/qmldir b/qmldir
index 38ea269..1dd10c5 100644
--- a/qmldir
+++ b/qmldir
@@ -3,6 +3,7 @@ module EVChargerApp
 EVChargerApp 1.0 AboutPage.qml
 EVChargerApp 1.0 AccessPage.qml
 EVChargerApp 1.0 AddDeviceScreen.qml
+EVChargerApp 1.0 AnimatedStackLayout.qml
 EVChargerApp 1.0 AnimatedStackView.qml
 EVChargerApp 1.0 ApiKeyValueItem.qml
 EVChargerApp 1.0 ApiSettingsPage.qml