qml: use node specific pages, introduce node settings

Github-Pull: #203
Rebased-From: 6037471

Co-Authored-By: Johnny Carlson <johncarlson@pm.me>

Author: 2 people

src/qml/BitcoinApp/CMakeLists.txt

@@ -16,6 +16,8 @@ qt6_add_qml_module(bitcoin_qml
   QML_FILES
     initerrormessage.qml
     main.qml
+    NodeRunner.qml
+    NodeSettings.qml
     OnboardingBlockclock.qml
     OnboardingConnection.qml
     OnboardingCover.qml

src/qml/BitcoinApp/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
+import QtQuick.Controls
+import QtQuick.Layouts
+import BitcoinApp.Controls
+import BitcoinApp.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/BitcoinApp/NodeSettings.qml

@@ -0,0 +1,119 @@
+// 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
+import QtQuick.Controls
+import QtQuick.Layouts
+import BitcoinApp.Controls
+import BitcoinApp.Components
+
+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/BitcoinApp/main.qml

@@ -43,30 +43,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()
                 }
             }
-         }
+        }
     }
 }