Add and demo ConnectionSettings and ContinueButton components by jarolrod · Pull Request #101 · bitcoin-core/gui-qml

jarolrod · 2022-01-04T02:36:51Z

This introduces the ConnectionSettings component, which represents the detailed connections settings page as designed in the main design file. It also introduces the controls the component depends on, Setting and OptionSwitch. Missing is the Text button that is used for settings which require an input value, because the functionality of that component needs to be discussed.

The Setting control represents an individual setting of the ConnectionSettings components, this component uses the Header control for its text. OptionSwitch represents the toggle button shown in the design.

To accomplish a proper demo of this component, this places our forms (ConnectionOptions and ConnectionSettings) into a StackLayout. The ContinueButton is introduced to advance/rewind the stack. A PageIndicator is added to highlight the functionality of the demo.

Additionally, to fix the annoying behavior of the stub currently, this makes the dimensions of the stub page dependent on it's contents width. 😄

Image of added components:

jarolrod · 2022-01-05T18:54:44Z

updated from 8f801eb -> 533993f

Changes:

rebased over master
updated include versions
Settings.qml
- Setting control base type changed from Item to control
- removed instances of height: sourceComponent.height
- removed setting implicitHeight
dropped change on the stubs size as it's not relevant to the goal of this PR

jarolrod · 2022-01-05T19:30:08Z

updated from 533993f -> 5d10e90

changes:

rebase over master as Add Header Control #100 was merged

jarolrod · 2022-01-05T19:48:18Z

updated from 5d10e90 -> e12442b

Changes:

in settings.qml bind visible to active

promag · 2022-01-06T12:25:28Z

-        ConnectionOptions {
-            Layout.preferredWidth: 400
-            focus: true
+        StackLayout {


FYI stack doesn't support animation.

Is it a blocker for this PR?

yeah it's just used here for simplicity of the demo. #106 uses an uninteractive SwipeView which has the animations we want.

hebasto

ACK e12442b, tested on Linux Mint 20.3 (with depends).

~~As this PR has no conflicts with #110, going to merge it.~~

hebasto · 2022-01-09T19:19:47Z

Could the last commit (a demo) be dropped from this PR, to avoid conflicts with #110?

jarolrod · 2022-01-10T16:45:49Z

updated from e12442b -> c026a3e

Changes: drop last commit to avoid conflict with #110. The demo of this PR has been moved to: connection-settings-demo

hebasto

re-ACK c026a3e

promag · 2022-01-10T15:24:24Z

+    spacing: 20
+    Setting {
+        Layout.fillWidth: true
+        header: "Use cellular data"


Don't forget about translations? Use qsTr()?

Addressed in #111

promag · 2022-01-10T15:26:55Z

+    property bool last: false
+    property string header
+    property string description
+    contentItem: GridLayout {


This is not really a grid.

What would be a more appropriate Layout for it?

A ColumnLayout with a nested RowLayout

promag · 2022-01-10T15:27:03Z

+Control {
+    id: root
+    property bool last: false
+    property string header


Might want these required?

Addressed in #111

promag · 2022-01-10T15:29:54Z

+
+Control {
+    id: root
+    property bool last: false


This could be automatic, here's a simple approach that doesn't take into account if visible property:

property bool last: parent && root == parent.children[parent.children.length - 1]

Addressed in #111

promag · 2022-01-10T15:54:47Z

+        implicitWidth: 45
+        implicitHeight: 28
+        x: root.leftPadding
+        y: parent.height / 2 - height / 2


Math.round((parent.height - height) / 2)

Addressed in #111

f5458f2 qml: Make further suggested changes to Settings.qml (Shashwat) a0ba0d7 qml: Replace GridLayout with nested Column Row Layout in Settings.qml (Shashwat) be87ba9 qml: Use Math.round() in OptionSwitch.qml (Shashwat) fe41329 qml: Using qsTr() with strings in ConnectionSettings.qml (Shashwat) Pull request description: - This PR is a follow-up to #101 and addresses suggestions of [this](#101 (comment)) comment. - The changes are split into separate commits so that they can be easier to review, and reason with. ACKs for top commit: promag: Code review ACK f5458f2. Tree-SHA512: f1a421a74fcf61a861720f4a9ad489042964f022db186fce6f9d9013af37f6575a2bef11ea02c4b79eeefdd8e89aab4f2bae86a0d30d0e47b889ce4d595781fc

Github-Pull: bitcoin-core#101 Rebased-From: d038898

Github-Pull: bitcoin-core#101 Rebased-From: f41fb20

Github-Pull: bitcoin-core#101 Rebased-From: d7eea93

Github-Pull: bitcoin-core#101 Rebased-From: c026a3e

Github-Pull: bitcoin-core#101 Rebased-From: d038898

Github-Pull: bitcoin-core#101 Rebased-From: f41fb20

Github-Pull: bitcoin-core#101 Rebased-From: d7eea93

Github-Pull: bitcoin-core#101 Rebased-From: c026a3e

Github-Pull: bitcoin-core#101 Rebased-From: d038898

Github-Pull: bitcoin-core#101 Rebased-From: f41fb20

Github-Pull: bitcoin-core#101 Rebased-From: d7eea93

Github-Pull: bitcoin-core#101 Rebased-From: c026a3e

Github-Pull: bitcoin-core#101 Rebased-From: d038898

Github-Pull: bitcoin-core#101 Rebased-From: f41fb20

Github-Pull: bitcoin-core#101 Rebased-From: d7eea93

Github-Pull: bitcoin-core#101 Rebased-From: c026a3e

Github-Pull: bitcoin-core#101 Rebased-From: d038898

Github-Pull: bitcoin-core#101 Rebased-From: f41fb20

Github-Pull: bitcoin-core#101 Rebased-From: d7eea93

Github-Pull: bitcoin-core#101 Rebased-From: c026a3e

…ontinueButton components 0d552e2 qml: introduce ConnectionSettings component (jarolrod) 14f59eb qml: introduce Setting control (jarolrod) 6e991fb qml: introduce OptionSwitch control (jarolrod) d44f28f qml: introduce ContinueButton control (jarolrod) Pull request description: This introduces the `ConnectionSettings` component, which represents the [detailed connections settings page](https://www.figma.com/file/GaCoOSNHB2yMB9ThiDtred/Bitcoin-Core-App-Main?node-id=2777%3A67296) as designed in the [main design file](https://www.figma.com/file/GaCoOSNHB2yMB9ThiDtred/Bitcoin-Core-App-Main?node-id=1035%3A1883). It also introduces the controls the component depends on, `Setting` and `OptionSwitch`. Missing is the Text button that is used for settings which require an input value, because the functionality of that component needs to be discussed. The `Setting` control represents an individual setting of the `ConnectionSettings` components, this component uses the `Header` control for its text. `OptionSwitch` represents the toggle button shown in the design. To accomplish a proper demo of this component, this places our forms (ConnectionOptions and ConnectionSettings) into a StackLayout. The `ContinueButton` is introduced to advance/rewind the stack. A `PageIndicator` is added to highlight the functionality of the demo. Additionally, to fix the annoying behavior of the stub currently, this makes the dimensions of the stub page dependent on it's contents width. 😄 **Image of added components:** <img width="529" alt="Screen Shot 2022-01-03 at 9 28 59 PM" src="https://user-images.githubusercontent.com/23396902/148001662-d374d6c7-5335-4406-a4fa-cbb205aa8d86.png"> [![Windows](https://img.shields.io/badge/OS-Windows-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/insecure_win_gui.zip?branch=pull/101) [![macOS](https://img.shields.io/badge/OS-macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/insecure_mac_gui.zip?branch=pull/101) [![Android](https://img.shields.io/badge/OS-Android-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/insecure_android_apk.zip?branch=pull/101) ACKs for top commit: hebasto: re-ACK 0d552e2 Tree-SHA512: c63902a1dedce3647eb4a1b36ff8cfd738aa5dd62781413908157d3cff67bf51b224b5c078ec83e69d76c6d9642da34a8f096e4f446cea6ada98ecd202e0be1e

7113e38 qml: Make further suggested changes to Settings.qml (Shashwat) a9d6910 qml: Replace GridLayout with nested Column Row Layout in Settings.qml (Shashwat) ad8d06c qml: Use Math.round() in OptionSwitch.qml (Shashwat) 1cef5ce qml: Using qsTr() with strings in ConnectionSettings.qml (Shashwat) Pull request description: - This PR is a follow-up to #101 and addresses suggestions of [this](bitcoin-core/gui-qml#101 (comment)) comment. - The changes are split into separate commits so that they can be easier to review, and reason with. ACKs for top commit: promag: Code review ACK 7113e38. Tree-SHA512: f1a421a74fcf61a861720f4a9ad489042964f022db186fce6f9d9013af37f6575a2bef11ea02c4b79eeefdd8e89aab4f2bae86a0d30d0e47b889ce4d595781fc

…ontinueButton components 0d552e22907e14702aa9846c98f57a7bae29c24a qml: introduce ConnectionSettings component (jarolrod) 14f59ebedbacf129a175e38e7b472fddd64602ec qml: introduce Setting control (jarolrod) 6e991fb977ae038803ffb179102fc59aad4f34a4 qml: introduce OptionSwitch control (jarolrod) d44f28f99c2883495e4988d8ab773a6f2aa830a7 qml: introduce ContinueButton control (jarolrod) Pull request description: This introduces the `ConnectionSettings` component, which represents the [detailed connections settings page](https://www.figma.com/file/GaCoOSNHB2yMB9ThiDtred/Bitcoin-Core-App-Main?node-id=2777%3A67296) as designed in the [main design file](https://www.figma.com/file/GaCoOSNHB2yMB9ThiDtred/Bitcoin-Core-App-Main?node-id=1035%3A1883). It also introduces the controls the component depends on, `Setting` and `OptionSwitch`. Missing is the Text button that is used for settings which require an input value, because the functionality of that component needs to be discussed. The `Setting` control represents an individual setting of the `ConnectionSettings` components, this component uses the `Header` control for its text. `OptionSwitch` represents the toggle button shown in the design. To accomplish a proper demo of this component, this places our forms (ConnectionOptions and ConnectionSettings) into a StackLayout. The `ContinueButton` is introduced to advance/rewind the stack. A `PageIndicator` is added to highlight the functionality of the demo. Additionally, to fix the annoying behavior of the stub currently, this makes the dimensions of the stub page dependent on it's contents width. 😄 **Image of added components:** <img width="529" alt="Screen Shot 2022-01-03 at 9 28 59 PM" src="https://user-images.githubusercontent.com/23396902/148001662-d374d6c7-5335-4406-a4fa-cbb205aa8d86.png"> [![Windows](https://img.shields.io/badge/OS-Windows-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/insecure_win_gui.zip?branch=pull/101) [![macOS](https://img.shields.io/badge/OS-macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/insecure_mac_gui.zip?branch=pull/101) [![Android](https://img.shields.io/badge/OS-Android-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/insecure_android_apk.zip?branch=pull/101) ACKs for top commit: hebasto: re-ACK 0d552e22907e14702aa9846c98f57a7bae29c24a Tree-SHA512: c63902a1dedce3647eb4a1b36ff8cfd738aa5dd62781413908157d3cff67bf51b224b5c078ec83e69d76c6d9642da34a8f096e4f446cea6ada98ecd202e0be1e

7113e389b635b45d1e99ada85795ee5922d9ca62 qml: Make further suggested changes to Settings.qml (Shashwat) a9d6910fbc3a8517ceb3140a0d479338ff65d2ab qml: Replace GridLayout with nested Column Row Layout in Settings.qml (Shashwat) ad8d06cce00b8a75c01c4f1eda89b888f11ad1a5 qml: Use Math.round() in OptionSwitch.qml (Shashwat) 1cef5ce8cc1c04d16dec277a21e13ae11b30631a qml: Using qsTr() with strings in ConnectionSettings.qml (Shashwat) Pull request description: - This PR is a follow-up to #101 and addresses suggestions of [this](bitcoin-core/gui-qml#101 (comment)) comment. - The changes are split into separate commits so that they can be easier to review, and reason with. ACKs for top commit: promag: Code review ACK 7113e389b635b45d1e99ada85795ee5922d9ca62. Tree-SHA512: f1a421a74fcf61a861720f4a9ad489042964f022db186fce6f9d9013af37f6575a2bef11ea02c4b79eeefdd8e89aab4f2bae86a0d30d0e47b889ce4d595781fc

This was referenced Jan 4, 2022

Introduce the StorageOptions component and TextButton control #102

Merged

Introduce Wizard control #106

Merged

jarolrod force-pushed the connection-settings branch from 8f801eb to 533993f Compare January 5, 2022 18:49

jarolrod added 2 commits January 5, 2022 14:28

qml: introduce ContinueButton control

d038898

qml: introduce OptionSwitch control

f41fb20

jarolrod force-pushed the connection-settings branch from 533993f to 5d10e90 Compare January 5, 2022 19:29

jarolrod added 2 commits January 5, 2022 14:46

qml: introduce Setting control

d7eea93

qml: introduce ConnectionSettings component

c026a3e

jarolrod force-pushed the connection-settings branch from 5d10e90 to e12442b Compare January 5, 2022 19:46

promag reviewed Jan 6, 2022

View reviewed changes

jarolrod mentioned this pull request Jan 6, 2022

POC: Theme Singleton for color definitions and UI toggling #109

Closed

hebasto approved these changes Jan 9, 2022

View reviewed changes

jarolrod force-pushed the connection-settings branch from e12442b to c026a3e Compare January 10, 2022 16:44

hebasto approved these changes Jan 10, 2022

View reviewed changes

hebasto merged commit 574a701 into bitcoin-core:main Jan 10, 2022

promag reviewed Jan 11, 2022

View reviewed changes

This was referenced Jan 13, 2022

qml: Add DropShadow to the OptionSwitch indicatorButton #111

Closed

qml: Follow-up to PR#101 #112

Merged

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 7, 2025

qml: introduce ContinueButton control

db4f396

Github-Pull: bitcoin-core#101 Rebased-From: d038898

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 7, 2025

qml: introduce OptionSwitch control

3310e65

Github-Pull: bitcoin-core#101 Rebased-From: f41fb20

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 7, 2025

qml: introduce Setting control

ac00d98

Github-Pull: bitcoin-core#101 Rebased-From: d7eea93

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 7, 2025

qml: introduce ConnectionSettings component

fd668e7

Github-Pull: bitcoin-core#101 Rebased-From: c026a3e

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 8, 2025

qml: introduce ContinueButton control

894d1f6

Github-Pull: bitcoin-core#101 Rebased-From: d038898

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 8, 2025

qml: introduce OptionSwitch control

39b9bc3

Github-Pull: bitcoin-core#101 Rebased-From: f41fb20

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 8, 2025

qml: introduce Setting control

ef0db64

Github-Pull: bitcoin-core#101 Rebased-From: d7eea93

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 8, 2025

qml: introduce ConnectionSettings component

713c0dd

Github-Pull: bitcoin-core#101 Rebased-From: c026a3e

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 8, 2025

qml: introduce ContinueButton control

7fbc46b

Github-Pull: bitcoin-core#101 Rebased-From: d038898

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 8, 2025

qml: introduce OptionSwitch control

2ab95d3

Github-Pull: bitcoin-core#101 Rebased-From: f41fb20

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 8, 2025

qml: introduce Setting control

c85a460

Github-Pull: bitcoin-core#101 Rebased-From: d7eea93

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 8, 2025

qml: introduce ConnectionSettings component

0ad60b9

Github-Pull: bitcoin-core#101 Rebased-From: c026a3e

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 9, 2025

qml: introduce ContinueButton control

9a9a8b4

Github-Pull: bitcoin-core#101 Rebased-From: d038898

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 9, 2025

qml: introduce OptionSwitch control

350f365

Github-Pull: bitcoin-core#101 Rebased-From: f41fb20

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 9, 2025

qml: introduce Setting control

bd6ec5f

Github-Pull: bitcoin-core#101 Rebased-From: d7eea93

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 9, 2025

qml: introduce ConnectionSettings component

8a33b34

Github-Pull: bitcoin-core#101 Rebased-From: c026a3e

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 9, 2025

qml: introduce ContinueButton control

fdbdc80

Github-Pull: bitcoin-core#101 Rebased-From: d038898

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 9, 2025

qml: introduce OptionSwitch control

9bedbb9

Github-Pull: bitcoin-core#101 Rebased-From: f41fb20

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 9, 2025

qml: introduce Setting control

e243111

Github-Pull: bitcoin-core#101 Rebased-From: d7eea93

hebasto pushed a commit to hebasto/gui-qml that referenced this pull request Jun 9, 2025

qml: introduce ConnectionSettings component

3adaca9

Github-Pull: bitcoin-core#101 Rebased-From: c026a3e

Conversation

jarolrod commented Jan 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jarolrod commented Jan 5, 2022

Uh oh!

jarolrod commented Jan 5, 2022

Uh oh!

jarolrod commented Jan 5, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hebasto left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hebasto commented Jan 9, 2022

Uh oh!

jarolrod commented Jan 10, 2022

Uh oh!

hebasto left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jarolrod commented Jan 4, 2022 •

edited

Loading

hebasto left a comment •

edited

Loading