Merge #203: Introducing the node settings views

6037471 qml: use node specific pages, introduce node settings (jarolrod)
6ac40e8 qml: entangle the About and Developer options pages (jarolrod)

Pull request description:

  This introduces the views that would allow for [settings configuration](https://www.figma.com/file/GaCoOSNHB2yMB9ThiDtred/Bitcoin-Core-App?node-id=4588%3A101966&t=m6V59cZ2STeCRp1y-0) after the user has finished onboarding and the node has started to run.

  | NodeRuner | NodeSettings |
  | --------- | ------------ |
  | <img width="752" alt="Screen Shot 2022-12-10 at 12 58 07 AM" src="https://user-images.githubusercontent.com/23396902/206832668-0a5e469a-830f-4d7e-bfc5-0e6c115d74fd.png"> | <img width="752" alt="Screen Shot 2022-12-10 at 12 58 12 AM" src="https://user-images.githubusercontent.com/23396902/206832715-299234d4-6850-4dd3-956f-fd5bc47980c7.png"> |

  For several reasons this also entangles the About and Developer options and entangles them into their own independent SwipeView, which means that we only need to instantiate SettingsAbout. There isn't a use case for the Developer options to be shown independently.

  ### Follow-ups:
  - The caret-right icon used within the settings rows is too large because I'm just using NavButton, the width and height should be adjusted to match closer to what the design file [specifies](https://www.figma.com/file/GaCoOSNHB2yMB9ThiDtred/Bitcoin-Core-App?node-id=4588%3A101966&t=m6V59cZ2STeCRp1y-0)
  - This uses a StackView to move through the settings pages but on linux, the animation between pages isn't how we'd want it to be; it's fine on macOS. The animation should match our SwipeViews. Note: I didn't use SwipeView because while you can set an index to go to, it flips through all previous pages to get there which is visually distracting.

  [![Windows](https://img.shields.io/badge/OS-Windows-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/insecure_win_gui.zip?branch=pull/203)
  [![Intel macOS](https://img.shields.io/badge/OS-Intel%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/insecure_mac_gui.zip?branch=pull/203)
  [![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/insecure_mac_arm64_gui.zip?branch=pull/203)
  [![ARM64 Android](https://img.shields.io/badge/OS-Android-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/insecure_android_apk.zip?branch=pull/203)

ACKs for top commit:
  johnny9:
    ACK 6037471

Tree-SHA512: 0dbf22abccded6786a9970b01ee4a7b70b25c03e29334a145ae6d261fe425343cc7ec60836e6fee565a2d40550d2749766c63ac0af285d92dad2c8d1a4bc1836

Author: hebasto

src/Makefile.qt.include

@@ -344,6 +344,8 @@ QML_RES_QML = \
   qml/controls/ValueInput.qml \
   qml/pages/initerrormessage.qml \
   qml/pages/main.qml \
+  qml/pages/node/NodeRunner.qml \
+  qml/pages/node/NodeSettings.qml \
   qml/pages/onboarding/OnboardingBlockclock.qml \
   qml/pages/onboarding/OnboardingConnection.qml \
   qml/pages/onboarding/OnboardingCover.qml \

src/qml/bitcoin_qml.qrc

@@ -26,6 +26,8 @@
         <file>controls/ValueInput.qml</file>
         <file>pages/initerrormessage.qml</file>
         <file>pages/main.qml</file>
+        <file>pages/node/NodeRunner.qml</file>
+        <file>pages/node/NodeSettings.qml</file>
         <file>pages/onboarding/OnboardingBlockclock.qml</file>
         <file>pages/onboarding/OnboardingConnection.qml</file>
         <file>pages/onboarding/OnboardingCover.qml</file>

src/qml/components/AboutOptions.qml

@@ -56,7 +56,7 @@ ColumnLayout {
             icon.width: 18
             background: null
             onClicked: {
-                introductions.incrementCurrentIndex()
+                aboutSwipe.incrementCurrentIndex()
             }
         }
     }

src/qml/pages/main.qml

@@ -8,6 +8,7 @@ import QtQuick.Layouts 1.15
 import "../components"
 import "../controls"
 import "./onboarding"
+import "./node"
 
 ApplicationWindow {
     id: appWindow
@@ -44,30 +45,29 @@ ApplicationWindow {
 
     Component {
         id: node
-        Page {
+        SwipeView {
+            id: node_swipe
             anchors.fill: parent
-            background: null
-            ColumnLayout {
-                width: 600
-                spacing: 0
-                anchors.centerIn: parent
-                Component.onCompleted: nodeModel.startNodeInitializionThread();
-                Image {
-                    Layout.alignment: Qt.AlignCenter
-                    source: "image://images/app"
-                    sourceSize.width: 64
-                    sourceSize.height: 64
+            interactive: false
+            orientation: Qt.Vertical
+            NodeRunner {
+                navRightDetail: NavButton {
+                    iconSource: "image://images/gear"
+                    iconHeight: 24
+                    onClicked: node_swipe.incrementCurrentIndex()
                 }
-                BlockCounter {
-                    Layout.alignment: Qt.AlignCenter
-                    blockHeight: nodeModel.blockTipHeight
+            }
+            NodeSettings {
+                navMiddleDetail: Header {
+                    bold: true
+                    headerSize: 18
+                    header: "Settings"
                 }
-                ProgressIndicator {
-                    width: 200
-                    Layout.alignment: Qt.AlignCenter
-                    progress: nodeModel.verificationProgress
+                navRightDetail: NavButton {
+                    text: qsTr("Done")
+                    onClicked: node_swipe.decrementCurrentIndex()
                 }
             }
-         }
+        }
     }
 }

src/qml/pages/node/NodeRunner.qml

@@ -0,0 +1,43 @@
+// Copyright (c) 2022 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
+import "../../controls"
+import "../../components"
+
+Page {
+    background: null
+    clip: true
+    property alias navRightDetail: navbar.rightDetail
+    header: NavigationBar {
+        id: navbar
+    }
+    ColumnLayout {
+        spacing: 0
+        anchors.fill: parent
+        ColumnLayout {
+            width: 600
+            spacing: 0
+            anchors.centerIn: parent
+            Component.onCompleted: nodeModel.startNodeInitializionThread();
+            Image {
+                Layout.alignment: Qt.AlignCenter
+                source: "image://images/app"
+                sourceSize.width: 64
+                sourceSize.height: 64
+            }
+            BlockCounter {
+                Layout.alignment: Qt.AlignCenter
+                blockHeight: nodeModel.blockTipHeight
+            }
+            ProgressIndicator {
+                width: 200
+                Layout.alignment: Qt.AlignCenter
+                progress: nodeModel.verificationProgress
+            }
+        }
+    }
+}

src/qml/pages/node/NodeSettings.qml

@@ -0,0 +1,120 @@
+// Copyright (c) 2022 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
+import "../../controls"
+import "../../components"
+import "../settings"
+
+Item {
+    id: nodeSettings
+    property alias navMiddleDetail: nodeSettingsView.navMiddleDetail
+    property alias navRightDetail: nodeSettingsView.navRightDetail
+    StackView {
+        id: nodeSettingsView
+        property alias navMiddleDetail: node_settings.navMiddleDetail
+        property alias navRightDetail: node_settings.navRightDetail
+        initialItem: Page {
+            id: node_settings
+            property alias navMiddleDetail: navbar.middleDetail
+            property alias navRightDetail: navbar.rightDetail
+            background: null
+            header: NavigationBar {
+                id: navbar
+            }
+            ColumnLayout {
+                spacing: 0
+                width: parent.width
+                ColumnLayout {
+                    spacing: 20
+                    Layout.maximumWidth: 450
+                    Layout.topMargin: 30
+                    Layout.leftMargin: 20
+                    Layout.rightMargin: 20
+                    Layout.alignment: Qt.AlignCenter
+                    Setting {
+                        Layout.fillWidth: true
+                        header: qsTr("Dark Mode")
+                        actionItem: OptionSwitch {
+                            checked: Theme.dark
+                            onToggled: Theme.toggleDark()
+                        }
+                    }
+                    Setting {
+                        Layout.fillWidth: true
+                        header: qsTr("About")
+                        actionItem: NavButton {
+                            iconSource: "image://images/caret-right"
+                            background: null
+                            onClicked: {
+                                nodeSettingsView.push(about_page)
+                            }
+                        }
+                    }
+                    Setting {
+                        Layout.fillWidth: true
+                        header: qsTr("Storage")
+                        actionItem: NavButton {
+                            iconSource: "image://images/caret-right"
+                            background: null
+                            onClicked: {
+                                nodeSettingsView.push(storage_page)
+                            }
+                        }
+                    }
+                    Setting {
+                        Layout.fillWidth: true
+                        header: qsTr("Connection")
+                        actionItem: NavButton {
+                            iconSource: "image://images/caret-right"
+                            background: null
+                            onClicked: {
+                                nodeSettingsView.push(connection_page)
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        anchors.fill: parent
+    }
+    Component {
+        id: about_page
+        SettingsAbout {
+            navLeftDetail: NavButton {
+                iconSource: "image://images/caret-left"
+                text: qsTr("Back")
+                onClicked: {
+                    nodeSettingsView.pop()
+                }
+            }
+        }
+    }
+    Component {
+        id: storage_page
+        SettingsStorage {
+            navLeftDetail: NavButton {
+                iconSource: "image://images/caret-left"
+                text: qsTr("Back")
+                onClicked: {
+                    nodeSettingsView.pop()
+                }
+            }
+        }
+    }
+    Component {
+        id: connection_page
+        SettingsConnection {
+            navLeftDetail: NavButton {
+                iconSource: "image://images/caret-left"
+                text: qsTr("Back")
+                onClicked: {
+                    nodeSettingsView.pop()
+                }
+            }
+        }
+    }
+}

src/qml/pages/onboarding/OnboardingCover.qml

@@ -52,14 +52,5 @@ Page {
                 }
             }
         }
-        SettingsDeveloper {
-            navLeftDetail: NavButton {
-                iconSource: "image://images/caret-left"
-                text: qsTr("Back")
-                onClicked: {
-                    introductions.decrementCurrentIndex()
-                }
-            }
-        }
     }
 }

src/qml/pages/settings/SettingsAbout.qml

@@ -8,19 +8,40 @@ import QtQuick.Layouts 1.15
 import "../../controls"
 import "../../components"
 
-InformationPage {
-    bannerActive: false
-    bold: true
-    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.")
-    descriptionMargin: 20
-    detailActive: true
-    detailItem: ColumnLayout {
-        spacing: 0
-        AboutOptions {
-            Layout.maximumWidth: 450
-            Layout.alignment: Qt.AlignCenter
+Item {
+    property alias navLeftDetail: aboutSwipe.navLeftDetail
+    SwipeView {
+        id: aboutSwipe
+        property alias navLeftDetail: about_settings.navLeftDetail
+        anchors.fill: parent
+        interactive: false
+        orientation: Qt.Horizontal
+        InformationPage {
+            id: about_settings
+            bannerActive: false
+            bannerMargin: 0
+            bold: true
+            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.")
+            descriptionMargin: 20
+            detailActive: true
+            detailItem: ColumnLayout {
+                spacing: 0
+                AboutOptions {
+                    Layout.maximumWidth: 450
+                    Layout.alignment: Qt.AlignCenter
+                }
+            }
+        }
+        SettingsDeveloper {
+            navLeftDetail: NavButton {
+                iconSource: "image://images/caret-left"
+                text: qsTr("Back")
+                onClicked: {
+                    aboutSwipe.decrementCurrentIndex()
+                }
+            }
         }
     }
 }