Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Onboarding views #124

Merged
merged 10 commits into from
Jul 27, 2022
Merged

Onboarding views #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
79e959c
qml: Changes to Wizard Control
jarolrod Jun 6, 2022
8763690
qml: Changes to Header.qml TextButton.qml, OptionButton.qml and Setti…
shaavan May 31, 2022
a17b84e
qml: Add Information.qml in src/qml/controls
shaavan May 31, 2022
3c298fe
qml: Add onboarding01 and its subpages
shaavan May 31, 2022
7db1673
qml: Add onboarding02.qml file
shaavan May 31, 2022
a1bf658
qml: Added onboarding03.qml
shaavan May 31, 2022
6763cb9
qml: Add onboarding04.qml page
shaavan May 31, 2022
72b85fa
qml: Add onboarding05.qml page and its subpages
shaavan May 31, 2022
233b721
qml: Add onboarding06.qml pages and its subpages
shaavan May 31, 2022
5118be4
qml: Update stub.qml to display onboarding views
shaavan May 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/Makefile.qt.include
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,12 +304,17 @@ QML_RES_ICONS = \
QML_QRC_CPP = qml/qrc_bitcoin.cpp
QML_QRC = qml/bitcoin_qml.qrc
QML_RES_QML = \
qml/components/AboutOptions.qml \
qml/components/BlockCounter.qml \
qml/components/ConnectionOptions.qml \
qml/components/ConnectionSettings.qml \
qml/components/DeveloperOptions.qml \
qml/components/StorageLocations.qml \
qml/components/StorageOptions.qml \
qml/components/StorageSettings.qml \
qml/controls/ContinueButton.qml \
qml/controls/Header.qml \
qml/controls/Information.qml \
qml/controls/PageIndicator.qml \
qml/controls/OptionButton.qml \
qml/controls/OptionSwitch.qml \
Expand All @@ -320,6 +325,19 @@ QML_RES_QML = \
qml/controls/Theme.qml \
qml/controls/Wizard.qml \
qml/pages/initerrormessage.qml \
qml/pages/onboarding/onboarding01.qml \
qml/pages/onboarding/onboarding01a.qml \
qml/pages/onboarding/onboarding01b.qml \
qml/pages/onboarding/onboarding01c.qml \
qml/pages/onboarding/onboarding02.qml \
qml/pages/onboarding/onboarding03.qml \
qml/pages/onboarding/onboarding04.qml \
qml/pages/onboarding/onboarding05.qml \
qml/pages/onboarding/onboarding05a.qml \
qml/pages/onboarding/onboarding05b.qml \
qml/pages/onboarding/onboarding06.qml \
qml/pages/onboarding/onboarding06a.qml \
qml/pages/onboarding/onboarding06b.qml \
qml/pages/stub.qml

BITCOIN_QT_CPP = $(BITCOIN_QT_BASE_CPP)
Expand Down
18 changes: 18 additions & 0 deletions src/qml/bitcoin_qml.qrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
<!DOCTYPE RCC><RCC version="1.0">
<qresource prefix="/qml">
<file>components/AboutOptions.qml</file>
<file>components/BlockCounter.qml</file>
<file>components/ConnectionOptions.qml</file>
<file>components/ConnectionSettings.qml</file>
<file>components/DeveloperOptions.qml</file>
<file>components/StorageLocations.qml</file>
<file>components/StorageOptions.qml</file>
<file>components/StorageSettings.qml</file>
<file>controls/ContinueButton.qml</file>
<file>controls/Header.qml</file>
<file>controls/Information.qml</file>
<file>controls/PageIndicator.qml</file>
<file>controls/OptionButton.qml</file>
<file>controls/OptionSwitch.qml</file>
Expand All @@ -16,6 +21,19 @@
<file>controls/Theme.qml</file>
<file>controls/Wizard.qml</file>
<file>pages/initerrormessage.qml</file>
<file>pages/onboarding/onboarding01.qml</file>
<file>pages/onboarding/onboarding01a.qml</file>
<file>pages/onboarding/onboarding01b.qml</file>
<file>pages/onboarding/onboarding01c.qml</file>
<file>pages/onboarding/onboarding02.qml</file>
<file>pages/onboarding/onboarding03.qml</file>
<file>pages/onboarding/onboarding04.qml</file>
<file>pages/onboarding/onboarding05.qml</file>
<file>pages/onboarding/onboarding05a.qml</file>
<file>pages/onboarding/onboarding05b.qml</file>
<file>pages/onboarding/onboarding06.qml</file>
<file>pages/onboarding/onboarding06a.qml</file>
<file>pages/onboarding/onboarding06b.qml</file>
<file>pages/stub.qml</file>
</qresource>
<qresource prefix="/icons">
Expand Down
65 changes: 65 additions & 0 deletions src/qml/components/AboutOptions.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
// Copyright (c) 2022 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"

ColumnLayout {
spacing: 20
Information {
Layout.fillWidth: true
header: qsTr("Website")
description: qsTr("bitcoincore.org >")
link: "https://bitcoincore.org"
}
Information {
Layout.fillWidth: true
header: qsTr("Source code")
description: qsTr("github.com/bitcoin/bitcoin >")
link: "https://github.com/bitcoin/bitcoin"
}
Information {
Layout.fillWidth: true
header: qsTr("License")
description: qsTr("MIT >")
link: "https://opensource.org/licenses/MIT"
}
Information {
Layout.fillWidth: true
header: qsTr("Version")
description: qsTr("v22.99.0-1e7564eca8a6 >")
link: "https://bitcoin.org/en/download"
}
RowLayout {
Header {
Layout.fillWidth: true
center: false
header: qsTr("Developer options")
headerSize: 18
description: qsTr("Only use these if you have development experience")
descriptionSize: 15
descriptionMargin: 10
wrap: false
}
Loader {
Layout.fillWidth: true
Layout.preferredWidth: 0
Layout.alignment: Qt.AlignRight
Layout.rightMargin: 5
active: true
visible: active
sourceComponent: TextButton {
text: ">"
bold: false
rightalign: true
onClicked: {
introductions.incrementCurrentIndex()
swipeView.inSubPage = true
}
}
}
}
}
5 changes: 1 addition & 4 deletions src/qml/components/ConnectionOptions.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,18 @@ ColumnLayout {
spacing: 15
OptionButton {
ButtonGroup.group: group
Layout.fillWidth: true
text: qsTr("Fast always on")
description: qsTr("Loads quickly at all times and uses as much cellular data as needed.")
recommended: true
}
OptionButton {
ButtonGroup.group: group
Layout.fillWidth: true
checked: true
text: qsTr("Slow always on")
description: qsTr("Loads quickly at all times and uses as much cellular data as needed.")
description: qsTr("Loads at all times with reduced cellular data usage.")
}
OptionButton {
ButtonGroup.group: group
Layout.fillWidth: true
text: qsTr("Only when on Wi-Fi")
description: qsTr("Loads quickly when on wi-fi and pauses when on cellular data.")
detail: ProgressIndicator {
Expand Down
28 changes: 22 additions & 6 deletions src/qml/components/ConnectionSettings.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,39 @@ ColumnLayout {
Layout.fillWidth: true
header: qsTr("Use cellular data")
}
Setting {
Information {
Layout.fillWidth: true
header: qsTr("Daily upload limit")
description: qsTr("250 MB")
isReadonly: false
}
Setting {
Information {
Layout.fillWidth: true
header: qsTr("Connection limit")
description: qsTr("6")
isReadonly: false
}
Setting {
Layout.fillWidth: true
header: qsTr("Listening enabled")
description: qsTr("Reduces data usage.")
header: qsTr("Enable listening")
description: qsTr("Increases data usage")
}
Setting {
last: true
Layout.fillWidth: true
header: qsTr("Blocks Only")
description: qsTr("Do not transfer unconfirmed transactions. Also disabled listening.")
description: qsTr("Reduces data usage.")
}
Information {
Layout.fillWidth: true
header: qsTr("Networks")
subtext: qsTr("Which networks to use for communication")
description: qsTr("6")
isReadonly: false
}
Information {
last: true
Layout.fillWidth: true
header: qsTr("Proxy settings")
description: qsTr(">")
}
}
40 changes: 40 additions & 0 deletions src/qml/components/DeveloperOptions.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
// Copyright (c) 2022 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"

ColumnLayout {
spacing: 20
Information {
Layout.fillWidth: true
header: qsTr("Developer documentation")
hasIcon: true
iconSource: "qrc:/icons/export"
link: "https://bitcoin.org/en/bitcoin-core/contribute/documentation"
}
Setting {
Layout.fillWidth: true
header: qsTr("Storage limit")
}
Information {
Layout.fillWidth: true
header: qsTr("Network")
description: qsTr("Mainnet")
isReadonly: false
}
Information {
Layout.fillWidth: true
header: qsTr("Other option...")
description: qsTr("42")
isReadonly: false
}
Setting {
Layout.fillWidth: true
header: qsTr("Other option...")
description: qsTr("Description...")
}
}
27 changes: 27 additions & 0 deletions src/qml/components/StorageLocations.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
// Copyright (c) 2022 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"

ColumnLayout {
ButtonGroup {
id: group
}
spacing: 15
OptionButton {
ButtonGroup.group: group
text: qsTr("SD Card")
description: qsTr("The available space is large enough for full block storage. ")
recommended: true
checked: true
}
OptionButton {
ButtonGroup.group: group
text: qsTr("Hard drive")
description: qsTr("Available space only allows for partial block storage.")
}
}
2 changes: 0 additions & 2 deletions src/qml/components/StorageOptions.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ ColumnLayout {
spacing: 15
OptionButton {
ButtonGroup.group: group
Layout.fillWidth: true
text: qsTr("Reduce storage")
description: qsTr("Uses about 75GB.")
recommended: true
Expand All @@ -26,7 +25,6 @@ ColumnLayout {
}
OptionButton {
ButtonGroup.group: group
Layout.fillWidth: true
text: qsTr("Default")
description: qsTr("Uses about 423GB.")
detail: ProgressIndicator {
Expand Down
34 changes: 34 additions & 0 deletions src/qml/components/StorageSettings.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
// Copyright (c) 2022 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"

ColumnLayout {
spacing: 20
Setting {
Layout.fillWidth: true
header: qsTr("Store Recent blocks only")
}
Information {
Layout.fillWidth: true
header: qsTr("Storage limit")
description: qsTr("75 GB")
isReadonly: false
}
Information {
Layout.fillWidth: true
header: qsTr("Data location")
description: qsTr("c://.../data")
isReadonly: false
}
Information {
Layout.fillWidth: true
header: qsTr("Block location")
description: qsTr("c://.../blocks")
isReadonly: false
}
}
2 changes: 1 addition & 1 deletion src/qml/controls/ContinueButton.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import QtQuick.Controls 2.15
Button {
font.family: "Inter"
font.styleName: "Semi Bold"
font.pointSize: 18
font.pixelSize: 18
contentItem: Text {
text: parent.text
font: parent.font
Expand Down
11 changes: 6 additions & 5 deletions src/qml/controls/Header.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ Control {
property string subtext
property int subtextMargin
property int subtextSize: 15
property bool wrap: true
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you could make this it's own commit:

qml: customizable wrap mode in Header control

diff --git a/src/qml/controls/Header.qml b/src/qml/controls/Header.qml
index 59fb01671..c7adcf309 100644
--- a/src/qml/controls/Header.qml
+++ b/src/qml/controls/Header.qml
@@ -19,6 +19,7 @@ Control {
     property string subtext
     property int subtextMargin
     property int subtextSize: 15
+    property bool wrap: true
     contentItem: ColumnLayout {
         spacing: 0
         Label {
@@ -31,7 +32,7 @@ Control {
             color: Theme.color.neutral9
             text: root.header
             horizontalAlignment: center ? Text.AlignHCenter : Text.AlignLeft
-            wrapMode: Text.WordWrap
+            wrapMode: wrap ? Text.WordWrap : Text.NoWrap
         }
         Loader {
             Layout.fillWidth: true
@@ -46,7 +47,7 @@ Control {
                 color: Theme.color.neutral8
                 text: root.description
                 horizontalAlignment: root.center ? Text.AlignHCenter : Text.AlignLeft
-                wrapMode: Text.WordWrap
+                wrapMode: wrap ? Text.WordWrap : Text.NoWrap
             }
         }
         Loader {
@@ -62,7 +63,7 @@ Control {
                 color: Theme.color.neutral9
                 text: root.subtext
                 horizontalAlignment: root.center ? Text.AlignHCenter : Text.AlignLeft
-                wrapMode: Text.WordWrap
+                wrapMode: wrap ? Text.WordWrap : Text.NoWrap
             }
         }
     }

contentItem: ColumnLayout {
spacing: 0
Label {
Expand All @@ -27,11 +28,11 @@ Control {
topPadding: root.headerMargin
font.family: "Inter"
font.styleName: root.bold ? "Semi Bold" : "Regular"
font.pointSize: root.headerSize
font.pixelSize: root.headerSize
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in 8763690, you didn't update the PR description to state that we are now using pixelSize instead of pointSize when you updated the PR. This is a pretty important change to document. I would suggest extracting out this part into it's own commit (adding a nice description to document the historical reason):

qml: use font pixelSize instead of pointSize

diff --git a/src/qml/controls/ContinueButton.qml b/src/qml/controls/ContinueButton.qml
index 2b98f8baf..d478ba45e 100644
--- a/src/qml/controls/ContinueButton.qml
+++ b/src/qml/controls/ContinueButton.qml
@@ -8,7 +8,7 @@ import QtQuick.Controls 2.15
 Button {
     font.family: "Inter"
     font.styleName: "Semi Bold"
-    font.pointSize: 18
+    font.pixelSize: 18
     contentItem: Text {
         text: parent.text
         font: parent.font
diff --git a/src/qml/controls/Header.qml b/src/qml/controls/Header.qml
index 13d42e1c4..59fb01671 100644
--- a/src/qml/controls/Header.qml
+++ b/src/qml/controls/Header.qml
@@ -27,7 +27,7 @@ Control {
             topPadding: root.headerMargin
             font.family: "Inter"
             font.styleName: root.bold ? "Semi Bold" : "Regular"
-            font.pointSize: root.headerSize
+            font.pixelSize: root.headerSize
             color: Theme.color.neutral9
             text: root.header
             horizontalAlignment: center ? Text.AlignHCenter : Text.AlignLeft
@@ -42,7 +42,7 @@ Control {
                 topPadding: root.descriptionMargin
                 font.family: "Inter"
                 font.styleName: "Regular"
-                font.pointSize: root.descriptionSize
+                font.pixelSize: root.descriptionSize
                 color: Theme.color.neutral8
                 text: root.description
                 horizontalAlignment: root.center ? Text.AlignHCenter : Text.AlignLeft
diff --git a/src/qml/controls/TextButton.qml b/src/qml/controls/TextButton.qml
index 1063a275b..2dce44670 100644
--- a/src/qml/controls/TextButton.qml
+++ b/src/qml/controls/TextButton.qml
@@ -11,7 +11,7 @@ Button {
     property string textColor: Theme.color.neutral9
     font.family: "Inter"
     font.styleName: "Semi Bold"
-    font.pointSize: root.textSize
+    font.pixelSize: root.textSize
     contentItem: Text {
         text: root.text
         font: root.font

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with your suggestion regarding splitting the commits and rewriting the commit message. And hence I tried to incorporate them.
However, after merging this PR, I can't figure out a way to do them.
Could you please suggest a way to incorporate this and the following two suggestions? Thanks!

A gentle ping @jarolrod, @hebasto

color: Theme.color.neutral9
text: root.header
horizontalAlignment: center ? Text.AlignHCenter : Text.AlignLeft
wrapMode: Text.WordWrap
wrapMode: wrap ? Text.WordWrap : Text.NoWrap
}
Loader {
Layout.fillWidth: true
Expand All @@ -42,11 +43,11 @@ Control {
topPadding: root.descriptionMargin
font.family: "Inter"
font.styleName: "Regular"
font.pointSize: root.descriptionSize
font.pixelSize: root.descriptionSize
color: Theme.color.neutral8
text: root.description
horizontalAlignment: root.center ? Text.AlignHCenter : Text.AlignLeft
wrapMode: Text.WordWrap
wrapMode: wrap ? Text.WordWrap : Text.NoWrap
}
}
Loader {
Expand All @@ -62,7 +63,7 @@ Control {
color: Theme.color.neutral9
text: root.subtext
horizontalAlignment: root.center ? Text.AlignHCenter : Text.AlignLeft
wrapMode: Text.WordWrap
wrapMode: wrap ? Text.WordWrap : Text.NoWrap
}
}
}
Expand Down
Loading