Merge #346: Standardize post-onboarding settings window titles to navbar

hebasto · hebasto · commit ddbc0eae6fea · 2023-07-20T09:03:04.000+01:00
8f81f0d qml: standardize settings page titles to the navbar (jarolrod) 530714f qml: allow to configure when to show the header text in header control (jarolrod) df44897 qml: add page title to peers page & update description (jarolrod) 716027c qml: make entire peers page scrollable (jarolrod) Pull request description: This moves all settings pages titles post-onboarding into the navbar, standardizing where the title is for all pages. Whereas, currently, we have some within the page content and some in the page navbar. See this issue: BitcoinDesign/Bitcoin-Core-App#55 [![Windows](https://img.shields.io/badge/OS-Windows-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/win64/unsecure_win_gui.zip?branch=pull/346) [![Intel macOS](https://img.shields.io/badge/OS-Intel%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos/unsecure_mac_gui.zip?branch=pull/346) [![Apple Silicon macOS](https://img.shields.io/badge/OS-Apple%20Silicon%20macOS-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/macos_arm64/unsecure_mac_arm64_gui.zip?branch=pull/346) [![ARM64 Android](https://img.shields.io/badge/OS-Android-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android/unsecure_android_apk.zip?branch=pull/346) [![ARM32 Android](https://img.shields.io/badge/OS-Android%2032bit-green)](https://api.cirrus-ci.com/v1/artifact/github/bitcoin-core/gui-qml/android32/unsecure_android_32bit_apk.zip?branch=pull/346) ACKs for top commit: GBKS: ACK 8f81f0d Tree-SHA512: c1ebce0735edaec73c8d5b7d511db8423f1bfa89d8772e51a6ef938cdf6272baaa2079411daf53a255a298b793c23dd609f4f12ae2a3f1f4dcb1a4ea504e59aa
diff --git a/src/qml/controls/Header.qml b/src/qml/controls/Header.qml
@@ -10,6 +10,7 @@ ColumnLayout {
     id: root
     property bool center: true
     required property string header
+    property bool showHeader: true
     property int headerMargin
     property int headerSize: 28
     property bool headerBold: false
@@ -26,27 +27,32 @@ ColumnLayout {
     property bool wrap: true
 
     spacing: 0
-    Label {
+    Loader {
         Layout.fillWidth: true
-        topPadding: root.headerMargin
-        font.family: "Inter"
-        font.styleName: root.headerBold ? "Semi Bold" : "Regular"
-        font.pixelSize: root.headerSize
-        color: root.headerColor
-        text: root.header
-        horizontalAlignment: center ? Text.AlignHCenter : Text.AlignLeft
-        wrapMode: wrap ? Text.WordWrap : Text.NoWrap
+        active: root.showHeader && root.header.length > 0
+        visible: active
+        sourceComponent: Label {
+            Layout.fillWidth: true
+            topPadding: root.headerMargin
+            font.family: "Inter"
+            font.styleName: root.headerBold ? "Semi Bold" : "Regular"
+            font.pixelSize: root.headerSize
+            color: root.headerColor
+            text: root.header
+            horizontalAlignment: center ? Text.AlignHCenter : Text.AlignLeft
+            wrapMode: wrap ? Text.WordWrap : Text.NoWrap
 
-        Behavior on color {
-            ColorAnimation { duration: 150 }
+            Behavior on color {
+                ColorAnimation { duration: 150 }
+            }
         }
     }
     Loader {
         Layout.fillWidth: true
         active: root.description.length > 0
         visible: active
         sourceComponent: Label {
-            topPadding: root.descriptionMargin
+            topPadding: showHeader ? root.descriptionMargin : root.headerMargin
             font.family: "Inter"
             font.styleName: root.descriptionBold ? "Semi Bold" : "Regular"
             font.pixelSize: root.descriptionSize
diff --git a/src/qml/controls/InformationPage.qml b/src/qml/controls/InformationPage.qml
@@ -26,6 +26,7 @@ Page {
     property bool center: true
     property int bannerMargin: 20
     required property string headerText
+    property bool showHeader: true
     property int headerMargin: 30
     property int headerSize: 28
     property string description: ""
@@ -71,6 +72,7 @@ Page {
                 headerBold: root.bold
                 center: root.center
                 header: root.headerText
+                showHeader: root.showHeader
                 headerMargin: root.headerMargin
                 headerSize: root.headerSize
                 description: root.description
diff --git a/src/qml/pages/node/NodeSettings.qml b/src/qml/pages/node/NodeSettings.qml
@@ -121,13 +121,24 @@ Item {
     Component {
         id: about_page
         SettingsAbout {
+            showHeader: false
             navLeftDetail: NavButton {
                 iconSource: "image://images/caret-left"
                 text: qsTr("Back")
                 onClicked: {
                     nodeSettingsView.pop()
                 }
             }
+            navMiddleDetail: Header {
+                headerBold: true
+                headerSize: 18
+                header: qsTr("About")
+            }
+            devMiddleDetail: Header {
+                headerBold: true
+                headerSize: 18
+                header: qsTr("Developer settings")
+            }
         }
     }
     Component {
@@ -143,32 +154,44 @@ Item {
             navMiddleDetail: Header {
                 headerBold: true
                 headerSize: 18
-                header: qsTr("Settings")
+                header: qsTr("Display settings")
             }
         }
     }
     Component {
         id: storage_page
         SettingsStorage {
+            showHeader: false
             navLeftDetail: NavButton {
                 iconSource: "image://images/caret-left"
                 text: qsTr("Back")
                 onClicked: {
                     nodeSettingsView.pop()
                 }
             }
+            navMiddleDetail: Header {
+                headerBold: true
+                headerSize: 18
+                header: qsTr("Storage settings")
+            }
         }
     }
     Component {
         id: connection_page
         SettingsConnection {
+            showHeader: false
             navLeftDetail: NavButton {
                 iconSource: "image://images/caret-left"
                 text: qsTr("Back")
                 onClicked: {
                     nodeSettingsView.pop()
                 }
             }
+            navMiddleDetail: Header {
+                headerBold: true
+                headerSize: 18
+                header: qsTr("Connection settings")
+            }
         }
     }
     Component {
@@ -192,13 +215,19 @@ Item {
     Component {
         id: networktraffic_page
         NetworkTraffic {
+            showHeader: false
             navLeftDetail: NavButton {
                 iconSource: "image://images/caret-left"
                 text: qsTr("Back")
                 onClicked: {
                     nodeSettingsView.pop()
                 }
             }
+            navMiddleDetail: Header {
+                headerBold: true
+                headerSize: 18
+                header: qsTr("Network traffic")
+            }
         }
     }
 }
diff --git a/src/qml/pages/settings/SettingsAbout.qml b/src/qml/pages/settings/SettingsAbout.qml
@@ -10,9 +10,15 @@ import "../../components"
 
 Item {
     property alias navLeftDetail: aboutSwipe.navLeftDetail
+    property alias navMiddleDetail: aboutSwipe.navMiddleDetail
+    property alias devMiddleDetail: aboutSwipe.devMiddleDetail
+    property alias showHeader: aboutSwipe.showHeader
     SwipeView {
         id: aboutSwipe
         property alias navLeftDetail: about_settings.navLeftDetail
+        property alias navMiddleDetail: about_settings.navMiddleDetail
+        property alias devMiddleDetail: about_developer.navMiddleDetail
+        property alias showHeader: about_settings.showHeader
         anchors.fill: parent
         interactive: false
         orientation: Qt.Horizontal
@@ -29,6 +35,8 @@ Item {
             detailItem: AboutOptions {}
         }
         SettingsDeveloper {
+            id: about_developer
+            showHeader: about_settings.showHeader
             navLeftDetail: NavButton {
                 iconSource: "image://images/caret-left"
                 text: qsTr("Back")
diff --git a/src/qml/pages/settings/SettingsConnection.qml b/src/qml/pages/settings/SettingsConnection.qml
@@ -10,11 +10,15 @@ import "../../components"
 
 Item {
     property alias navRightDetail: connectionSwipe.navRightDetail
+    property alias navMiddleDetail: connectionSwipe.navMiddleDetail
     property alias navLeftDetail: connectionSwipe.navLeftDetail
+    property alias showHeader: connectionSwipe.showHeader
     SwipeView {
         id: connectionSwipe
         property alias navRightDetail: connection_settings.navRightDetail
+        property alias navMiddleDetail: connection_settings.navMiddleDetail
         property alias navLeftDetail: connection_settings.navLeftDetail
+        property alias showHeader: connection_settings.showHeader
         anchors.fill: parent
         interactive: false
         orientation: Qt.Horizontal

Original file line number	Diff line number	Diff line change
`@@ -121,13 +121,24 @@ Item {`
`121`	`121`	`Component {`
`122`	`122`	`id: about_page`
`123`	`123`	`SettingsAbout {`
	`124`	`+ showHeader: false`
`124`	`125`	`navLeftDetail: NavButton {`
`125`	`126`	`iconSource: "image://images/caret-left"`
`126`	`127`	`text: qsTr("Back")`
`127`	`128`	`onClicked: {`
`128`	`129`	`nodeSettingsView.pop()`
`129`	`130`	`}`
`130`	`131`	`}`
	`132`	`+ navMiddleDetail: Header {`
	`133`	`+ headerBold: true`
	`134`	`+ headerSize: 18`
	`135`	`+ header: qsTr("About")`
	`136`	`+ }`
	`137`	`+ devMiddleDetail: Header {`
	`138`	`+ headerBold: true`
	`139`	`+ headerSize: 18`
	`140`	`+ header: qsTr("Developer settings")`
	`141`	`+ }`
`131`	`142`	`}`
`132`	`143`	`}`
`133`	`144`	`Component {`
`@@ -143,32 +154,44 @@ Item {`
`143`	`154`	`navMiddleDetail: Header {`
`144`	`155`	`headerBold: true`
`145`	`156`	`headerSize: 18`
`146`		`- header: qsTr("Settings")`
	`157`	`+ header: qsTr("Display settings")`
`147`	`158`	`}`
`148`	`159`	`}`
`149`	`160`	`}`
`150`	`161`	`Component {`
`151`	`162`	`id: storage_page`
`152`	`163`	`SettingsStorage {`
	`164`	`+ showHeader: false`
`153`	`165`	`navLeftDetail: NavButton {`
`154`	`166`	`iconSource: "image://images/caret-left"`
`155`	`167`	`text: qsTr("Back")`
`156`	`168`	`onClicked: {`
`157`	`169`	`nodeSettingsView.pop()`
`158`	`170`	`}`
`159`	`171`	`}`
	`172`	`+ navMiddleDetail: Header {`
	`173`	`+ headerBold: true`
	`174`	`+ headerSize: 18`
	`175`	`+ header: qsTr("Storage settings")`
	`176`	`+ }`
`160`	`177`	`}`
`161`	`178`	`}`
`162`	`179`	`Component {`
`163`	`180`	`id: connection_page`
`164`	`181`	`SettingsConnection {`
	`182`	`+ showHeader: false`
`165`	`183`	`navLeftDetail: NavButton {`
`166`	`184`	`iconSource: "image://images/caret-left"`
`167`	`185`	`text: qsTr("Back")`
`168`	`186`	`onClicked: {`
`169`	`187`	`nodeSettingsView.pop()`
`170`	`188`	`}`
`171`	`189`	`}`
	`190`	`+ navMiddleDetail: Header {`
	`191`	`+ headerBold: true`
	`192`	`+ headerSize: 18`
	`193`	`+ header: qsTr("Connection settings")`
	`194`	`+ }`
`172`	`195`	`}`
`173`	`196`	`}`
`174`	`197`	`Component {`
`@@ -192,13 +215,19 @@ Item {`
`192`	`215`	`Component {`
`193`	`216`	`id: networktraffic_page`
`194`	`217`	`NetworkTraffic {`
	`218`	`+ showHeader: false`
`195`	`219`	`navLeftDetail: NavButton {`
`196`	`220`	`iconSource: "image://images/caret-left"`
`197`	`221`	`text: qsTr("Back")`
`198`	`222`	`onClicked: {`
`199`	`223`	`nodeSettingsView.pop()`
`200`	`224`	`}`
`201`	`225`	`}`
	`226`	`+ navMiddleDetail: Header {`
	`227`	`+ headerBold: true`
	`228`	`+ headerSize: 18`
	`229`	`+ header: qsTr("Network traffic")`
	`230`	`+ }`
`202`	`231`	`}`
`203`	`232`	`}`
`204`	`233`	`}`