Onboarding views

[shaavan]

This PR adds the views for the onboarding wizard.

Aim:

The main aim of this PR is to introduce the onboarding views and the interactions in it.

Details:

• The First commit:
  • modifies the Header.qml and TextButton.qml files.
  • It adds options not to wrap text in Header.qml. This is used later in the Introduction.qml file, which needs text in a straight line.
  • It adds options to bold the text and right-align it in the TextButton.qml. This feature is used later to properly align the button’s text on the Developer Options page.
• The Second commit:
  • Adds the Information.qml file
  • This is a modified version of Settings.qml.
  • Instead of a switch button, this allows having text in its place.
  • The text could also double as a hyperlink if the link is provided.
• The Third commit:
  • Adds the first three pages of onboarding wizard:
    • Onboarding01a.qml: Bitcoin core App

    - Onboarding01b.qml: About Options

    - Onboarding01c.qml: Developer Options

- This also adds the onboarding01.qml file, which works as the connector between the above 3 pages.
- Adds the AboutOptions.qml and DeveloperOptions.qml file:
    - The AboutOptions.qml file displays the list of options present on the About Options page. And it utilizes the Information.qml file mentioned above to create those sets of options.
    - The DeveloperOptions.qml file creates options on the 01c page.

• The Fourth commit:
  • Adds the onboarding02.qml: Strengthen the bitcoin page

- The node web image is temporarily replaced with the Bitcoin core App icon.

• The Fifth commit:
  • Adds the onboarding03.qml: The block clock page

- The block clock image is temporarily replaced with the Bitcoin core App icon.

• The Sixth commit:
  • Adds the onboarding04.qml: Storage Locations

- This commit also adds StorageLocation.qml component file. This file contains the two options displayed on the page.

• The Seventh commit:
  • Adds the following two pages in the onboarding wizard:
    • onboarding05a.qml: “Storage”

    - onboarding05b.qml: “Storage settings.”

- The onboarding05.qml page works as the connector between the above two pages.
- This commit also adds the StorageSettings.qml component page, which contains the list of settings for the 05b.qml page.

• The Eight commit:
  • Adds the last two pages on the onboarding wizard.
    • onboarding06a.qml: “Connection”

    - onboarding06b.qml: “Connection settings”

- This also adds the onboarding06.qml file, which functions as the connector between the abovementioned pages.
- This commit updates the ConnectionSettings.qml file to display all the list of settings mentioned in the design file.

• The Ninth commit:
  • Updates the stub.qml file to display the onboarding wizard.

[hebasto]

Concept ACK. This PR definitely requires designers' reviewing :)

[hebasto]

Adjust layouts according to https://bitcoindesign.github.io/Bitcoin-Core-App/layout/?

[RandyMcMillan]

The centered text in the onboarding sequence isnt ideal - left justified is better. Experimenting with where the text breaks to avoid dangling words such as "a" "the" "in" etc is also better responsive design/text flow.

[Rspigler]

I'm not sure what I am doing wrong here trying to test?
Installed qml but still only seeing bitcoin-qt (no qml binary). Running it still results in the old setup.

[shaavan]

@Rspigler

This might be a basic suggestion, but have you installed the QML-specific dependencies?

I am mentioning this because I recently made a similar mistake :)

In case you have installed the dependencies, it would be best if you could run:

./configure --without-bdb --with-qml

And share the resultant log part relevant to Qt and QML.

The relevant part should look something like this:

[hebasto]

Yes, the binary has the same name.

On Sat, 4 Jun 2022 at 00:44, Robert Spigler ***@***.***> wrote: I'm not sure what I am doing wrong here trying to test? Installed qml but still only seeing bitcoin-qt (no qml binary). Running it still results in the old setup. — Reply to this email directly, view it on GitHub <#124 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AH3PXPXGMSORHDT3UV66FY3VNKDEBANCNFSM5XPAR2AA> . You are receiving this because you commented.Message ID: ***@***.***>

--

…

-- Hennadii Stepanov

[Rspigler]

Ah ok thank you both. I was looking for the dependencies here: https://github.com/bitcoin-core/gui-qml/blob/main/doc/dependencies.md (which had no change from bitcoin/bitcoin). Was wondering where the documentation was. Will update in a moment

[Rspigler]

Notes:

On the 'Info' Page (About; Bitcoin Core is an Open Source Project...):

• The only arrow that leads to another page is 'Developer Options
• I thought I was stuck on that page, until I make the app size bigger - that is when the 'Done' button appeared.
• Storage Limit and Other Option does not do anything (this is probably known, just writing down to make sure)

Strengthen Bitcoin:

• Bitcoin Core runs a full Bitcoin node/,/ which verifies /that/ the rules of the network ....

Block Clock:

• Sometimes it's faster and sometimes /it's/ slower
• The block clock indicates each block on a dial/, which/ represents the current day.

Storage Location:

• I'm assuming that later on it will actually grab the true space available
• 500 GB is large enough for a full node. But how will we determine this for the user. Enough for current storage and 6 months out? A year out? Including indexes?

Storage:
✔️

Connection:

• Fast always on/Slow always on have the same description
• For the Desktop Application, what will this page look like?
• Enable Listening, Blocks Only, and Networks should maybe be taken out of Detailed Settings?

Other:
Selecting 'Back' is confusing when in a page's Detailed Settings. For example, there is Page 1, Page 2, Page 2 Detailed Settings. Selecting 'Done' returns to Page 2, but selecting 'Back' returns to Page 1. Perhaps for the Detailed Settings pages there shouldn't be a 'Back' button, only 'Done'?

Possible other config options to add:
Assumevalid
Indexes:

• Blockfilter
• Coinstats
• Tx

Dbcache
Address/change type

[Rspigler]

I'm also interested in how we will set up the Networks page:

cjdns/i2p/tor/ and/or clear (also incoming/outgoing).

[shaavan]

Thank you very much, @Rspigler, for your thorough review and analysis of the PR.

Let me try to address your observations as best as I can.

I thought I was stuck on that page, until I make the app size bigger - that is when the 'Done' button appeared.

That is due to improper layouting. I am working on fixing the layouts according to design guidelines, which will fix this issue.

Storage Limit and Other Option does not do anything (this is probably known, just writing down to make sure)

Yes, that's a known limitation. I displayed them as plain text for this PR's initial version to finish up a working prototype of onboarding views. This is intended to fix in the next update of this PR.

I'm assuming that later on it will actually grab the true space available

Yes. Though this is out of the scope of this PR, this is something we intend to accomplish.

Fast always on/Slow always on have the same description

Thanks for pointing that out! This was something I missed while writing the description.

For the Desktop Application, what will this page look like?

We indeed to keep this page the same as displayed through this PR. But it seems like you have some nice ideas to improve this page for the Desktop. If so, I would love to hear them.

Enable Listening, Blocks Only, and Networks should maybe be taken out of Detailed Settings?

I want to think more about this. Would you please share your reasoning for doing this change?

Perhaps for the Detailed Settings pages there shouldn't be a 'Back' button, only 'Done'?

This is something I would definitely agree with. I myself got confused a lot of times while testing this PR.

an anecdote of confusion:

I got to a detailed setting page, pressed the back button, pressed the next, and could not understand why the done button was showing up instead of next.

Possible other config options to add.

Let us give a thought about it.

Thank you very much again for your valuable feedback and thorough analysis. Your review has given me a lot of nice things to work upon :)

[Rspigler]

Hi @shaavan, thank you for your response!

We indeed to keep this page the same as displayed through this PR. But it seems like you have some nice ideas to improve this page for the Desktop. If so, I would love to hear them.

The current page has 3 settings:

1. Fast always on (Loads quickly at all times and uses as much cellular data as needed)
2. Slow always on (Loads quickly [sic] at all times and uses as much cellular data as needed)
3. Only when on Wi-Fi (Loads quickly when on wi-fi and pauses when on cellular data)
   This works perfectly (IMO) for a cellphone app. However, for the typical binary download or self-compile on a laptop/desktop machine, the first two won't be selected.

Bitcoin/bitcoin has documentation on how to manage traffic for Bitcoin Core: (https://github.com/bitcoin/bitcoin/blob/master/doc/reduce-traffic.md). These are maxuploadtarget, (disable)listen, maxconnections, and blocksonly. I think the most common options are enable/disable listening and enable blocksonly; these should be the connections settings for the desktop application. The other settings can be in Detailed Settings.

Enable Listening, Blocks Only, and Networks should maybe be taken out of Detailed Settings?

I want to think more about this. Would you please share your reasoning for doing this change?

Listening and Blocks Only already discussed above. For Networks, I think this is also a very important setting, for both privacy reasons and also anti-network partition strength. Currently, network settings can be very difficult to set up for beginners.

I can see something like this:

Connection Type	Outbound	Inbound
Clearnet	Disabled/Enabled	Disabled/Enabled
Proxy	Disabled/Enabled	Disabled/Enabled
Hidden Service	Disabled/Enabled	Disabled/Enabled

For example, doing nothing and being behind a firewall would have Clearnet Outbound Enabled, and everything else Disabled. Setting up Listening would enable Clearnet Inbound, but only if the firewall allowed it, otherwise there should be a link to port forwarding.

Not all combinations are able to exist, but I think it is a nice way to visualize. (Would also include i2p and cjdns)

[hebasto]

As I already mentioned during the recent design call, it would be nice to consider the current content of the views as mere placeholders in this PR context, and focus on workflows, transitions, layouts etc.

[jarolrod]

Concept ACK, still reviewing but wanted to talk about the PageIndicator which is still at the bottom. It was forgotten in #106 to remove the PageIndicator at the bottom. It is no longer to be used there as per discussions had on the design calls and per the design specifications. The screenshots in the PR description crop this out for some reason.

On PR branch, PageIndicator at bottom

You should just delete the footer of the Wizard control in a new commit, I have done this here: https://github.com/jarolrod/gui-qml/tree/remove-pageindicator-wizard

Feel free to cherry-pick this commit and then rebase the commits included in this PR on top of that.

[jarolrod]

@Rspigler Thanks for your interest in the project! Right now we're at a stage where we're figuring out processes and in getting an initial app together. There are some elements that will appear out of place, but all of this will be sorted out fairly soon!

[shaavan]

Updated from e8a6a8d to fc6f6ea (pr124.01 → pr124.02, diff)

Addressed @hebasto, @jarolrod, @Rspigler, and @RandyMcMillan comments

Changes:

• Removed PageIndicator bar.
• Added additional property in Information.qml to allow text to be editable.
• Done additional changes in the pages to follow the design layouting guide more closely.
• Fix description text for StorageLocation page and ConnectionOptions.

[Rspigler]

tACK fc6f6ea
Only think I noticed was that there is still weird behavior between detailed settings/back/done.

[shaavan]

Updated from fc6f6ea to f5a1127 (pr124.02 -> pr124.03, diff)

Addressed @Rspigler comment

Changes:

• Removed displaying < Back Button for sub-pages.

Visual Difference:

pr124.02	pr124.03

[hebasto]

@shaavan

Maybe rebase this PR on top of the merged #33?

[shaavan]

Updated from f5a1127 to 5502d02 (pr124.03 -> pr124.04, diff)
Addressed @hebasto suggestion

Changes:

• Rebase over the current main.
• Added optional property to Infomation.qml to use icon instead of descriptive text. Clicking on the button opens the (optional) link.
• Used this new property to display icons in DevelopOptions.qml file.
• Updated "< Back" button from a pure text label to "caret-left + Back text" button.
• Updated "i" button with info.png icon.

Visual differences:

pr124.03	pr124.04

[shaavan]

Updated from 5502d02..a655954 (pr124.04 -> pr124.05, diff)

Changes:

• Made corrections to remove redundant spacing on the Developer options page.

Visual Changes:

pr124.04	pr124.05

[Rspigler]

tACK a655954
Recent changes are implemented

[shaavan]

Updated from 802e682 to 5118be4 (pr124.08 -> pr124.09, diff)

Addessed @GBKS suggestions.

Changes:

• Moved navbar code from Wizard.qml to each page separately.
• Fixed Layouting issue by removing redundant right margin and top padding from Settings.qml and Information.qml.
• Removed the Done button on the About Page and Developer options page and added the < Back button on them.
• Moved the Done button from the bottom center of the page to the right of the navbar in the Storage Settings and Connection Settings pages.
• Decreased the maximum content width from 600 -> 450 in Connection Settings and Storage Settings page.
• Added a missing divider line between Connection Settings page.
• Decreased the minimum app window size to 655 pixels.

Some Minor Changes:

• Fixed Caret-left size for the < Back button according to the Design.

Here are the screenshots for all the visual differences after this update:

pr124.08	pr124.09

First of all, thank you very much, @GBKS, for all your valuable suggestions. All these suggestions helped improve the PR a lot.
I would also like to address the suggestion I did not include in this PR.

1. Replace the Bitcoin app icon with appropriate images on the Strengthen Bitcoin (page 02) and The Block Clock (page 03).
   • Since there is a need for discussion on whether these images should be used statically or should be animated, I decided to keep a hold on implementing this change.
2. Circle the "i" icon in the black when the light theme on Start (01a) page
   • Doing this would require the "white" version of the "I" icon; that is, the info.svg with the color="white".

Current Image	Required Image

Since I wanted to be sure of the correct method of importing svg, and png format in resources, I decided to keep this change on hold.

Again thank you very much for all your suggestions!

A friendly ping to my fellow contributors: @hebasto @jarolrod @mouxdesign @Rspigler @RandyMcMillan

[Rspigler]

Will test shortly

[Rspigler]

tACK commit 5118be4

I can confirm that the text size changes from pr124.06->pr124.07 has taken place
I can confirm the visual changes mentioned in comment #124 (comment)

All tests pass

[GBKS]

Great update, @shaavan.

Just tested, and noticed a few more things we can address, whether in this PR or elsewhere:

• Input field types, states, validation and min/max values (I can enter "Pizza" for daily upload limit)
• Caret icon for list items (instead of the ">" character)
• Animate the toggle circle when switching on/off (super minor nice-to-have)

Was also wondering if we need more, and/or more visual, hover/selected states. When hovering a web link on "About", for example, I see the text select cursor. Should probably be the hand cursor, and we could change the text color (to orange) for clearer feedback.

[jarolrod]

The QML TextEdit component is not an appropriate component for this. Per it's description: "Displays multiple lines of editable formatted text." The links we want to display are definitely not editable text.

We should just use Text. That way we don't need to hack around TextEdit by setting it as readOnly.

[shaavan]

The TextEdit Component is needed for the options like Storage Limit or Connection Limit, which required the values to be editable.

Getting rid of the readonly property would mean creating separate loaders for editable and non-editable text.

I would like to hear your take on this and would be glad to know a more efficient way to deal with this problem.

[jarolrod]

It's not clear to me why we are hardcoding a rightMargin value of 12 here. This doesn't seem like the correct way to do this, what is the design spec that inspired this change?

[shaavan]

The rightMargin was explicitly set to correctly position the OptionsSwitch, to be precisely above the right end of the divider line.

Before	After

I experimented with other conventional methods of aligning elements using Layouts and Anchors before going with hardcoded margin. Still, none of them worked to position the Switch over the divider properly.

[jarolrod]

As the description of a17b84e states, "This is an object similar to Setting.qml". I think that instead of having this control we can just refactor Setting.qml to load the desired component in place of the currently hardcoded switch. This adds flexibility to the setting control to fit in with all the use cases required of it within options handling without introducing a new component here, and other components when a new component is desired in the switch's position.

[shaavan]

This would be the ideal way to move forward, and this was something I tried to do while beginning to write this PR.

However, the crucial problem I faced while going with this idea at the beginning was that QML is a declarative language and hence doesn't support conditional statements that are more complicated than a ternary operator.
So it was quite hard to figure out a way to make Settings.qml switch the type of description based on the option type without using conditional statements. So I went forward by creating Information.qml from scratch and, one by one, incorporated changes to work with all the option types.

But now, since the Information.qml has been laid out, and almost all the permutations of various options have been accounted for, we can think of ways to merge these two files effectively.

[jarolrod]

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

[shaavan]

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

[jarolrod]

in 79e959c

a better title is qml: remove page indicator and navbar from Wizard Control

[jarolrod]

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
             }
         }
     }

[jarolrod]

you could make this it's own commit, also maybe switch the logic from defining rightalign to center?:

qml: make text boldness and alignment customizable in TextButton control

diff --git a/src/qml/controls/TextButton.qml b/src/qml/controls/TextButton.qml
index 2dce44670..4f508970d 100644
--- a/src/qml/controls/TextButton.qml
+++ b/src/qml/controls/TextButton.qml
@@ -10,13 +10,15 @@ Button {
     property int textSize: 18
     property string textColor: Theme.color.neutral9
     font.family: "Inter"
-    font.styleName: "Semi Bold"
+    font.styleName: bold ? "Semi Bold" : "Regular"
     font.pixelSize: root.textSize
+    property bool bold: true
+    property bool center: true
     contentItem: Text {
         text: root.text
         font: root.font
         color: root.textColor
-        horizontalAlignment: Text.AlignHCenter
+        horizontalAlignment: center ? Text.AlignHCenter : Text.AlignRight
         verticalAlignment: Text.AlignVCenter
     }
     background: null

[shaavan]

maybe switch the logic from defining rightalign to center?

I am afraid I did not understand the change you are referring to. Would you please elaborate on this point?
Thanks!

[GBKS]

ACK 5118be4

[jarolrod]

ACK 5118be4

Will pick up feedback in follow-ups

[hebasto]

Observing in terminal:

Unsupported modifier, resource creation failed.
XXX: resource creation failed

[shaavan]

@jarolrod

Will pick up feedback in follow-ups

Great! Let me know which one you pick first, and I shall get doing the rest.

[shaavan]

@hebasto

#124 (comment)

I didn't observe this message while building/running the views.

It would greatly help if you could give details on precisely when you observed this statement: when starting the GUI or after clicking on some action in the views.

[hebasto]

#124 (comment)

I didn't observe this message while building/running the views.

It would greatly help if you could give details on precisely when you observed this statement: when starting the GUI or after clicking on some action in the views.

It seems like a Wayland-specific issue.

[shaavan]

It seems like a Wayland-specific issue.

So is this something we can work on fixing, or is it a bug intrinsic to Wayland?

[hebasto]

It seems like a Wayland-specific issue.

So is this something we can work on fixing, or is it a bug intrinsic to Wayland?

IDK :)

[mouxdesign]

Just downloaded the binary and I'm happy to say that it looks great! I don't have the font sizing issues I had the first time. In the image below row 2, you can see the present version, row 1 was the previous version. Well done @shaavan and @GBKS for the suggested solution.

[Rspigler]

@mouxdesign Do you mean column 2/3? The images below row 2 still show many errors

[Rspigler]

I tested this again, and my system shows column 2

[GBKS]

@Rspigler I believe column 2 is the newer and correct version - so should be all good. Is that right, @mouxdesign?

[mouxdesign]

100% correct as @GBKS mentioned the second column is the newer version. I see in my initial message I mentioned a row, so understand which the confusion might have come from. The third column are Christoph's original designs.