qml: Swap existing SwipeViews for PageStack

Vertical PageStacks used to replace vertical SwipeViews.
bitcoin-core · Oct 26, 2024 · 3788060 · 3788060
1 parent 05660f4
commit 3788060
Show file tree

Hide file tree

Showing 8 changed files with 279 additions and 235 deletions.
diff --git a/src/qml/pages/main.qml b/src/qml/pages/main.qml
@@ -99,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()
+                    }
                 }
             }
         }

diff --git a/src/qml/pages/onboarding/OnboardingConnection.qml b/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()
+            }
         }
     }
 }
diff --git a/src/qml/pages/onboarding/OnboardingCover.qml b/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()
+            }
         }
     }
 }
diff --git a/src/qml/pages/onboarding/OnboardingStorageAmount.qml b/src/qml/pages/onboarding/OnboardingStorageAmount.qml
@@ -13,49 +13,63 @@ Page {
     id: root
     signal back
     signal next
+    property bool customStorage: false
+    property int customStorageAmount
     background: null
     clip: true
-    SwipeView {
-        id: storages
+    PageStack {
+        id: stack
         anchors.fill: parent
-        interactive: false
-        orientation: Qt.Vertical
-        InformationPage {
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: root.back()
-            }
-            bannerActive: false
-            bold: true
-            headerText: qsTr("Storage")
-            headerMargin: 0
-            description: qsTr("Data retrieved from the Bitcoin network is stored on your device.\nYou have 500GB of storage available.")
-            descriptionMargin: 10
-            detailActive: true
-            detailItem: ColumnLayout {
-                spacing: 0
-                StorageOptions {
-                    customStorage: advancedStorage.loadedDetailItem.customStorage
-                    customStorageAmount: advancedStorage.loadedDetailItem.customStorageAmount
-                    Layout.maximumWidth: 450
-                    Layout.alignment: Qt.AlignCenter
+        vertical: true
+        initialItem: onboardingStorageAmount
+        Component {
+            id: onboardingStorageAmount
+            InformationPage {
+                navLeftDetail: NavButton {
+                    iconSource: "image://images/caret-left"
+                    text: qsTr("Back")
+                    onClicked: root.back()
                 }
-                TextButton {
-                    Layout.topMargin: 10
-                    Layout.alignment: Qt.AlignCenter
-                    text: qsTr("Detailed settings")
-                    onClicked: storages.incrementCurrentIndex()
+                bannerActive: false
+                bold: true
+                headerText: qsTr("Storage")
+                headerMargin: 0
+                description: qsTr("Data retrieved from the Bitcoin network is stored on your device.\nYou have 500GB of storage available.")
+                descriptionMargin: 10
+                detailActive: true
+                detailItem: ColumnLayout {
+                    spacing: 0
+                    StorageOptions {
+                        customStorage: advancedStorage.loadedDetailItem.customStorage
+                        customStorageAmount: advancedStorage.loadedDetailItem.customStorageAmount
+                        Layout.maximumWidth: 450
+                        Layout.alignment: Qt.AlignCenter
+                    }
+                    TextButton {
+                        Layout.topMargin: 10
+                        Layout.alignment: Qt.AlignCenter
+                        text: qsTr("Detailed settings")
+                        onClicked: stack.push(storageAmountSettings)
+                    }
                 }
+                buttonText: qsTr("Next")
+                buttonMargin: 20
+                onNext: root.next()
             }
-            buttonText: qsTr("Next")
-            buttonMargin: 20
-            onNext: root.next()
         }
-        SettingsStorage {
-            id: advancedStorage
-            onboarding: true
-            onBack: storages.decrementCurrentIndex()
+        Component {
+            id: storageAmountSettings
+            SettingsStorage {
+                id: advancedStorage
+                onboarding: true
+                onBack: stack.pop()
+                onCustomStorageChanged: {
+                    root.customStorage = advancedStorage.customStorage
+                }
+                onCustomStorageAmountChanged: {
+                    root.customStorageAmount = advancedStorage.customStorageAmount
+                }
+            }
         }
     }
 }