Skip to content

Commit 574817b

Browse files
committed
Merge #428: Migrate to PageStacks
c52566d qml: Swap existing SwipeViews for PageStack (jarolrod) f0e5951 qml: Swap existing StackViews for PageStack (jarolrod) 7ba2f62 qml: declare OnboardingWizard file, reintroduce as PageStack (jarolrod) d49b888 qml: Introduce PageStack control (jarolrod) Pull request description: After fixing our sins in #427, migrating to A StackView based GUI is quite simple. Here we use a custom StackView control, PageStack, that has a property `vertical` used to declare if we want vertical or horizontal animations, and additionally implements the [custom animation](#422) we want. Closes #422 Closes #219 [![Build Artifacts](https://img.shields.io/badge/Build%20Artifacts-green )]() ACKs for top commit: pablomartin4btc: re-ACK c52566d MarnixCroes: tACK c52566d D33r-Gee: tACK [c52566d](c52566d) Works as expected on WSL Ubuntu 22.04 johnny9: ACK c52566d Tree-SHA512: f9a025944db24a46e1f78f4ad8a9b9aca4e1f3ff4dd5927eebfa2a7fb28ed390a17da79e23c6248c3c0e82b361ff1b2dedbf4df9df2a1d0677b05bacb7763bcb
2 parents 15c1f39 + c52566d commit 574817b

15 files changed

+397
-269
lines changed

src/Makefile.qt.include

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -398,6 +398,7 @@ QML_RES_QML = \
398398
qml/controls/OptionButton.qml \
399399
qml/controls/OptionSwitch.qml \
400400
qml/controls/OutlineButton.qml \
401+
qml/controls/PageStack.qml \
401402
qml/controls/ProgressIndicator.qml \
402403
qml/controls/qmldir \
403404
qml/controls/Setting.qml \
@@ -420,6 +421,7 @@ QML_RES_QML = \
420421
qml/pages/onboarding/OnboardingStorageAmount.qml \
421422
qml/pages/onboarding/OnboardingStorageLocation.qml \
422423
qml/pages/onboarding/OnboardingStrengthen.qml \
424+
qml/pages/onboarding/OnboardingWizard.qml \
423425
qml/pages/settings/SettingsAbout.qml \
424426
qml/pages/settings/SettingsBlockClockDisplayMode.qml \
425427
qml/pages/settings/SettingsConnection.qml \

src/qml/bitcoin_qml.qrc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
<file>controls/OptionButton.qml</file>
3939
<file>controls/OptionSwitch.qml</file>
4040
<file>controls/OutlineButton.qml</file>
41+
<file>controls/PageStack.qml</file>
4142
<file>controls/ProgressIndicator.qml</file>
4243
<file>controls/qmldir</file>
4344
<file>controls/Setting.qml</file>
@@ -60,6 +61,7 @@
6061
<file>pages/onboarding/OnboardingStorageAmount.qml</file>
6162
<file>pages/onboarding/OnboardingStorageLocation.qml</file>
6263
<file>pages/onboarding/OnboardingStrengthen.qml</file>
64+
<file>pages/onboarding/OnboardingWizard.qml</file>
6365
<file>pages/settings/SettingsAbout.qml</file>
6466
<file>pages/settings/SettingsBlockClockDisplayMode.qml</file>
6567
<file>pages/settings/SettingsConnection.qml</file>

src/qml/controls/PageStack.qml

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// Copyright (c) 2024 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+
8+
StackView {
9+
property bool vertical: false
10+
11+
pushEnter: Transition {
12+
NumberAnimation {
13+
property: vertical ? "y" : "x"
14+
from: vertical ? parent.height : parent.width
15+
to: 0
16+
duration: 400
17+
easing.type: Easing.Bezier
18+
easing.bezierCurve: [0.5, 0.0, 0.2, 1.0]
19+
}
20+
}
21+
pushExit: Transition {
22+
NumberAnimation {
23+
property: vertical ? "y" : "x"
24+
from: 0
25+
to: vertical ? -parent.height : -parent.width
26+
duration: 400
27+
easing.type: Easing.Bezier
28+
easing.bezierCurve: [0.5, 0.0, 0.2, 1.0]
29+
}
30+
}
31+
popEnter: Transition {
32+
NumberAnimation {
33+
property: vertical ? "y" : "x"
34+
from: vertical ? -parent.height : -parent.width
35+
to: 0
36+
duration: 400
37+
easing.type: Easing.Bezier
38+
easing.bezierCurve: [0.5, 0.0, 0.2, 1.0]
39+
}
40+
}
41+
popExit: Transition {
42+
NumberAnimation {
43+
property: vertical ? "y" : "x"
44+
from: 0
45+
to: vertical ? parent.height : parent.width
46+
duration: 400
47+
easing.type: Easing.Bezier
48+
easing.bezierCurve: [0.5, 0.0, 0.2, 1.0]
49+
}
50+
}
51+
}

src/qml/pages/main.qml

Lines changed: 19 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ ApplicationWindow {
3232
ColorAnimation { duration: 150 }
3333
}
3434

35-
StackView {
35+
PageStack {
3636
id: main
3737
initialItem: {
3838
if (needOnboarding) {
@@ -65,36 +65,8 @@ ApplicationWindow {
6565

6666
Component {
6767
id: onboardingWizard
68-
SwipeView {
69-
id: swipeView
70-
property bool finished: false
71-
interactive: false
72-
73-
OnboardingCover {
74-
onNext: swipeView.incrementCurrentIndex()
75-
}
76-
OnboardingStrengthen {
77-
onBack: swipeView.decrementCurrentIndex()
78-
onNext: swipeView.incrementCurrentIndex()
79-
}
80-
OnboardingBlockclock {
81-
onBack: swipeView.decrementCurrentIndex()
82-
onNext: swipeView.incrementCurrentIndex()
83-
}
84-
OnboardingStorageLocation {
85-
onBack: swipeView.decrementCurrentIndex()
86-
onNext: swipeView.incrementCurrentIndex()
87-
}
88-
OnboardingStorageAmount {
89-
onBack: swipeView.decrementCurrentIndex()
90-
onNext: swipeView.incrementCurrentIndex()
91-
}
92-
OnboardingConnection {
93-
onBack: swipeView.decrementCurrentIndex()
94-
onNext: swipeView.finished = true
95-
}
96-
97-
onFinishedChanged: {
68+
OnboardingWizard {
69+
onFinished: {
9870
optionsModel.onboard()
9971
if (AppMode.walletEnabled && AppMode.isDesktop) {
10072
main.push(desktopWallets)
@@ -127,18 +99,24 @@ ApplicationWindow {
12799

128100
Component {
129101
id: node
130-
SwipeView {
131-
id: node_swipe
132-
interactive: false
133-
orientation: Qt.Vertical
134-
NodeRunner {
135-
onSettingsClicked: {
136-
node_swipe.incrementCurrentIndex()
102+
PageStack {
103+
id: nodeStack
104+
vertical: true
105+
initialItem: node
106+
Component {
107+
id: node
108+
NodeRunner {
109+
onSettingsClicked: {
110+
nodeStack.push(nodeSettings)
111+
}
137112
}
138113
}
139-
NodeSettings {
140-
onDoneClicked: {
141-
node_swipe.decrementCurrentIndex()
114+
Component {
115+
id: nodeSettings
116+
NodeSettings {
117+
onDoneClicked: {
118+
nodeStack.pop()
119+
}
142120
}
143121
}
144122
}

src/qml/pages/node/NodeSettings.qml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Item {
1616

1717
id: root
1818

19-
StackView {
19+
PageStack {
2020
id: nodeSettingsView
2121
anchors.fill: parent
2222

src/qml/pages/onboarding/OnboardingConnection.qml

Lines changed: 41 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -15,46 +15,52 @@ Page {
1515
signal next
1616
background: null
1717
clip: true
18-
SwipeView {
19-
id: connections
18+
PageStack {
19+
id: connectionStack
2020
anchors.fill: parent
21-
interactive: false
22-
orientation: Qt.Vertical
23-
InformationPage {
24-
navLeftDetail: NavButton {
25-
iconSource: "image://images/caret-left"
26-
text: qsTr("Back")
27-
onClicked: root.back()
28-
}
29-
bannerItem: Image {
30-
Layout.topMargin: 20
31-
Layout.alignment: Qt.AlignCenter
32-
source: Theme.image.storage
33-
sourceSize.width: 200
34-
sourceSize.height: 200
35-
}
36-
bold: true
37-
headerText: qsTr("Starting initial download")
38-
headerMargin: 30
39-
description: qsTr("The application will connect to the Bitcoin network and start downloading and verifying transactions.\n\nThis may take several hours, or even days, based on your connection.")
40-
descriptionMargin: 10
41-
detailActive: true
42-
detailTopMargin: 10
43-
detailItem: RowLayout {
44-
TextButton {
21+
vertical: true
22+
initialItem: onboardingConnection
23+
Component {
24+
id: onboardingConnection
25+
InformationPage {
26+
navLeftDetail: NavButton {
27+
iconSource: "image://images/caret-left"
28+
text: qsTr("Back")
29+
onClicked: root.back()
30+
}
31+
bannerItem: Image {
32+
Layout.topMargin: 20
4533
Layout.alignment: Qt.AlignCenter
46-
text: qsTr("Connection settings")
47-
onClicked: connections.incrementCurrentIndex()
34+
source: Theme.image.storage
35+
sourceSize.width: 200
36+
sourceSize.height: 200
4837
}
38+
bold: true
39+
headerText: qsTr("Starting initial download")
40+
headerMargin: 30
41+
description: qsTr("The application will connect to the Bitcoin network and start downloading and verifying transactions.\n\nThis may take several hours, or even days, based on your connection.")
42+
descriptionMargin: 10
43+
detailActive: true
44+
detailTopMargin: 10
45+
detailItem: RowLayout {
46+
TextButton {
47+
Layout.alignment: Qt.AlignCenter
48+
text: qsTr("Connection settings")
49+
onClicked: connectionStack.push(connectionSettings)
50+
}
51+
}
52+
lastPage: true
53+
buttonText: qsTr("Next")
54+
buttonMargin: 20
55+
onNext: root.next()
4956
}
50-
lastPage: true
51-
buttonText: qsTr("Next")
52-
buttonMargin: 20
53-
onNext: root.next()
5457
}
55-
SettingsConnection {
56-
onboarding: true
57-
onBack: connections.decrementCurrentIndex()
58+
Component {
59+
id: connectionSettings
60+
SettingsConnection {
61+
onboarding: true
62+
onBack: connectionStack.pop()
63+
}
5864
}
5965
}
6066
}

src/qml/pages/onboarding/OnboardingCover.qml

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -14,47 +14,50 @@ Page {
1414
signal next
1515
background: null
1616
clip: true
17-
SwipeView {
18-
id: introductions
17+
PageStack {
18+
id: coverStack
1919
anchors.fill: parent
20-
interactive: false
21-
orientation: Qt.Horizontal
22-
InformationPage {
23-
navRightDetail: NavButton {
24-
iconSource: "image://images/info"
25-
iconHeight: 24
26-
iconWidth: 24
27-
iconColor: Theme.color.neutral0
28-
iconBackground: Rectangle {
29-
radius: 12
30-
color: Theme.color.neutral9
20+
initialItem: onboardingCover
21+
Component {
22+
id: onboardingCover
23+
InformationPage {
24+
navRightDetail: NavButton {
25+
iconSource: "image://images/info"
26+
iconHeight: 24
27+
iconWidth: 24
28+
iconColor: Theme.color.neutral0
29+
iconBackground: Rectangle {
30+
radius: 12
31+
color: Theme.color.neutral9
32+
}
33+
onClicked: coverStack.push(coverSettings)
3134
}
32-
onClicked: {
33-
introductions.incrementCurrentIndex()
35+
bannerItem: Image {
36+
Layout.fillWidth: true
37+
Layout.alignment: Qt.AlignCenter
38+
source: "image://images/app"
39+
// Bitcoin icon has ~11% padding
40+
sourceSize.width: 112
41+
sourceSize.height: 112
3442
}
43+
bannerMargin: 0
44+
bold: true
45+
headerText: qsTr("Bitcoin Core App")
46+
headerSize: 36
47+
description: qsTr("Be part of the Bitcoin network.")
48+
descriptionMargin: 10
49+
descriptionSize: 24
50+
subtext: qsTr("100% open-source & open-design")
51+
buttonText: qsTr("Start")
52+
onNext: root.next()
3553
}
36-
bannerItem: Image {
37-
Layout.fillWidth: true
38-
Layout.alignment: Qt.AlignCenter
39-
source: "image://images/app"
40-
// Bitcoin icon has ~11% padding
41-
sourceSize.width: 112
42-
sourceSize.height: 112
43-
}
44-
bannerMargin: 0
45-
bold: true
46-
headerText: qsTr("Bitcoin Core App")
47-
headerSize: 36
48-
description: qsTr("Be part of the Bitcoin network.")
49-
descriptionMargin: 10
50-
descriptionSize: 24
51-
subtext: qsTr("100% open-source & open-design")
52-
buttonText: qsTr("Start")
53-
onNext: root.next()
5454
}
55-
SettingsAbout {
56-
onboarding: true
57-
onBack: introductions.decrementCurrentIndex()
55+
Component {
56+
id: coverSettings
57+
SettingsAbout {
58+
onboarding: true
59+
onBack: coverStack.pop()
60+
}
5861
}
5962
}
6063
}

0 commit comments

Comments
 (0)