qml: Use signal based navigation in NodeSettings, don't alias nav elems

jarolrod · jarolrod · commit 7b5f9c106ddb · 2024-10-26T19:04:18.000-04:00
In containing pages, everything a page needs should be defined where the
page is declared. Allowing to alias nav elements into a page breaks
the idea of pages being statically defined. The action of aliasing
down nav elements means that the real declaration of a page is not in
its 'filename.qml', but instead where the page is used, meaning a page
can be defined an infinite amount of times in an infinite amount of
ways; we don't want this.

The only reason that we were aliasing down nav elements is that we have
reusable pages for settings and what elements the nav bar will contain
is different depending on whether we are onboarding or not. So, we
should treat that as the navbar for the page has two states, so we
should have logic for these states instead of defining the page in
different locations in different ways.

This state logic is handled by setting a property of onboarding or not,
a follow-up can potentially move this into an appropriate backend object
such as AppMode.
diff --git a/src/qml/pages/node/NetworkTraffic.qml b/src/qml/pages/node/NetworkTraffic.qml
@@ -19,7 +19,16 @@ InformationPage {
         id: settings
         property alias trafficGraphScale: root.trafficGraphScale
     }
-
+    navLeftDetail: NavButton {
+        iconSource: "image://images/caret-left"
+        text: qsTr("Back")
+        onClicked: root.back()
+    }
+    navMiddleDetail: Header {
+        headerBold: true
+        headerSize: 18
+        header: qsTr("Network traffic")
+    }
     bannerActive: false
     bold: true
     headerText: qsTr("Network Traffic")
diff --git a/src/qml/pages/node/NodeSettings.qml b/src/qml/pages/node/NodeSettings.qml
@@ -122,24 +122,7 @@ Item {
     Component {
         id: about_page
         SettingsAbout {
-            showHeader: false
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    nodeSettingsView.pop()
-                }
-            }
-            navMiddleDetail: Header {
-                headerBold: true
-                headerSize: 18
-                header: qsTr("About")
-            }
-            devMiddleDetail: Header {
-                headerBold: true
-                headerSize: 18
-                header: qsTr("Developer settings")
-            }
+            onBack: nodeSettingsView.pop()
         }
     }
     Component {
@@ -153,37 +136,13 @@ Item {
     Component {
         id: storage_page
         SettingsStorage {
-            showHeader: false
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    nodeSettingsView.pop()
-                }
-            }
-            navMiddleDetail: Header {
-                headerBold: true
-                headerSize: 18
-                header: qsTr("Storage settings")
-            }
+            onBack: nodeSettingsView.pop()
         }
     }
     Component {
         id: connection_page
         SettingsConnection {
-            showHeader: false
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    nodeSettingsView.pop()
-                }
-            }
-            navMiddleDetail: Header {
-                headerBold: true
-                headerSize: 18
-                header: qsTr("Connection settings")
-            }
+            onBack: nodeSettingsView.pop()
         }
     }
     Component {
@@ -210,18 +169,7 @@ Item {
         id: networktraffic_page
         NetworkTraffic {
             showHeader: false
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    nodeSettingsView.pop()
-                }
-            }
-            navMiddleDetail: Header {
-                headerBold: true
-                headerSize: 18
-                header: qsTr("Network traffic")
-            }
+            onBack: nodeSettingsView.pop()
         }
     }
 }
diff --git a/src/qml/pages/onboarding/OnboardingConnection.qml b/src/qml/pages/onboarding/OnboardingConnection.qml
@@ -53,12 +53,8 @@ Page {
             onNext: root.next()
         }
         SettingsConnection {
-            navRightDetail: NavButton {
-                text: qsTr("Done")
-                onClicked: {
-                    connections.decrementCurrentIndex()
-                }
-            }
+            onboarding: true
+            onBack: connections.decrementCurrentIndex()
         }
     }
 }
diff --git a/src/qml/pages/onboarding/OnboardingCover.qml b/src/qml/pages/onboarding/OnboardingCover.qml
@@ -53,13 +53,8 @@ Page {
             onNext: root.next()
         }
         SettingsAbout {
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    introductions.decrementCurrentIndex()
-                }
-            }
+            onboarding: true
+            onBack: introductions.decrementCurrentIndex()
         }
     }
 }
diff --git a/src/qml/pages/onboarding/OnboardingStorageAmount.qml b/src/qml/pages/onboarding/OnboardingStorageAmount.qml
@@ -54,12 +54,8 @@ Page {
         }
         SettingsStorage {
             id: advancedStorage
-            navRightDetail: NavButton {
-                text: qsTr("Done")
-                onClicked: {
-                    storages.decrementCurrentIndex()
-                }
-            }
+            onboarding: true
+            onBack: storages.decrementCurrentIndex()
         }
     }
 }
diff --git a/src/qml/pages/settings/SettingsAbout.qml b/src/qml/pages/settings/SettingsAbout.qml
@@ -9,16 +9,11 @@ import "../../controls"
 import "../../components"
 
 Item {
-    property alias navLeftDetail: aboutSwipe.navLeftDetail
-    property alias navMiddleDetail: aboutSwipe.navMiddleDetail
-    property alias devMiddleDetail: aboutSwipe.devMiddleDetail
-    property alias showHeader: aboutSwipe.showHeader
+    id: root
+    signal back
+    property bool onboarding: false
     SwipeView {
         id: aboutSwipe
-        property alias navLeftDetail: about_settings.navLeftDetail
-        property alias navMiddleDetail: about_settings.navMiddleDetail
-        property alias devMiddleDetail: about_developer.navMiddleDetail
-        property alias showHeader: about_settings.showHeader
         anchors.fill: parent
         interactive: false
         orientation: Qt.Horizontal
@@ -27,6 +22,7 @@ Item {
             bannerActive: false
             bannerMargin: 0
             bold: true
+            showHeader: root.onboarding
             headerText: qsTr("About")
             headerMargin: 0
             description: qsTr("Bitcoin Core is an open source project.\nIf you find it useful, please contribute.\n\n This is experimental software.")
@@ -35,17 +31,49 @@ Item {
             detailItem: AboutOptions {
                 onNext: aboutSwipe.incrementCurrentIndex()
             }
+
+            states: [
+                State {
+                    when: root.onboarding
+                    PropertyChanges {
+                        target: about_settings
+                        navLeftDetail: backButton
+                        navMiddleDetail: null
+                    }
+                },
+                State {
+                    when: !root.onboarding
+                    PropertyChanges {
+                        target: about_settings
+                        navLeftDetail: backButton
+                        navMiddleDetail: header
+                    }
+                }
+            ]
+
+            Component {
+                id: backButton
+                NavButton {
+                    iconSource: "image://images/caret-left"
+                    text: qsTr("Back")
+                    onClicked: root.back()
+                }
+            }
+            Component {
+                id: header
+                Header {
+                    headerBold: true
+                    headerSize: 18
+                    header: qsTr("About")
+                }
+            }
         }
         SettingsDeveloper {
             id: about_developer
-            showHeader: about_settings.showHeader
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    aboutSwipe.decrementCurrentIndex()
-                }
-            }
+            onboarding: root.onboarding
+            onBack: aboutSwipe.decrementCurrentIndex()
         }
     }
 }
+
+
diff --git a/src/qml/pages/settings/SettingsConnection.qml b/src/qml/pages/settings/SettingsConnection.qml
@@ -9,16 +9,12 @@ import "../../controls"
 import "../../components"
 
 Item {
-    property alias navRightDetail: connectionSwipe.navRightDetail
-    property alias navMiddleDetail: connectionSwipe.navMiddleDetail
-    property alias navLeftDetail: connectionSwipe.navLeftDetail
-    property alias showHeader: connectionSwipe.showHeader
+    id: root
+    signal back
+    property bool onboarding: false
     SwipeView {
         id: connectionSwipe
-        property alias navRightDetail: connection_settings.navRightDetail
-        property alias navMiddleDetail: connection_settings.navMiddleDetail
-        property alias navLeftDetail: connection_settings.navLeftDetail
-        property alias showHeader: connection_settings.showHeader
+        property bool onboarding: false
         anchors.fill: parent
         interactive: false
         orientation: Qt.Horizontal
@@ -28,12 +24,59 @@ Item {
             clip: true
             bannerActive: false
             bold: true
+            showHeader: root.onboarding
             headerText: qsTr("Connection settings")
             headerMargin: 0
             detailActive: true
             detailItem: ConnectionSettings {
                 onNext: connectionSwipe.incrementCurrentIndex()
             }
+
+            states: [
+                State {
+                    when: root.onboarding
+                    PropertyChanges {
+                        target: connection_settings
+                        navLeftDetail: null
+                        navMiddleDetail: null
+                        navRightDetail: doneButton
+                    }
+                },
+                State {
+                    when: !root.onboarding
+                    PropertyChanges {
+                        target: connection_settings
+                        navLeftDetail: backButton
+                        navMiddleDetail: header
+                        navRightDetail: null
+                    }
+                }
+            ]
+
+            Component {
+                id: backButton
+                NavButton {
+                    iconSource: "image://images/caret-left"
+                    text: qsTr("Back")
+                    onClicked: root.back()
+                }
+            }
+            Component {
+                id: header
+                Header {
+                    headerBold: true
+                    headerSize: 18
+                    header: qsTr("Connection settings")
+                }
+            }
+
+            Component {
+                id: doneButton
+                NavButton {
+                    text: qsTr("Done")
+                    onClicked: root.back()
+                }
+            }
         }
         SettingsProxy {
             onBackClicked: {
diff --git a/src/qml/pages/settings/SettingsDeveloper.qml b/src/qml/pages/settings/SettingsDeveloper.qml
@@ -9,10 +9,46 @@ import "../../controls"
 import "../../components"
 
 InformationPage {
+    id: root
+    property bool onboarding: false
+    navLeftDetail: NavButton {
+        iconSource: "image://images/caret-left"
+        text: qsTr("Back")
+        onClicked: {
+            root.back()
+        }
+    }
     bannerActive: false
     bold: true
+    showHeader: root.onboarding
     headerText: qsTr("Developer options")
     headerMargin: 0
     detailActive: true
     detailItem: DeveloperOptions {}
+
+    states: [
+        State {
+            when: root.onboarding
+            PropertyChanges {
+                target: root
+                navMiddleDetail: null
+            }
+        },
+        State {
+            when: !root.onboarding
+            PropertyChanges {
+                target: root
+                navMiddleDetail: header
+            }
+        }
+    ]
+
+    Component {
+        id: header
+        Header {
+            headerBold: true
+            headerSize: 18
+            header: qsTr("Developer settings")
+        }
+    }
 }
diff --git a/src/qml/pages/settings/SettingsStorage.qml b/src/qml/pages/settings/SettingsStorage.qml

Original file line number	Diff line number	Diff line change
`@@ -53,12 +53,8 @@ Page {`
`53`	`53`	`onNext: root.next()`
`54`	`54`	`}`
`55`	`55`	`SettingsConnection {`
`56`		`- navRightDetail: NavButton {`
`57`		`- text: qsTr("Done")`
`58`		`- onClicked: {`
`59`		`- connections.decrementCurrentIndex()`
`60`		`- }`
`61`		`- }`
	`56`	`+ onboarding: true`
	`57`	`+ onBack: connections.decrementCurrentIndex()`
`62`	`58`	`}`
`63`	`59`	`}`
`64`	`60`	`}`
Original file line number	Diff line number	Diff line change
`@@ -53,13 +53,8 @@ Page {`
`53`	`53`	`onNext: root.next()`
`54`	`54`	`}`
`55`	`55`	`SettingsAbout {`
`56`		`- navLeftDetail: NavButton {`
`57`		`- iconSource: "image://images/caret-left"`
`58`		`- text: qsTr("Back")`
`59`		`- onClicked: {`
`60`		`- introductions.decrementCurrentIndex()`
`61`		`- }`
`62`		`- }`
	`56`	`+ onboarding: true`
	`57`	`+ onBack: introductions.decrementCurrentIndex()`
`63`	`58`	`}`
`64`	`59`	`}`
`65`	`60`	`}`
Original file line number	Diff line number	Diff line change
`@@ -54,12 +54,8 @@ Page {`
`54`	`54`	`}`
`55`	`55`	`SettingsStorage {`
`56`	`56`	`id: advancedStorage`
`57`		`- navRightDetail: NavButton {`
`58`		`- text: qsTr("Done")`
`59`		`- onClicked: {`
`60`		`- storages.decrementCurrentIndex()`
`61`		`- }`
`62`		`- }`
	`57`	`+ onboarding: true`
	`58`	`+ onBack: storages.decrementCurrentIndex()`
`63`	`59`	`}`
`64`	`60`	`}`
`65`	`61`	`}`