Add Header Control

[jarolrod]

This introduces and demos the Header control. This component is to be used as the main text component for wizard pages; it implements the style for wizard text set in the main design file. It's properties allows for a good level of customization, so this can be extended to any page (wizard or not) that needs a header.

The header control consists of a required header text, and optional description and subtext strings. This allows the control to be reused for all currently designed wizard pages. The description label will only be shown if the description property is given a value. Similarly, the subtext label will only be shown if the subtext property is given a value.

The bold, headerSize, descriptionSize, descriptionMargin and subtextSize properties have been given default values that represent the most common sizes in our wizard pages. Looking at the designed wizard pages; All headers have a size of 28 except the first one. Also, only one header is bold. Therefore, the bold property has been given a default value of false and headerSize a default value of 28. Similarly, all descriptions have a size of 18 and a margin of 10 except the first one; set 18 as default value for descriptionSize and 10 as default value for descriptionMargin. There is only one page with subtext, and it sets the size for the subtext to 15; set the default value for subtextSize to 15.

This means that the code to represent header text can be condensed. For example, the following code represents the header text for the onboarding connections page:

Header {
    header: "Connections"
    description: "Communicating with the Bitcoin network can use a lot of data."
}

The diagram below shows a breakdown of the control and how it works/example usage:

[jarolrod]

updates from 2fb2611 -> 827abff (pr100.01 -> pr100.02, diff)

changes:

• enable word wrapping
• allow for choosing between text that is aligned to the left or centered through the addition of a center property. This property defaults to true. This will allow this control to be used as the main text for the connections detailed settings page.

[promag]

Tested ACK, but should address the following comments.

[promag]

Should handle description === undefined?

[jarolrod]

undefined wouldn't have a length greater than zero, so isn't this fine as is?

[promag]

Accessing length of undefined is an error?

[hebasto]

https://bitcoindesign.slack.com/archives/C026F9QF79B/p1641383578276800?thread_ts=1641381552.272700&cid=C026F9QF79B:

Yes please, names are better. I'd recommend using two types. First, descriptive ones like red, blue, green. Then, functional ones like primary, accent, error, success, neutral, etc to which the descriptive ones are assigned. Then you’d only reference the functional ones in the code.

[jarolrod]

we'll keep this in mind, but for now leave as is?

[promag]

Agree, not the place to address this.

[jarolrod]

updated from 827abff -> 6aee4e3

rebased and addressed review comments. Here is a diff of the changes on Header.qml:

-import QtQuick 2.12
-import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.11
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
 
-Item {
+Control {
     id: root
     property bool bold: false
     property bool center: true
@@ -19,10 +19,8 @@ Item {
     property string subtext
     property int subtextMargin
     property int subtextSize: 15
-    implicitHeight: childrenRect.height
-    ColumnLayout {
+    contentItem: ColumnLayout {
         spacing: 0
-        width: parent.width
         Label {
             Layout.fillWidth: true
             Layout.preferredWidth: 0
@@ -36,10 +34,10 @@ Item {
             wrapMode: Text.WordWrap
         }
         Loader {
-            height: sourceComponent.height
             Layout.fillWidth: true
             Layout.preferredWidth: 0
             active: root.description.length > 0
+            visible: active
             sourceComponent: Label {
                 topPadding: root.descriptionMargin
                 font.family: "Inter"
@@ -47,15 +45,15 @@ Item {
                 font.pointSize: root.descriptionSize
                 color: "#DEDEDE"
                 text: root.description
-                horizontalAlignment: center ? Text.AlignHCenter : Text.AlignLeft
+                horizontalAlignment: root.center ? Text.AlignHCenter : Text.AlignLeft
                 wrapMode: Text.WordWrap
             }
         }
         Loader {
-            height: sourceComponent.height
             Layout.fillWidth: true
             Layout.preferredWidth: 0
             active: root.subtext.length > 0
+            visible: active
             sourceComponent: Label {
                 topPadding: root.subtextMargin
                 font.family: "Inter"
@@ -63,7 +61,7 @@ Item {
                 font.pixelSize: root.subtextSize
                 color: "#FFFFFF"
                 text: root.subtext
-                horizontalAlignment: center ? Text.AlignHCenter : Text.AlignLeft
+                horizontalAlignment: root.center ? Text.AlignHCenter : Text.AlignLeft
                 wrapMode: Text.WordWrap
             }
         }

[promag]

Code review ACK 6aee4e3.

[promag]

This could be required property string header.