Merge #428: Migrate to PageStacks

c52566d qml: Swap existing SwipeViews for PageStack (jarolrod)
f0e5951 qml: Swap existing StackViews for PageStack (jarolrod)
7ba2f62 qml: declare OnboardingWizard file, reintroduce as PageStack (jarolrod)
d49b888 qml: Introduce PageStack control (jarolrod)

Pull request description:

  After fixing our sins in #427, migrating to A StackView based GUI is quite simple.

  Here we use a custom StackView control, PageStack, that has a property `vertical` used to declare if we want vertical or horizontal animations, and additionally implements the [custom animation](#422) we want.

  Closes #422
  Closes #219

  [![Build Artifacts](https://img.shields.io/badge/Build%20Artifacts-green
  )]()

ACKs for top commit:
  pablomartin4btc:
    re-ACK c52566d
  MarnixCroes:
    tACK c52566d
  D33r-Gee:
    tACK  [c52566d](c52566d) Works as expected on WSL Ubuntu 22.04
  johnny9:
    ACK c52566d

Tree-SHA512: f9a025944db24a46e1f78f4ad8a9b9aca4e1f3ff4dd5927eebfa2a7fb28ed390a17da79e23c6248c3c0e82b361ff1b2dedbf4df9df2a1d0677b05bacb7763bcb

src/Makefile.qt.include

@@ -398,6 +398,7 @@ QML_RES_QML = \
   qml/controls/OptionButton.qml \
   qml/controls/OptionSwitch.qml \
   qml/controls/OutlineButton.qml \
+  qml/controls/PageStack.qml \
   qml/controls/ProgressIndicator.qml \
   qml/controls/qmldir \
   qml/controls/Setting.qml \
@@ -420,6 +421,7 @@ QML_RES_QML = \
   qml/pages/onboarding/OnboardingStorageAmount.qml \
   qml/pages/onboarding/OnboardingStorageLocation.qml \
   qml/pages/onboarding/OnboardingStrengthen.qml \
+  qml/pages/onboarding/OnboardingWizard.qml \
   qml/pages/settings/SettingsAbout.qml \
   qml/pages/settings/SettingsBlockClockDisplayMode.qml \
   qml/pages/settings/SettingsConnection.qml \

src/qml/bitcoin_qml.qrc

@@ -38,6 +38,7 @@
         <file>controls/OptionButton.qml</file>
         <file>controls/OptionSwitch.qml</file>
         <file>controls/OutlineButton.qml</file>
+        <file>controls/PageStack.qml</file>
         <file>controls/ProgressIndicator.qml</file>
         <file>controls/qmldir</file>
         <file>controls/Setting.qml</file>
@@ -60,6 +61,7 @@
         <file>pages/onboarding/OnboardingStorageAmount.qml</file>
         <file>pages/onboarding/OnboardingStorageLocation.qml</file>
         <file>pages/onboarding/OnboardingStrengthen.qml</file>
+        <file>pages/onboarding/OnboardingWizard.qml</file>
         <file>pages/settings/SettingsAbout.qml</file>
         <file>pages/settings/SettingsBlockClockDisplayMode.qml</file>
         <file>pages/settings/SettingsConnection.qml</file>

src/qml/controls/PageStack.qml

@@ -0,0 +1,51 @@
+// Copyright (c) 2024 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+StackView {
+    property bool vertical: false
+
+    pushEnter: Transition {
+        NumberAnimation {
+            property: vertical ? "y" : "x"
+            from: vertical ? parent.height : parent.width
+            to: 0
+            duration: 400
+            easing.type: Easing.Bezier
+            easing.bezierCurve: [0.5, 0.0, 0.2, 1.0]
+        }
+    }
+    pushExit: Transition {
+        NumberAnimation {
+            property: vertical ? "y" : "x"
+            from: 0
+            to: vertical ? -parent.height : -parent.width
+            duration: 400
+            easing.type: Easing.Bezier
+            easing.bezierCurve: [0.5, 0.0, 0.2, 1.0]
+        }
+    }
+    popEnter: Transition {
+        NumberAnimation {
+            property: vertical ? "y" : "x"
+            from: vertical ? -parent.height : -parent.width
+            to: 0
+            duration: 400
+            easing.type: Easing.Bezier
+            easing.bezierCurve: [0.5, 0.0, 0.2, 1.0]
+        }
+    }
+    popExit: Transition {
+        NumberAnimation {
+            property: vertical ? "y" : "x"
+            from: 0
+            to: vertical ? parent.height : parent.width
+            duration: 400
+            easing.type: Easing.Bezier
+            easing.bezierCurve: [0.5, 0.0, 0.2, 1.0]
+        }
+    }
+}

src/qml/pages/main.qml

@@ -32,7 +32,7 @@ ApplicationWindow {
         ColorAnimation { duration: 150 }
     }
 
-    StackView {
+    PageStack {
         id: main
         initialItem: {
             if (needOnboarding) {
@@ -65,36 +65,8 @@ ApplicationWindow {
 
     Component {
         id: onboardingWizard
-        SwipeView {
-            id: swipeView
-            property bool finished: false
-            interactive: false
-
-            OnboardingCover {
-                onNext: swipeView.incrementCurrentIndex()
-            }
-            OnboardingStrengthen {
-                onBack: swipeView.decrementCurrentIndex()
-                onNext: swipeView.incrementCurrentIndex()
-            }
-            OnboardingBlockclock {
-                onBack: swipeView.decrementCurrentIndex()
-                onNext: swipeView.incrementCurrentIndex()
-            }
-            OnboardingStorageLocation {
-                onBack: swipeView.decrementCurrentIndex()
-                onNext: swipeView.incrementCurrentIndex()
-            }
-            OnboardingStorageAmount {
-                onBack: swipeView.decrementCurrentIndex()
-                onNext: swipeView.incrementCurrentIndex()
-            }
-            OnboardingConnection {
-                onBack: swipeView.decrementCurrentIndex()
-                onNext: swipeView.finished = true
-            }
-
-            onFinishedChanged: {
+        OnboardingWizard {
+            onFinished: {
                 optionsModel.onboard()
                 if (AppMode.walletEnabled && AppMode.isDesktop) {
                     main.push(desktopWallets)
@@ -127,18 +99,24 @@ ApplicationWindow {
 
     Component {
         id: node
-        SwipeView {
-            id: node_swipe
-            interactive: false
-            orientation: Qt.Vertical
-            NodeRunner {
-                onSettingsClicked: {
-                    node_swipe.incrementCurrentIndex()
+        PageStack {
+            id: nodeStack
+            vertical: true
+            initialItem: node
+            Component {
+                id: node
+                NodeRunner {
+                    onSettingsClicked: {
+                        nodeStack.push(nodeSettings)
+                    }
                 }
             }
-            NodeSettings {
-                onDoneClicked: {
-                    node_swipe.decrementCurrentIndex()
+            Component {
+                id: nodeSettings
+                 NodeSettings {
+                    onDoneClicked: {
+                        nodeStack.pop()
+                    }
                 }
             }
         }

src/qml/pages/node/NodeSettings.qml

@@ -16,7 +16,7 @@ Item {
 
     id: root
 
-    StackView {
+    PageStack {
         id: nodeSettingsView
         anchors.fill: parent
 

src/qml/pages/onboarding/OnboardingConnection.qml

@@ -15,46 +15,52 @@ Page {
     signal next
     background: null
     clip: true
-    SwipeView {
-        id: connections
+    PageStack {
+        id: connectionStack
         anchors.fill: parent
-        interactive: false
-        orientation: Qt.Vertical
-        InformationPage {
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: root.back()
-            }
-            bannerItem: Image {
-                Layout.topMargin: 20
-                Layout.alignment: Qt.AlignCenter
-                source: Theme.image.storage
-                sourceSize.width: 200
-                sourceSize.height: 200
-            }
-            bold: true
-            headerText: qsTr("Starting initial download")
-            headerMargin: 30
-            description: qsTr("The application will connect to the Bitcoin network and start downloading and verifying transactions.\n\nThis may take several hours, or even days, based on your connection.")
-            descriptionMargin: 10
-            detailActive: true
-            detailTopMargin: 10
-            detailItem: RowLayout {
-                TextButton {
+        vertical: true
+        initialItem: onboardingConnection
+        Component {
+            id: onboardingConnection
+            InformationPage {
+                navLeftDetail: NavButton {
+                    iconSource: "image://images/caret-left"
+                    text: qsTr("Back")
+                    onClicked: root.back()
+                }
+                bannerItem: Image {
+                    Layout.topMargin: 20
                     Layout.alignment: Qt.AlignCenter
-                    text: qsTr("Connection settings")
-                    onClicked: connections.incrementCurrentIndex()
+                    source: Theme.image.storage
+                    sourceSize.width: 200
+                    sourceSize.height: 200
                 }
+                bold: true
+                headerText: qsTr("Starting initial download")
+                headerMargin: 30
+                description: qsTr("The application will connect to the Bitcoin network and start downloading and verifying transactions.\n\nThis may take several hours, or even days, based on your connection.")
+                descriptionMargin: 10
+                detailActive: true
+                detailTopMargin: 10
+                detailItem: RowLayout {
+                    TextButton {
+                        Layout.alignment: Qt.AlignCenter
+                        text: qsTr("Connection settings")
+                        onClicked: connectionStack.push(connectionSettings)
+                    }
+                }
+                lastPage: true
+                buttonText: qsTr("Next")
+                buttonMargin: 20
+                onNext: root.next()
             }
-            lastPage: true
-            buttonText: qsTr("Next")
-            buttonMargin: 20
-            onNext: root.next()
         }
-        SettingsConnection {
-            onboarding: true
-            onBack: connections.decrementCurrentIndex()
+        Component {
+            id: connectionSettings
+            SettingsConnection {
+                onboarding: true
+                onBack: connectionStack.pop()
+            }
         }
     }
 }

src/qml/pages/onboarding/OnboardingCover.qml

@@ -14,47 +14,50 @@ Page {
     signal next
     background: null
     clip: true
-    SwipeView {
-        id: introductions
+    PageStack {
+        id: coverStack
         anchors.fill: parent
-        interactive: false
-        orientation: Qt.Horizontal
-        InformationPage {
-            navRightDetail: NavButton {
-                iconSource: "image://images/info"
-                iconHeight: 24
-                iconWidth: 24
-                iconColor: Theme.color.neutral0
-                iconBackground: Rectangle {
-                    radius: 12
-                    color: Theme.color.neutral9
+        initialItem: onboardingCover
+        Component {
+            id: onboardingCover
+            InformationPage {
+                navRightDetail: NavButton {
+                    iconSource: "image://images/info"
+                    iconHeight: 24
+                    iconWidth: 24
+                    iconColor: Theme.color.neutral0
+                    iconBackground: Rectangle {
+                        radius: 12
+                        color: Theme.color.neutral9
+                    }
+                    onClicked: coverStack.push(coverSettings)
                 }
-                onClicked: {
-                    introductions.incrementCurrentIndex()
+                bannerItem: Image {
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignCenter
+                    source: "image://images/app"
+                    // Bitcoin icon has ~11% padding
+                    sourceSize.width: 112
+                    sourceSize.height: 112
                 }
+                bannerMargin: 0
+                bold: true
+                headerText: qsTr("Bitcoin Core App")
+                headerSize: 36
+                description: qsTr("Be part of the Bitcoin network.")
+                descriptionMargin: 10
+                descriptionSize: 24
+                subtext: qsTr("100% open-source & open-design")
+                buttonText: qsTr("Start")
+                onNext: root.next()
             }
-            bannerItem: Image {
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignCenter
-                source: "image://images/app"
-                // Bitcoin icon has ~11% padding
-                sourceSize.width: 112
-                sourceSize.height: 112
-            }
-            bannerMargin: 0
-            bold: true
-            headerText: qsTr("Bitcoin Core App")
-            headerSize: 36
-            description: qsTr("Be part of the Bitcoin network.")
-            descriptionMargin: 10
-            descriptionSize: 24
-            subtext: qsTr("100% open-source & open-design")
-            buttonText: qsTr("Start")
-            onNext: root.next()
         }
-        SettingsAbout {
-            onboarding: true
-            onBack: introductions.decrementCurrentIndex()
+        Component {
+            id: coverSettings
+            SettingsAbout {
+                onboarding: true
+                onBack: coverStack.pop()
+            }
         }
     }
 }