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