Skip to content

Commit 990071c

Browse files
committed
qml: Add UI Snapshot components
1 parent 8f86d4a commit 990071c

10 files changed

+261
-0
lines changed

src/qml/components/ConnectionSettings.qml

+30
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,37 @@ import QtQuick.Layouts 1.15
88
import "../controls"
99

1010
ColumnLayout {
11+
property bool snapshotImported: false
12+
function setSnapshotImported(imported) {
13+
snapshotImported = imported
14+
}
15+
1116
spacing: 4
17+
Setting {
18+
id: gotoSnapshot
19+
Layout.fillWidth: true
20+
header: qsTr("Import snapshot")
21+
description: qsTr("Start using immediately with background synchronization")
22+
actionItem: Item {
23+
width: 26
24+
height: 26
25+
CaretRightIcon {
26+
anchors.centerIn: parent
27+
visible: !snapshotImported
28+
color: gotoSnapshot.stateColor
29+
}
30+
GreenCheckIcon {
31+
anchors.centerIn: parent
32+
visible: snapshotImported
33+
color: Theme.color.transparent
34+
}
35+
}
36+
onClicked: {
37+
connectionSwipe.incrementCurrentIndex()
38+
connectionSwipe.incrementCurrentIndex()
39+
}
40+
}
41+
Separator { Layout.fillWidth: true }
1242
Setting {
1343
Layout.fillWidth: true
1444
header: qsTr("Enable listening")
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
// Copyright (c) 2024-present 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+
9+
import "../controls"
10+
11+
ColumnLayout {
12+
signal snapshotImportCompleted()
13+
id: columnLayout
14+
width: Math.min(parent.width, 450)
15+
anchors.horizontalCenter: parent.horizontalCenter
16+
17+
Image {
18+
Layout.alignment: Qt.AlignCenter
19+
source: "image://images/circle-green-check"
20+
21+
sourceSize.width: 60
22+
sourceSize.height: 60
23+
}
24+
25+
Header {
26+
Layout.fillWidth: true
27+
Layout.leftMargin: 20
28+
Layout.rightMargin: 20
29+
header: qsTr("Snapshot Loaded")
30+
description: qsTr("It contains transactions up to January 12, 2024. Newer transactions still need to be downloaded." +
31+
" The data will be verified in the background. ")
32+
}
33+
34+
ContinueButton {
35+
Layout.preferredWidth: Math.min(300, parent.width - 2 * Layout.leftMargin)
36+
Layout.topMargin: 40
37+
Layout.leftMargin: 20
38+
Layout.rightMargin: Layout.leftMargin
39+
Layout.bottomMargin: 20
40+
Layout.alignment: Qt.AlignCenter
41+
text: qsTr("Done")
42+
onClicked: {
43+
columnLayout.snapshotImportCompleted()
44+
connectionSwipe.decrementCurrentIndex()
45+
connectionSwipe.decrementCurrentIndex()
46+
connectionSwipe.decrementCurrentIndex()
47+
connectionSwipe.decrementCurrentIndex()
48+
}
49+
}
50+
51+
Setting {
52+
id: viewDetails
53+
Layout.alignment: Qt.AlignCenter
54+
header: qsTr("View details")
55+
actionItem: CaretRightIcon {
56+
id: caretIcon
57+
color: viewDetails.stateColor
58+
rotation: viewDetails.expanded ? 90 : 0
59+
Behavior on rotation { NumberAnimation { duration: 200 } }
60+
}
61+
62+
property bool expanded: false
63+
64+
onClicked: {
65+
expanded = !expanded
66+
}
67+
}
68+
69+
ColumnLayout {
70+
id: detailsContent
71+
visible: viewDetails.expanded
72+
Layout.preferredWidth: Math.min(300, parent.width - 2 * Layout.leftMargin)
73+
Layout.alignment: Qt.AlignCenter
74+
Layout.leftMargin: 80
75+
Layout.rightMargin: 80
76+
Layout.topMargin: 10
77+
spacing: 10
78+
// TODO: make sure the block height number aligns right
79+
RowLayout {
80+
CoreText {
81+
text: qsTr("Block Height:")
82+
Layout.alignment: Qt.AlignLeft
83+
font.pixelSize: 14
84+
}
85+
CoreText {
86+
text: qsTr("200,000")
87+
Layout.alignment: Qt.AlignRight
88+
font.pixelSize: 14
89+
}
90+
}
91+
Separator { Layout.fillWidth: true }
92+
CoreText {
93+
text: qsTr("Hash: 0x1234567890abcdef...")
94+
font.pixelSize: 14
95+
}
96+
}
97+
}
+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// Copyright (c) 2023-present 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+
9+
import "../controls"
10+
11+
12+
ColumnLayout {
13+
id: columnLayout
14+
width: Math.min(parent.width, 450)
15+
anchors.horizontalCenter: parent.horizontalCenter
16+
17+
Image {
18+
Layout.alignment: Qt.AlignCenter
19+
source: "image://images/circle-file"
20+
21+
sourceSize.width: 200
22+
sourceSize.height: 200
23+
}
24+
25+
Header {
26+
Layout.fillWidth: true
27+
Layout.leftMargin: 20
28+
Layout.rightMargin: 20
29+
header: qsTr("Loading Snapshot")
30+
}
31+
32+
ProgressIndicator {
33+
id: progressIndicator
34+
width: 200
35+
height: 20
36+
progress: connectionSwipe.snapshotVerificationProgress
37+
Layout.alignment: Qt.AlignCenter
38+
progressColor: Theme.color.blue
39+
}
40+
}
+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
// Copyright (c) 2023-present 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+
9+
import "../controls"
10+
11+
ColumnLayout {
12+
id: columnLayout
13+
width: Math.min(parent.width, 450)
14+
anchors.horizontalCenter: parent.horizontalCenter
15+
16+
17+
Timer {
18+
id: snapshotSimulationTimer
19+
interval: 50 // Update every 50ms
20+
running: false
21+
repeat: true
22+
onTriggered: {
23+
if (connectionSwipe.snapshotVerificationProgress < 1) {
24+
connectionSwipe.snapshotVerificationProgress += 0.01
25+
} else {
26+
connectionSwipe.snapshotVerificationCycles++
27+
if (connectionSwipe.snapshotVerificationCycles < 1) {
28+
connectionSwipe.snapshotVerificationProgress = 0
29+
} else {
30+
running = false
31+
connectionSwipe.snapshotVerified = true
32+
connectionSwipe.incrementCurrentIndex()
33+
}
34+
}
35+
}
36+
}
37+
38+
Image {
39+
Layout.alignment: Qt.AlignCenter
40+
source: "image://images/circle-file"
41+
42+
sourceSize.width: 200
43+
sourceSize.height: 200
44+
}
45+
46+
Header {
47+
Layout.fillWidth: true
48+
Layout.leftMargin: 20
49+
Layout.rightMargin: 20
50+
header: qsTr("Import Snapshot")
51+
description: qsTr("You can start using the application more quickly by importing a recent transaction snapshot." +
52+
" It will be automatically verified in the background.")
53+
}
54+
55+
ContinueButton {
56+
Layout.preferredWidth: Math.min(300, parent.width - 2 * Layout.leftMargin)
57+
Layout.topMargin: 40
58+
Layout.leftMargin: 20
59+
Layout.rightMargin: Layout.leftMargin
60+
Layout.bottomMargin: 20
61+
Layout.alignment: Qt.AlignCenter
62+
text: qsTr("Choose snapshot file")
63+
onClicked: {
64+
connectionSwipe.incrementCurrentIndex()
65+
snapshotSimulationTimer.start()
66+
}
67+
}
68+
}

src/qml/res/icons/circle-file.png

1.25 KB
Loading
1.34 KB
Loading

src/qml/res/icons/green-check.png

741 Bytes
Loading

src/qml/res/src/circle-file.svg

+11
Loading
+11
Loading

src/qml/res/src/green-check.svg

+4
Loading

0 commit comments

Comments
 (0)