qml: introduce Display Settings page

Author: jarolrod

src/Makefile.qt.include

@@ -393,6 +393,7 @@ QML_RES_QML = \
   qml/pages/settings/SettingsBlockClockDisplayMode.qml \
   qml/pages/settings/SettingsConnection.qml \
   qml/pages/settings/SettingsDeveloper.qml \
+  qml/pages/settings/SettingsDisplay.qml \
   qml/pages/settings/SettingsProxy.qml \
   qml/pages/settings/SettingsStorage.qml \
   qml/pages/settings/SettingsTheme.qml

src/qml/bitcoin_qml.qrc

@@ -54,6 +54,7 @@
         <file>pages/settings/SettingsBlockClockDisplayMode.qml</file>
         <file>pages/settings/SettingsConnection.qml</file>
         <file>pages/settings/SettingsDeveloper.qml</file>
+        <file>pages/settings/SettingsDisplay.qml</file>
         <file>pages/settings/SettingsProxy.qml</file>
         <file>pages/settings/SettingsStorage.qml</file>
         <file>pages/settings/SettingsTheme.qml</file>

src/qml/controls/Theme.qml

@@ -12,6 +12,7 @@ Control {
 
     Settings {
         id: settings
+        property alias dark: root.dark
         property alias blockclocksize: root.blockclocksize
     }
 

src/qml/pages/node/NodeSettings.qml

@@ -38,23 +38,26 @@ Item {
                 width: Math.min(parent.width, 450)
                 anchors.horizontalCenter: parent.horizontalCenter
                 Setting {
+                    id: gotoAbout
                     Layout.fillWidth: true
-                    header: qsTr("Dark Mode")
-                    actionItem: OptionSwitch {
-                        checked: Theme.dark
-                        onToggled: Theme.toggleDark()
+                    header: qsTr("About")
+                    actionItem: CaretRightButton {
+                        stateColor: gotoAbout.stateColor
+                        onClicked: {
+                            nodeSettingsView.push(about_page)
+                        }
                     }
-                    onClicked: loadedItem.toggled()
+                    onClicked: loadedItem.clicked()
                 }
                 Separator { Layout.fillWidth: true }
                 Setting {
-                    id: gotoAbout
+                    id: gotoDisplay
                     Layout.fillWidth: true
-                    header: qsTr("About")
+                    header: qsTr("Display")
                     actionItem: CaretRightButton {
-                        stateColor: gotoAbout.stateColor
+                        stateColor: gotoDisplay.stateColor
                         onClicked: {
-                            nodeSettingsView.push(about_page)
+                            nodeSettingsView.push(display_page)
                         }
                     }
                     onClicked: loadedItem.clicked()
@@ -127,6 +130,18 @@ Item {
             }
         }
     }
+    Component {
+        id: display_page
+        SettingsDisplay {
+            navLeftDetail: NavButton {
+                iconSource: "image://images/caret-left"
+                text: qsTr("Back")
+                onClicked: {
+                    nodeSettingsView.pop()
+                }
+            }
+        }
+    }
     Component {
         id: storage_page
         SettingsStorage {

src/qml/pages/settings/SettingsDisplay.qml

@@ -0,0 +1,98 @@
+// 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
+import "../../controls"
+import "../../components"
+
+Item {
+    property alias navLeftDetail: displaySettingsView.navLeftDetail
+    StackView {
+        id: displaySettingsView
+        property alias navLeftDetail: displaySettings.navLeftDetail
+        property bool newcompilebool: false
+        anchors.fill: parent
+
+
+        initialItem: Page {
+            id: displaySettings
+            property alias navLeftDetail: navbar.leftDetail
+            background: null
+            implicitWidth: 450
+            leftPadding: 20
+            rightPadding: 20
+            topPadding: 30
+
+            header: NavigationBar {
+                id: navbar
+            }
+            ColumnLayout {
+                spacing: 4
+                width: Math.min(parent.width, 450)
+                anchors.horizontalCenter: parent.horizontalCenter
+                Setting {
+                    id: gotoTheme
+                    Layout.fillWidth: true
+                    header: qsTr("Theme")
+                    actionItem: CaretRightButton {
+                        stateColor: gotoTheme.stateColor
+                        onClicked: {
+                            nodeSettingsView.push(theme_page)
+                        }
+                    }
+                    onClicked: loadedItem.clicked()
+                }
+                Separator { Layout.fillWidth: true }
+                Setting {
+                    id: gotoBlockClockSize
+                    Layout.fillWidth: true
+                    header: qsTr("Block clock display mode")
+                    actionItem: CaretRightButton {
+                        stateColor: gotoBlockClockSize.stateColor
+                        onClicked: {
+                            nodeSettingsView.push(blockclocksize_page)
+                        }
+                    }
+                    onClicked: loadedItem.clicked()
+                }
+            }
+        }
+    }
+    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")
+            }
+        }
+    }
+    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")
+            }
+        }
+    }
+}