qml: signal based navigation in onboarding

jarolrod · jarolrod · commit fad9bd72e586 · 2024-10-25T01:14:54.000-04:00
Pages exist within a view, in this page &lt;-&gt; view dependency, somewhere
inside of there, at least for views that are 'flows' or 'wizards,' there
needs to be logic on:

    a) when to move to a new page
    b) what page to move to.

We are currently handling this navigation logic primarily inside the
definition of a page itself. Inside of the page, we assume a hard-coded
ID for a parent view and call navigation function directly to the view
from within the page itself telling it to:

    a) to pop or push
    b) the id of the page we want to push.

This is bad because:

    1. It creates a dependency between page declarations that does not
       need to exist. As in, PageB.qml doesn't really exist unless
       PageA.qml includes code to go to it.

    2. This prevents us from being able to 'statically' define and
       clearly contain pages. Clearly containing pages makes it so that
       when we want to reason about PageA.qml, we only have to look
       inside of PageA.qml and the components that are used within that
       file; we don't have to go on a chase for interlinked dependencies
       on id's or properties that are hidden or at least not easy to
       find in other pages.

    3. We should never assume outside id's from within a page, as these
       can change, and when they change, the page that assumes said
       outside id is now broken, and debugging can be annoying.

All of this is unnecessary.

In this commit, we address the issue of the logic for navigation being
contained within the page definitions. This proposes a new navigation
model based on signals and first applies it to the onboarding flow.
Pages within our onboarding flow now:

    1. Emit a signal when it's time to go to a new page
    2. The parent View itself handles the signals and contains the logic
       for navigation.

This removes the dependence on having a hardcoded outside ID within a
a page, and is one step to moving us to pages with no dependency on
other pages.
diff --git a/src/qml/controls/InformationPage.qml b/src/qml/controls/InformationPage.qml
@@ -9,6 +9,8 @@ import org.bitcoincore.qt 1.0
 
 Page {
     id: root
+    signal back
+    signal next
     implicitHeight: information.height + continueButton.height + buttonMargin
     property alias bannerItem: banner_loader.sourceComponent
     property alias detailItem: detail_loader.sourceComponent
@@ -106,7 +108,7 @@ Page {
             anchors.rightMargin: 20
             anchors.horizontalCenter: parent.horizontalCenter
             text: root.buttonText
-            onClicked: root.lastPage ? swipeView.finished = true : swipeView.incrementCurrentIndex()
+            onClicked: root.next()
         }
     }
 
diff --git a/src/qml/pages/main.qml b/src/qml/pages/main.qml
@@ -70,12 +70,29 @@ ApplicationWindow {
             property bool finished: false
             interactive: false
 
-            OnboardingCover {}
-            OnboardingStrengthen {}
-            OnboardingBlockclock {}
-            OnboardingStorageLocation {}
-            OnboardingStorageAmount {}
-            OnboardingConnection {}
+            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: {
                 optionsModel.onboard()
diff --git a/src/qml/pages/onboarding/OnboardingBlockclock.qml b/src/qml/pages/onboarding/OnboardingBlockclock.qml
@@ -8,10 +8,11 @@ import QtQuick.Layouts 1.15
 import "../../controls"
 
 InformationPage {
+    id: root
     navLeftDetail: NavButton {
         iconSource: "image://images/caret-left"
         text: qsTr("Back")
-        onClicked: swipeView.decrementCurrentIndex()
+        onClicked: root.back()
     }
     bannerItem: Image {
         source: Theme.image.blocktime
diff --git a/src/qml/pages/onboarding/OnboardingConnection.qml b/src/qml/pages/onboarding/OnboardingConnection.qml
@@ -10,6 +10,9 @@ import "../../components"
 import "../settings"
 
 Page {
+    id: root
+    signal back
+    signal next
     background: null
     clip: true
     SwipeView {
@@ -21,7 +24,7 @@ Page {
             navLeftDetail: NavButton {
                 iconSource: "image://images/caret-left"
                 text: qsTr("Back")
-                onClicked: swipeView.decrementCurrentIndex()
+                onClicked: root.back()
             }
             bannerItem: Image {
                 Layout.topMargin: 20
@@ -47,6 +50,7 @@ Page {
             lastPage: true
             buttonText: qsTr("Next")
             buttonMargin: 20
+            onNext: root.next()
         }
         SettingsConnection {
             navRightDetail: NavButton {
diff --git a/src/qml/pages/onboarding/OnboardingCover.qml b/src/qml/pages/onboarding/OnboardingCover.qml
@@ -10,6 +10,8 @@ import "../../components"
 import "../settings"
 
 Page {
+    id: root
+    signal next
     background: null
     clip: true
     SwipeView {
@@ -48,6 +50,7 @@ Page {
             descriptionSize: 24
             subtext: qsTr("100% open-source & open-design")
             buttonText: qsTr("Start")
+            onNext: root.next()
         }
         SettingsAbout {
             navLeftDetail: NavButton {
diff --git a/src/qml/pages/onboarding/OnboardingStorageAmount.qml b/src/qml/pages/onboarding/OnboardingStorageAmount.qml
@@ -10,6 +10,9 @@ import "../../components"
 import "../settings"
 
 Page {
+    id: root
+    signal back
+    signal next
     background: null
     clip: true
     SwipeView {
@@ -21,7 +24,7 @@ Page {
             navLeftDetail: NavButton {
                 iconSource: "image://images/caret-left"
                 text: qsTr("Back")
-                onClicked: swipeView.decrementCurrentIndex()
+                onClicked: root.back()
             }
             bannerActive: false
             bold: true
@@ -47,6 +50,7 @@ Page {
             }
             buttonText: qsTr("Next")
             buttonMargin: 20
+            onNext: root.next()
         }
         SettingsStorage {
             id: advancedStorage
diff --git a/src/qml/pages/onboarding/OnboardingStorageLocation.qml b/src/qml/pages/onboarding/OnboardingStorageLocation.qml
@@ -10,10 +10,11 @@ import "../../controls"
 import "../../components"
 
 InformationPage {
+    id: root
     navLeftDetail: NavButton {
         iconSource: "image://images/caret-left"
         text: qsTr("Back")
-        onClicked: swipeView.decrementCurrentIndex()
+        onClicked: root.back()
     }
     bannerActive: false
     bold: true
diff --git a/src/qml/pages/onboarding/OnboardingStrengthen.qml b/src/qml/pages/onboarding/OnboardingStrengthen.qml
@@ -8,10 +8,11 @@ import QtQuick.Layouts 1.15
 import "../../controls"
 
 InformationPage {
+    id: root
     navLeftDetail: NavButton {
         iconSource: "image://images/caret-left"
         text: qsTr("Back")
-        onClicked: swipeView.decrementCurrentIndex()
+        onClicked: root.back()
     }
     bannerItem: Image {
         source: Theme.image.network
