Add and demo ConnectionSettings and ContinueButton components #101

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

src/qml/pages/stub.qml

-        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

src/qml/components/ConnectionSettings.qml

+    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

src/qml/controls/Setting.qml

+    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

src/qml/controls/Setting.qml

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


Might want these required?

Addressed in #111

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

src/qml/controls/Setting.qml

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

src/qml/controls/OptionSwitch.qml

+        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

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

Add and demo ConnectionSettings and ContinueButton components #101

Add and demo ConnectionSettings and ContinueButton components #101

Uh oh!

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!

Uh oh!

jarolrod commented Jan 4, 2022 •

edited

Loading

hebasto left a comment •

edited

Loading