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

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.
bitcoin-core · Oct 26, 2024 · 7b5f9c1 · 7b5f9c1
1 parent a77c7f1
commit 7b5f9c1
Show file tree

Hide file tree

Showing 9 changed files with 198 additions and 100 deletions.
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")
+        }
+    }
 }