Skip to content

Commit 80ee578

Browse files
hebastohebasto
committed
Merge #311: Introduce Display settings
af0ddf6 qml: introduce Display Settings page (jarolrod) dca679b qml: introduce Block Clock display mode settings page (jarolrod) 041a0c7 qml: introduce block clock display settings images (jarolrod) 3d02e0f qml: allow to load an image in an OptionButton (jarolrod) 84c9296 qml: introduce ThemeSettings page (jarolrod) 0e336d7 qml: remember blockclockdial scale factor (jarolrod) 2326f41 qml: allow to set blockclockdial scale (jarolrod) 2acc8a1 qml: set BlockClock size values as a ratio of the parent width & height (jarolrod) d7a11f2 qml: introduce new bitcoin-circle icon and in larger dimensions (jarolrod) fc9a05a qml: allow to resize PeersIndicator component (jarolrod) 4f6468e qml: allow to customize blockclockdial's pen width (jarolrod) 021829c qml: marry BlockClock and NetworkIndicator (jarolrod) Pull request description: This moves "Display" related settings into a new "Display" page. Also sets up QSettings wiring for options. | Display Settings | Theme | Block clock | | ---------------- | ----- | ----------- | | <img width="752" alt="Screen Shot 2023-05-09 at 9 48 38 PM" src="https://github.com/bitcoin-core/gui-qml/assets/23396902/5bbc0d0d-53a8-4e71-8017-c8c7651ececb"> | <img width="752" alt="Screen Shot 2023-04-23 at 2 13 16 AM" src="https://user-images.githubusercontent.com/23396902/233823212-92b4eb1b-b51b-45b7-bb58-c96c7fb08c26.png"> |<img width="752" alt="Screen Shot 2023-04-23 at 2 13 19 AM" src="https://user-images.githubusercontent.com/23396902/233823237-4aa13f17-34da-4586-80a5-f506ca8c3ae2.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/311) [![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/311) [![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/311) [![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/311) ACKs for top commit: johnny9: ACK af0ddf6 Tree-SHA512: 968aafa9b95152d6f43a3f934e0e741efc45d45c208c5c0b79b1e2088901817a69e154132cb61a578c0a07fffabc901a8f115d3587e3d298a90b91fb192c0247
2 parents 960490b + af0ddf6 commit 80ee578

22 files changed

+431
-49
lines changed

‎src/Makefile.qt.include‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -319,6 +319,8 @@ QML_RES_ICONS = \
319319
qml/res/icons/arrow-down.png \
320320
qml/res/icons/arrow-up.png \
321321
qml/res/icons/bitcoin-circle.png \
322+
qml/res/icons/blockclock-size-compact.png \
323+
qml/res/icons/blockclock-size-showcase.png \
322324
qml/res/icons/blocktime-dark.png \
323325
qml/res/icons/blocktime-light.png \
324326
qml/res/icons/caret-left.png \
@@ -339,6 +341,7 @@ QML_QRC = qml/bitcoin_qml.qrc
339341
QML_RES_QML = \
340342
qml/components/AboutOptions.qml \
341343
qml/components/BlockClock.qml \
344+
qml/components/BlockClockDisplayMode.qml \
342345
qml/components/BlockCounter.qml \
343346
qml/components/CaretRightButton.qml \
344347
qml/components/ConnectionOptions.qml \
@@ -352,6 +355,7 @@ QML_RES_QML = \
352355
qml/components/StorageLocations.qml \
353356
qml/components/StorageOptions.qml \
354357
qml/components/StorageSettings.qml \
358+
qml/components/ThemeSettings.qml \
355359
qml/components/TotalBytesIndicator.qml \
356360
qml/controls/ContinueButton.qml \
357361
qml/controls/CoreText.qml \
@@ -386,10 +390,13 @@ QML_RES_QML = \
386390
qml/pages/onboarding/OnboardingStorageLocation.qml \
387391
qml/pages/onboarding/OnboardingStrengthen.qml \
388392
qml/pages/settings/SettingsAbout.qml \
393+
qml/pages/settings/SettingsBlockClockDisplayMode.qml \
389394
qml/pages/settings/SettingsConnection.qml \
390395
qml/pages/settings/SettingsDeveloper.qml \
396+
qml/pages/settings/SettingsDisplay.qml \
391397
qml/pages/settings/SettingsProxy.qml \
392-
qml/pages/settings/SettingsStorage.qml
398+
qml/pages/settings/SettingsStorage.qml \
399+
qml/pages/settings/SettingsTheme.qml
393400

394401
BITCOIN_QT_CPP = $(BITCOIN_QT_BASE_CPP)
395402
if TARGET_WINDOWS

‎src/qml/bitcoin_qml.qrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<qresource prefix="/qml">
33
<file>components/AboutOptions.qml</file>
44
<file>components/BlockClock.qml</file>
5+
<file>components/BlockClockDisplayMode.qml</file>
56
<file>components/BlockCounter.qml</file>
67
<file>components/CaretRightButton.qml</file>
78
<file>components/ConnectionOptions.qml</file>
@@ -15,6 +16,7 @@
1516
<file>components/Separator.qml</file>
1617
<file>components/StorageOptions.qml</file>
1718
<file>components/StorageSettings.qml</file>
19+
<file>components/ThemeSettings.qml</file>
1820
<file>components/TotalBytesIndicator.qml</file>
1921
<file>controls/ContinueButton.qml</file>
2022
<file>controls/CoreText.qml</file>
@@ -49,15 +51,20 @@
4951
<file>pages/onboarding/OnboardingStorageLocation.qml</file>
5052
<file>pages/onboarding/OnboardingStrengthen.qml</file>
5153
<file>pages/settings/SettingsAbout.qml</file>
54+
<file>pages/settings/SettingsBlockClockDisplayMode.qml</file>
5255
<file>pages/settings/SettingsConnection.qml</file>
5356
<file>pages/settings/SettingsDeveloper.qml</file>
57+
<file>pages/settings/SettingsDisplay.qml</file>
5458
<file>pages/settings/SettingsProxy.qml</file>
5559
<file>pages/settings/SettingsStorage.qml</file>
60+
<file>pages/settings/SettingsTheme.qml</file>
5661
</qresource>
5762
<qresource prefix="/icons">
5863
<file alias="arrow-down">res/icons/arrow-down.png</file>
5964
<file alias="arrow-up">res/icons/arrow-up.png</file>
6065
<file alias="bitcoin-circle">res/icons/bitcoin-circle.png</file>
66+
<file alias="blockclock-size-compact">res/icons/blockclock-size-compact.png</file>
67+
<file alias="blockclock-size-showcase">res/icons/blockclock-size-showcase.png</file>
6168
<file alias="blocktime-dark">res/icons/blocktime-dark.png</file>
6269
<file alias="blocktime-light">res/icons/blocktime-light.png</file>
6370
<file alias="bitcoin">../qt/res/icons/bitcoin.png</file>

‎src/qml/components/BlockClock.qml‎

Lines changed: 36 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,19 @@
55
import QtQuick 2.15
66
import QtQuick.Controls 2.15
77
import QtQuick.Layouts 1.15
8+
import Qt.labs.settings 1.0
89

910
import org.bitcoincore.qt 1.0
1011

1112
import "../controls"
1213

1314
Item {
1415
id: root
16+
property real parentWidth: 600
17+
property real parentHeight: 600
1518

16-
implicitWidth: 200
17-
implicitHeight: 200
19+
width: dial.width
20+
height: dial.height + networkIndicator.height + networkIndicator.anchors.topMargin
1821

1922
property alias header: mainText.text
2023
property alias headerSize: mainText.font.pixelSize
@@ -26,9 +29,18 @@ Item {
2629

2730
activeFocusOnTab: true
2831

32+
Settings {
33+
id: settings
34+
property alias blockclocksize: dial.scale
35+
}
36+
2937
BlockClockDial {
3038
id: dial
31-
anchors.fill: parent
39+
anchors.horizontalCenter: root.horizontalCenter
40+
scale: Theme.blockclocksize
41+
width: Math.min((root.parentWidth * dial.scale), (root.parentHeight * dial.scale))
42+
height: dial.width
43+
penWidth: dial.width / 50
3244
timeRatioList: chainModel.timeRatioList
3345
verificationProgress: nodeModel.verificationProgress
3446
paused: root.paused
@@ -56,8 +68,8 @@ Item {
5668
background: null
5769
icon.source: "image://images/bitcoin-circle"
5870
icon.color: Theme.color.neutral9
59-
icon.width: 40
60-
icon.height: 40
71+
icon.width: Math.max(dial.width / 5, 1)
72+
icon.height: Math.max(dial.width / 5, 1)
6173
anchors.bottom: mainText.top
6274
anchors.horizontalCenter: root.horizontalCenter
6375

@@ -68,10 +80,10 @@ Item {
6880

6981
Label {
7082
id: mainText
71-
anchors.centerIn: parent
83+
anchors.centerIn: dial
7284
font.family: "Inter"
7385
font.styleName: "Semi Bold"
74-
font.pixelSize: 32
86+
font.pixelSize: dial.width * (4/25)
7587
color: Theme.color.neutral9
7688

7789
Behavior on color {
@@ -85,7 +97,7 @@ Item {
8597
anchors.horizontalCenter: root.horizontalCenter
8698
font.family: "Inter"
8799
font.styleName: "Semi Bold"
88-
font.pixelSize: 18
100+
font.pixelSize: dial.width * (9/100)
89101
color: Theme.color.neutral4
90102

91103
Behavior on color {
@@ -95,13 +107,22 @@ Item {
95107

96108
PeersIndicator {
97109
anchors.top: subText.bottom
98-
anchors.topMargin: 20
110+
anchors.topMargin: dial.width / 10
99111
anchors.horizontalCenter: root.horizontalCenter
100112
numOutboundPeers: nodeModel.numOutboundPeers
101113
maxNumOutboundPeers: nodeModel.maxNumOutboundPeers
114+
indicatorDimensions: dial.width * (3/200)
115+
indicatorSpacing: dial.width / 40
102116
paused: root.paused
103117
}
104118

119+
NetworkIndicator {
120+
id: networkIndicator
121+
anchors.top: dial.bottom
122+
anchors.topMargin: networkIndicator.visible ? 30 : 0
123+
anchors.horizontalCenter: root.horizontalCenter
124+
}
125+
105126
MouseArea {
106127
anchors.fill: dial
107128
cursorShape: Qt.PointingHandCursor
@@ -138,16 +159,16 @@ Item {
138159
PropertyChanges {
139160
target: root
140161
header: "Paused"
141-
headerSize: 24
162+
headerSize: dial.width * (3/25)
142163
subText: "Tap to resume"
143164
}
144165
PropertyChanges {
145166
target: bitcoinIcon
146-
anchors.bottomMargin: 5
167+
anchors.bottomMargin: dial.width / 40
147168
}
148169
PropertyChanges {
149170
target: subText
150-
anchors.topMargin: 4
171+
anchors.topMargin: dial.width / 50
151172
}
152173
},
153174

@@ -156,16 +177,16 @@ Item {
156177
PropertyChanges {
157178
target: root
158179
header: "Connecting"
159-
headerSize: 24
180+
headerSize: dial.width * (3/25)
160181
subText: "Please wait"
161182
}
162183
PropertyChanges {
163184
target: bitcoinIcon
164-
anchors.bottomMargin: 5
185+
anchors.bottomMargin: dial.width / 40
165186
}
166187
PropertyChanges {
167188
target: subText
168-
anchors.topMargin: 4
189+
anchors.topMargin: dial.width / 50
169190
}
170191
}
171192
]

‎src/qml/components/BlockClockDisplayMode.qml‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
// Copyright (c) 2023 The Bitcoin Core developers
2+
// Distributed under the MIT software license, see the accompanying
3+
// file COPYING or http://www.opensource.org/licenses/mit-license.php.
4+
5+
import QtQuick 2.15
6+
import QtQuick.Controls 2.15
7+
import QtQuick.Layouts 1.15
8+
import Qt.labs.settings 1.0
9+
import "../controls"
10+
11+
ColumnLayout {
12+
id: root
13+
spacing: 15
14+
15+
ButtonGroup {
16+
id: group
17+
}
18+
19+
OptionButton {
20+
Layout.fillWidth: true
21+
ButtonGroup.group: group
22+
text: qsTr("Compact")
23+
description: qsTr("For personal use on a computer or smartphone.")
24+
image: "image://images/blockclock-size-compact"
25+
checked: Theme.blockclocksize == (1/3)
26+
onClicked: {
27+
Theme.blockclocksize = (1/3)
28+
}
29+
}
30+
31+
OptionButton {
32+
Layout.fillWidth: true
33+
ButtonGroup.group: group
34+
text: qsTr("Showcase")
35+
description: qsTr("A larger block clock for public display on a tablet or other large screen.")
36+
image: "image://images/blockclock-size-showcase"
37+
checked: Theme.blockclocksize == (1/2)
38+
onClicked: {
39+
Theme.blockclocksize = (1/2)
40+
}
41+
}
42+
}

‎src/qml/components/PeersIndicator.qml‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,25 @@
33
// file COPYING or http://www.opensource.org/licenses/mit-license.php.
44

55
import QtQuick 2.15
6-
import QtQuick.Layouts 1.15
76
import "../controls"
87

9-
RowLayout {
8+
Row {
109
id: root
1110
required property int numOutboundPeers
1211
required property int maxNumOutboundPeers
1312
required property bool paused
1413
property int size: 5
14+
property real indicatorDimensions: 3
15+
property real indicatorSpacing: 5
1516

16-
spacing: 5
17+
height: root.indicatorDimensions
18+
19+
spacing: root.indicatorSpacing
1720
Repeater {
1821
model: 5
1922
Rectangle {
20-
width: 3
21-
height: 3
23+
width: root.indicatorDimensions
24+
height: root.indicatorDimensions
2225
radius: width / 2
2326
color: Theme.color.neutral9
2427
opacity: (index === 0 && root.numOutboundPeers > 0) || (index + 1 <= root.size * root.numOutboundPeers / root.maxNumOutboundPeers) ? 0.95 : 0.45

‎src/qml/components/ThemeSettings.qml‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
// Copyright (c) 2023 The Bitcoin Core developers
2+
// Distributed under the MIT software license, see the accompanying
3+
// file COPYING or http://www.opensource.org/licenses/mit-license.php.
4+
5+
import QtQuick 2.15
6+
import QtQuick.Controls 2.15
7+
import QtQuick.Layouts 1.15
8+
import Qt.labs.settings 1.0
9+
import "../controls"
10+
11+
ColumnLayout {
12+
id: root
13+
spacing: 4
14+
15+
Settings {
16+
id: settings
17+
}
18+
19+
Setting {
20+
Layout.fillWidth: true
21+
header: qsTr("Light")
22+
actionItem: Button {
23+
anchors.centerIn: parent
24+
visible: !Theme.dark
25+
icon.source: "image://images/check"
26+
icon.color: Theme.color.neutral9
27+
icon.height: 24
28+
icon.width: 24
29+
background: null
30+
31+
Behavior on icon.color {
32+
ColorAnimation { duration: 150 }
33+
}
34+
}
35+
onClicked: {
36+
Theme.dark = false
37+
}
38+
}
39+
Separator { Layout.fillWidth: true }
40+
Setting {
41+
Layout.fillWidth: true
42+
header: qsTr("Dark")
43+
actionItem: Button {
44+
anchors.centerIn: parent
45+
visible: Theme.dark
46+
icon.source: "image://images/check"
47+
icon.color: Theme.color.neutral9
48+
icon.height: 24
49+
icon.width: 24
50+
background: null
51+
52+
Behavior on icon.color {
53+
ColorAnimation { duration: 150 }
54+
}
55+
}
56+
onClicked: {
57+
Theme.dark = true;
58+
}
59+
}
60+
}

0 commit comments

Comments
 (0)