Merge #290: Make entire peers page scrollable

478d59a qml: add page title to peers page & update description (jarolrod)
1bdd8cf qml: make entire peers page scrollable (jarolrod)

Pull request description:

  Makes the entire peers page scrollable by moving in the top elements of the page into the header property of the ListView itself.

  | master | pr |
  | ------ | -- |
  | <img width="708" alt="Screen Shot 2023-03-15 at 3 45 03 AM" src="https://user-images.githubusercontent.com/23396902/225241131-239b3189-c9cc-4a32-afb4-c80e48b0be8d.png"> |<img width="752" alt="Screen Shot 2023-04-17 at 9 26 57 PM" src="https://user-images.githubusercontent.com/23396902/232649633-dfc3a34b-61bc-4c00-8984-a33af71228e5.png"> |

  [![Windows](https://img.shields.io/badge/OS-Windows-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/unsecure_win_gui.zip?branch=pull/290)
  [![Intel macOS](https://img.shields.io/badge/OS-Intel%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/unsecure_mac_gui.zip?branch=pull/290)
  [![Apple Silicon macOS](https://img.shields.io/badge/OS-Apple%20Silicon%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos_arm64/unsecure_mac_arm64_gui.zip?branch=pull/290)
  [![ARM64 Android](https://img.shields.io/badge/OS-Android-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/unsecure_android_apk.zip?branch=pull/290)
  [![ARM32 Android](https://img.shields.io/badge/OS-Android%2032bit-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android32/unsecure_android_32bit_apk.zip?branch=pull/290)

ACKs for top commit:
  johnny9:
    ACK 478d59a
  GBKS:
    ACK 478d59a

Tree-SHA512: e1f0224b9bdbc2f5a46ba7df349d08595d6bb5c496da3a04d636c38b3609a8dfb9c967a0e50cc62f15c515eec8a099ad6029800e0c7268fb5787d627b30bdb77

Author: hebasto

src/qml/pages/node/NodeSettings.qml

@@ -182,6 +182,11 @@ Item {
                     peerTableModel.stopAutoRefresh();
                 }
             }
+            navMiddleDetail: Header {
+                headerBold: true
+                headerSize: 18
+                header: qsTr("Peers")
+            }
         }
     }
     Component {

src/qml/pages/node/Peers.qml

@@ -11,92 +11,92 @@ import "../../components"
 Page {
     background: null
     property alias navLeftDetail: navbar.leftDetail
+    property alias navMiddleDetail: navbar.middleDetail
 
     header: NavigationBar {
         id: navbar
     }
 
-    CoreText {
-        anchors.top: parent.top
-        anchors.horizontalCenter: parent.horizontalCenter
-        id: description
-        width: Math.min(parent.width - 40, 450)
-        text: qsTr("Peers are nodes you are connected to. You want to ensure that you are connected" +
-            " to x, y and z, but not a, b, and c. Learn more.")
-        font.pixelSize: 13
-        color: Theme.color.neutral7
-    }
-
-    Flickable {
-        id: sortSelection
-        anchors.top: description.bottom
-        anchors.topMargin: 20
-        anchors.horizontalCenter: parent.horizontalCenter
-        width: Math.min(parent.width - 40, toggleButtons.width)
-        height: toggleButtons.height
-        contentWidth: toggleButtons.width
-        boundsMovement: width == toggleButtons.width ?
-            Flickable.StopAtBounds : Flickable.FollowBoundsBehavior
-        RowLayout {
-            id: toggleButtons
-            spacing: 10
-            ToggleButton {
-                text: qsTr("ID")
-                autoExclusive: true
-                checked: true
-                onClicked: {
-                    peerListModelProxy.sortBy = "nodeId"
-                }
-            }
-            ToggleButton {
-                text: qsTr("Direction")
-                autoExclusive: true
-                onClicked: {
-                    peerListModelProxy.sortBy = "direction"
-                }
-            }
-            ToggleButton {
-                text: qsTr("User Agent")
-                autoExclusive: true
-                onClicked: {
-                    peerListModelProxy.sortBy = "subversion"
-                }
-            }
-            ToggleButton {
-                text: qsTr("Type")
-                autoExclusive: true
-                onClicked: {
-                    peerListModelProxy.sortBy = "connectionType"
-                }
-            }
-            ToggleButton {
-                text: qsTr("Ip")
-                autoExclusive: true
-                onClicked: {
-                    peerListModelProxy.sortBy = "address"
-                }
-            }
-            ToggleButton {
-                text: qsTr("Network")
-                autoExclusive: true
-                onClicked: {
-                    peerListModelProxy.sortBy = "network"
-                }
-            }
-        }
-    }
-
     ListView {
         id: listView
         clip: true
         width: Math.min(parent.width - 40, 450)
-        anchors.top: sortSelection.bottom
-        anchors.topMargin: 30
-        anchors.bottom: parent.bottom
+        height: parent.height
         anchors.horizontalCenter: parent.horizontalCenter
         model: peerListModelProxy
         spacing: 15
 
+        header: ColumnLayout {
+            spacing: 20
+            width: parent.width
+            CoreText {
+                id: description
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignHCenter
+                text: qsTr("Peers are nodes you exchange data with.")
+                font.pixelSize: 13
+                color: Theme.color.neutral7
+            }
+
+            Flickable {
+                id: sortSelection
+                Layout.fillWidth: true
+                Layout.bottomMargin: 30
+                Layout.alignment: Qt.AlignHCenter
+                height: toggleButtons.height
+                contentWidth: toggleButtons.width
+                boundsMovement: width == toggleButtons.width ?
+                    Flickable.StopAtBound : Flickable.FollowBoundsBehavior
+                RowLayout {
+                    id: toggleButtons
+                    spacing: 10
+                    ToggleButton {
+                        text: qsTr("ID")
+                        autoExclusive: true
+                        checked: true
+                        onClicked: {
+                            peerListModelProxy.sortBy = "nodeId"
+                        }
+                    }
+                    ToggleButton {
+                        text: qsTr("Direction")
+                        autoExclusive: true
+                        onClicked: {
+                            peerListModelProxy.sortBy = "direction"
+                        }
+                    }
+                    ToggleButton {
+                        text: qsTr("User Agent")
+                        autoExclusive: true
+                        onClicked: {
+                            peerListModelProxy.sortBy = "subversion"
+                        }
+                    }
+                    ToggleButton {
+                        text: qsTr("Type")
+                        autoExclusive: true
+                        onClicked: {
+                            peerListModelProxy.sortBy = "connectionType"
+                        }
+                    }
+                    ToggleButton {
+                        text: qsTr("Ip")
+                        autoExclusive: true
+                        onClicked: {
+                            peerListModelProxy.sortBy = "address"
+                        }
+                    }
+                    ToggleButton {
+                        text: qsTr("Network")
+                        autoExclusive: true
+                        onClicked: {
+                            peerListModelProxy.sortBy = "network"
+                        }
+                    }
+                }
+            }
+        }
+
         footer: Loader {
             height: 75
             active: nodeModel.numOutboundPeers < nodeModel.maxNumOutboundPeers