Merge #358: NavigationBar2 control

b5b73b0 qml: use NavigationBar2 in SettingsBlockClockDisplayMode (João Barbosa)
a8cbe34 qml: use NavigationBar2 in SettingsDisplay (João Barbosa)
06ac24e qml: use NavigationBar2 in NodeSettings (João Barbosa)
3881dbc qml: use NavigationBar2 in SettingsProxy (João Barbosa)
e0376f8 qml: use NavigationBar2 in SettingsTheme (João Barbosa)
d3e3c0c qml: use NavigationBar2 in NodeRunner (João Barbosa)
416c994 qml: use NavigationBar2 in Peers (João Barbosa)
3505b2c qml: add NavigationBar2 (João Barbosa)

Pull request description:

  This is an alternative to the existing `NavigationBar` component. The layout is such that the center section is horizontally centered when possible, and the right section is right aligned. Also, `Loader`s are avoided with this new approach.

  Since the approach is quite different from the other navigation bar, a full refactor would be substantial, harder to test and subject to breaking changes. For that reason, both implementations will be available for a short period of time. More pull requests will follow to replace the old implementation once this is accepted.

  Finally, the new navigation bar is used on the `Peers`, `NodeRunner`, and `ThemeSettings` pages.

ACKs for top commit:
  jarolrod:
    tACK b5b73b0

Tree-SHA512: 91c072b715a4d6eafc520bee6ed1e820efc3c91541b3c7f56dab7617a13d1fd934d46ab11350e187aa22f8e29ce5e18eb4382b4b2784b1b3cdb7d79060866e21

src/Makefile.qt.include

@@ -367,6 +367,7 @@ QML_RES_QML = \
   qml/controls/NavButton.qml \
   qml/controls/PageIndicator.qml \
   qml/controls/NavigationBar.qml \
+  qml/controls/NavigationBar2.qml \
   qml/controls/OptionButton.qml \
   qml/controls/OptionSwitch.qml \
   qml/controls/OutlineButton.qml \

src/qml/bitcoin_qml.qrc

@@ -28,6 +28,7 @@
         <file>controls/NavButton.qml</file>
         <file>controls/PageIndicator.qml</file>
         <file>controls/NavigationBar.qml</file>
+        <file>controls/NavigationBar2.qml</file>
         <file>controls/OptionButton.qml</file>
         <file>controls/OptionSwitch.qml</file>
         <file>controls/OutlineButton.qml</file>

src/qml/controls/NavigationBar2.qml

@@ -0,0 +1,64 @@
+// Copyright (c) 2023 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
+import QtQuick.Layouts 1.15
+
+Pane {
+    property alias leftItem: left_section.contentItem
+    property alias centerItem: center_section.contentItem
+    property alias rightItem: right_section.contentItem
+
+    background: null
+    padding: 4
+    contentItem: RowLayout {
+        Div {
+            id: left_div
+            Layout.preferredWidth: Math.floor(Math.max(left_div.implicitWidth, right_div.implicitWidth))
+            contentItem: RowLayout {
+                Section {
+                    id: left_section
+                }
+                Spacer {
+                }
+            }
+        }
+        Section {
+            id: center_section
+        }
+        Div {
+            id: right_div
+            Layout.preferredWidth: Math.floor(Math.max(left_div.implicitWidth, right_div.implicitWidth))
+            contentItem: RowLayout {
+                Spacer {
+                }
+                Section {
+                    id: right_section
+                }
+            }
+        }
+    }
+
+    component Div: Pane {
+        Layout.alignment: Qt.AlignCenter
+        Layout.fillWidth: true
+        Layout.minimumWidth: implicitWidth
+        background: null
+        padding: 0
+    }
+
+    component Section: Pane {
+        Layout.alignment: Qt.AlignCenter
+        Layout.minimumWidth: implicitWidth
+        background: null
+        padding: 0
+    }
+
+    component Spacer: Item {
+        Layout.alignment: Qt.AlignCenter
+        Layout.fillWidth: true
+        height: 1
+    }
+}

src/qml/pages/main.qml

@@ -82,22 +82,13 @@ ApplicationWindow {
             interactive: false
             orientation: Qt.Vertical
             NodeRunner {
-                navRightDetail: NavButton {
-                    iconSource: "image://images/gear"
-                    iconHeight: 24
-                    iconWidth: 24
-                    onClicked: node_swipe.incrementCurrentIndex()
+                onSettingsClicked: {
+                    node_swipe.incrementCurrentIndex()
                 }
             }
             NodeSettings {
-                navMiddleDetail: Header {
-                    headerBold: true
-                    headerSize: 18
-                    header: "Settings"
-                }
-                navRightDetail: NavButton {
-                    text: qsTr("Done")
-                    onClicked: node_swipe.decrementCurrentIndex()
+                onDoneClicked: {
+                    node_swipe.decrementCurrentIndex()
                 }
             }
         }

src/qml/pages/node/NodeRunner.qml

@@ -9,11 +9,17 @@ import "../../controls"
 import "../../components"
 
 Page {
+    signal settingsClicked
+    id: root
     background: null
     clip: true
-    property alias navRightDetail: navbar.rightDetail
-    header: NavigationBar {
-        id: navbar
+    header: NavigationBar2 {
+        rightItem: NavButton {
+            iconSource: "image://images/gear"
+            iconHeight: 24
+            iconWidth: 24
+            onClicked: root.settingsClicked()
+        }
     }
 
     Component.onCompleted: nodeModel.startNodeInitializionThread();

src/qml/pages/node/NodeSettings.qml

@@ -10,28 +10,32 @@ import "../../components"
 import "../settings"
 
 Item {
-    id: nodeSettings
-    property alias navMiddleDetail: nodeSettingsView.navMiddleDetail
-    property alias navRightDetail: nodeSettingsView.navRightDetail
+    signal doneClicked
+
+    id: root
 
     StackView {
         id: nodeSettingsView
-        property alias navMiddleDetail: node_settings.navMiddleDetail
-        property alias navRightDetail: node_settings.navRightDetail
         anchors.fill: parent
 
         initialItem: Page {
             id: node_settings
-            property alias navMiddleDetail: navbar.middleDetail
-            property alias navRightDetail: navbar.rightDetail
             background: null
             implicitWidth: 450
             leftPadding: 20
             rightPadding: 20
             topPadding: 30
 
-            header: NavigationBar {
-                id: navbar
+            header: NavigationBar2 {
+                centerItem: Header {
+                    headerBold: true
+                    headerSize: 18
+                    header: "Settings"
+                }
+                rightItem: NavButton {
+                    text: qsTr("Done")
+                    onClicked: root.doneClicked()
+                }
             }
             ColumnLayout {
                 spacing: 4
@@ -138,17 +142,8 @@ Item {
     Component {
         id: display_page
         SettingsDisplay {
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    nodeSettingsView.pop()
-                }
-            }
-            navMiddleDetail: Header {
-                headerBold: true
-                headerSize: 18
-                header: qsTr("Display settings")
+            onBackClicked: {
+                nodeSettingsView.pop()
             }
         }
     }
@@ -191,18 +186,9 @@ Item {
     Component {
         id: peers_page
         Peers {
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    nodeSettingsView.pop()
-                    peerTableModel.stopAutoRefresh();
-                }
-            }
-            navMiddleDetail: Header {
-                headerBold: true
-                headerSize: 18
-                header: qsTr("Peers")
+            onBackClicked: {
+                nodeSettingsView.pop()
+                peerTableModel.stopAutoRefresh();
             }
         }
     }

src/qml/pages/node/Peers.qml

@@ -9,12 +9,22 @@ import "../../controls"
 import "../../components"
 
 Page {
+    signal backClicked
+
+    id: root
     background: null
-    property alias navLeftDetail: navbar.leftDetail
-    property alias navMiddleDetail: navbar.middleDetail
 
-    header: NavigationBar {
-        id: navbar
+    header: NavigationBar2 {
+        leftItem: NavButton {
+            iconSource: "image://images/caret-left"
+            text: qsTr("Back")
+            onClicked: root.backClicked()
+        }
+        centerItem: Header {
+            headerBold: true
+            headerSize: 18
+            header: qsTr("Peers")
+        }
     }
 
     ListView {

src/qml/pages/settings/SettingsBlockClockDisplayMode.qml

@@ -9,17 +9,26 @@ import "../../controls"
 import "../../components"
 
 Page {
-    property alias navLeftDetail: navbar.leftDetail
-    property alias navMiddleDetail: navbar.middleDetail
+    signal backClicked
 
+    id: root
     background: null
     implicitWidth: 450
     leftPadding: 20
     rightPadding: 20
     topPadding: 30
 
-    header: NavigationBar {
-        id: navbar
+    header: NavigationBar2 {
+        leftItem: NavButton {
+            iconSource: "image://images/caret-left"
+            text: qsTr("Back")
+            onClicked: root.backClicked()
+        }
+        centerItem: Header {
+            headerBold: true
+            headerSize: 18
+            header: qsTr("Block clock display mode")
+        }
     }
     BlockClockDisplayMode {
         width: Math.min(parent.width, 450)

src/qml/pages/settings/SettingsConnection.qml

@@ -34,17 +34,8 @@ Item {
             detailItem: ConnectionSettings {}
         }
         SettingsProxy {
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    connectionSwipe.decrementCurrentIndex()
-                }
-            }
-            navMiddleDetail: Header {
-                headerBold: true
-                headerSize: 18
-                header: qsTr("Proxy Settings")
+            onBackClicked: {
+                connectionSwipe.decrementCurrentIndex()
             }
         }
     }

src/qml/pages/settings/SettingsDisplay.qml

@@ -9,28 +9,33 @@ import "../../controls"
 import "../../components"
 
 Item {
-    property alias navLeftDetail: displaySettingsView.navLeftDetail
-    property alias navMiddleDetail: displaySettingsView.navMiddleDetail
+    signal backClicked
+
+    id: root
+
     StackView {
         id: displaySettingsView
-        property alias navLeftDetail: displaySettings.navLeftDetail
-        property alias navMiddleDetail: displaySettings.navMiddleDetail
-        property bool newcompilebool: false
         anchors.fill: parent
 
-
         initialItem: Page {
             id: displaySettings
-            property alias navLeftDetail: navbar.leftDetail
-            property alias navMiddleDetail: navbar.middleDetail
             background: null
             implicitWidth: 450
             leftPadding: 20
             rightPadding: 20
             topPadding: 30
 
-            header: NavigationBar {
-                id: navbar
+            header: NavigationBar2 {
+                leftItem: NavButton {
+                    iconSource: "image://images/caret-left"
+                    text: qsTr("Back")
+                    onClicked: root.backClicked()
+                }
+                centerItem: Header {
+                    headerBold: true
+                    headerSize: 18
+                    header: qsTr("Display settings")
+                }
             }
             ColumnLayout {
                 spacing: 4
@@ -65,34 +70,16 @@ Item {
     Component {
         id: theme_page
         SettingsTheme {
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    nodeSettingsView.pop()
-                }
-            }
-            navMiddleDetail: Header {
-                headerBold: true
-                headerSize: 18
-                header: qsTr("Theme")
+            onBackClicked: {
+                nodeSettingsView.pop()
             }
         }
     }
     Component {
         id: blockclocksize_page
         SettingsBlockClockDisplayMode {
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    nodeSettingsView.pop()
-                }
-            }
-            navMiddleDetail: Header {
-                headerBold: true
-                headerSize: 18
-                header: qsTr("Block clock display mode")
+            onBackClicked: {
+                nodeSettingsView.pop()
             }
         }
     }