qml: introduce Block Clock display mode settings page

Author: jarolrod

src/Makefile.qt.include

@@ -341,6 +341,7 @@ QML_QRC = qml/bitcoin_qml.qrc
 QML_RES_QML = \
   qml/components/AboutOptions.qml \
   qml/components/BlockClock.qml \
+  qml/components/BlockClockDisplayMode.qml \
   qml/components/BlockCounter.qml \
   qml/components/CaretRightButton.qml \
   qml/components/ConnectionOptions.qml \
@@ -389,6 +390,7 @@ QML_RES_QML = \
   qml/pages/onboarding/OnboardingStorageLocation.qml \
   qml/pages/onboarding/OnboardingStrengthen.qml \
   qml/pages/settings/SettingsAbout.qml \
+  qml/pages/settings/SettingsBlockClockDisplayMode.qml \
   qml/pages/settings/SettingsConnection.qml \
   qml/pages/settings/SettingsDeveloper.qml \
   qml/pages/settings/SettingsProxy.qml \

src/qml/bitcoin_qml.qrc

@@ -2,6 +2,7 @@
     <qresource prefix="/qml">
         <file>components/AboutOptions.qml</file>
         <file>components/BlockClock.qml</file>
+        <file>components/BlockClockDisplayMode.qml</file>
         <file>components/BlockCounter.qml</file>
         <file>components/CaretRightButton.qml</file>
         <file>components/ConnectionOptions.qml</file>
@@ -50,6 +51,7 @@
         <file>pages/onboarding/OnboardingStorageLocation.qml</file>
         <file>pages/onboarding/OnboardingStrengthen.qml</file>
         <file>pages/settings/SettingsAbout.qml</file>
+        <file>pages/settings/SettingsBlockClockDisplayMode.qml</file>
         <file>pages/settings/SettingsConnection.qml</file>
         <file>pages/settings/SettingsDeveloper.qml</file>
         <file>pages/settings/SettingsProxy.qml</file>

src/qml/components/BlockClock.qml

@@ -37,6 +37,7 @@ Item {
     BlockClockDial {
         id: dial
         anchors.horizontalCenter: root.horizontalCenter
+        scale: Theme.blockclocksize
         width: Math.min((root.parentWidth * dial.scale), (root.parentHeight * dial.scale))
         height: dial.width
         penWidth: dial.width / 50

src/qml/components/BlockClockDisplayMode.qml

@@ -0,0 +1,42 @@
+// 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 Qt.labs.settings 1.0
+import "../controls"
+
+ColumnLayout {
+    id: root
+    spacing: 15
+
+    ButtonGroup {
+        id: group
+    }
+
+    OptionButton {
+        Layout.fillWidth: true
+        ButtonGroup.group: group
+        text: qsTr("Compact")
+        description: qsTr("For personal use on a computer or smartphone.")
+        image: "image://images/blockclock-size-compact"
+        checked: Theme.blockclocksize == (1/3)
+        onClicked: {
+            Theme.blockclocksize = (1/3)
+        }
+    }
+
+    OptionButton {
+        Layout.fillWidth: true
+        ButtonGroup.group: group
+        text: qsTr("Showcase")
+        description: qsTr("A larger block clock for public display on a tablet or other large screen.")
+        image: "image://images/blockclock-size-showcase"
+        checked: Theme.blockclocksize == (1/2)
+        onClicked: {
+            Theme.blockclocksize = (1/2)
+        }
+    }
+}

src/qml/pages/settings/SettingsBlockClockDisplayMode.qml

@@ -0,0 +1,28 @@
+// 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"
+
+Page {
+    property alias navLeftDetail: navbar.leftDetail
+    property alias navMiddleDetail: navbar.middleDetail
+
+    background: null
+    implicitWidth: 450
+    leftPadding: 20
+    rightPadding: 20
+    topPadding: 30
+
+    header: NavigationBar {
+        id: navbar
+    }
+    BlockClockDisplayMode {
+        width: Math.min(parent.width, 450)
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+}