qml: use Separator component to separate settings

jarolrod · jarolrod · commit 5cbf67f1c479 · 2023-02-13T22:25:40.000-07:00
Extracts out the Separator from the Setting control. Adjusts relevant
pages ColumnLayout spacing values. Additionally, adds proper margin
values to header since we no longer have spacing provided by a
ColumnLayout inside of the Setting control.
diff --git a/src/qml/components/AboutOptions.qml b/src/qml/components/AboutOptions.qml
@@ -8,7 +8,7 @@ import QtQuick.Layouts 1.15
 import "../controls"
 
 ColumnLayout {
-    spacing: 20
+    spacing: 4
     Setting {
         id: websiteLink
         Layout.fillWidth: true
@@ -20,6 +20,7 @@ ColumnLayout {
         }
         onClicked: loadedItem.clicked()
     }
+    Separator { Layout.fillWidth: true }
     Setting {
         id: sourceLink
         Layout.fillWidth: true
@@ -31,6 +32,7 @@ ColumnLayout {
         }
         onClicked: loadedItem.clicked()
     }
+    Separator { Layout.fillWidth: true }
     Setting {
         id: licenseLink
         Layout.fillWidth: true
@@ -42,6 +44,7 @@ ColumnLayout {
         }
         onClicked: loadedItem.clicked()
     }
+    Separator { Layout.fillWidth: true }
     Setting {
         id: versionLink
         Layout.fillWidth: true
@@ -56,6 +59,7 @@ ColumnLayout {
         }
         onClicked: loadedItem.clicked()
     }
+    Separator { Layout.fillWidth: true }
     Setting {
         id: gotoDeveloper
         Layout.fillWidth: true
diff --git a/src/qml/components/ConnectionSettings.qml b/src/qml/components/ConnectionSettings.qml
@@ -8,7 +8,7 @@ import QtQuick.Layouts 1.15
 import "../controls"
 
 ColumnLayout {
-    spacing: 20
+    spacing: 4
     Setting {
         Layout.fillWidth: true
         header: qsTr("Enable listening")
@@ -22,6 +22,7 @@ ColumnLayout {
           loadedItem.toggled()
         }
     }
+    Separator { Layout.fillWidth: true }
     Setting {
         Layout.fillWidth: true
         header: qsTr("Map port using UPnP")
@@ -34,6 +35,7 @@ ColumnLayout {
           loadedItem.toggled()
         }
     }
+    Separator { Layout.fillWidth: true }
     Setting {
         Layout.fillWidth: true
         header: qsTr("Map port using NAT-PMP")
@@ -46,6 +48,7 @@ ColumnLayout {
           loadedItem.toggled()
         }
     }
+    Separator { Layout.fillWidth: true }
     Setting {
         Layout.fillWidth: true
         header: qsTr("Enable RPC server")
@@ -58,6 +61,7 @@ ColumnLayout {
           loadedItem.toggled()
         }
     }
+    Separator { Layout.fillWidth: true }
     Setting {
         id: gotoProxy
         last: true
diff --git a/src/qml/components/DeveloperOptions.qml b/src/qml/components/DeveloperOptions.qml
@@ -8,7 +8,7 @@ import QtQuick.Layouts 1.15
 import "../controls"
 
 ColumnLayout {
-    spacing: 20
+    spacing: 4
     Setting {
         id: devDocsLink
         Layout.fillWidth: true
@@ -22,6 +22,7 @@ ColumnLayout {
         }
         onClicked: loadedItem.clicked()
     }
+    Separator { Layout.fillWidth: true }
     Setting {
         id: dbcacheSetting
         Layout.fillWidth: true
@@ -33,6 +34,7 @@ ColumnLayout {
         }
         onClicked: loadedItem.forceActiveFocus()
     }
+    Separator { Layout.fillWidth: true }
     Setting {
         id: parSetting
         Layout.fillWidth: true
@@ -44,6 +46,7 @@ ColumnLayout {
         }
         onClicked: loadedItem.forceActiveFocus()
     }
+    Separator { Layout.fillWidth: true }
     Setting {
         Layout.fillWidth: true
         header: qsTr("Dark Mode")
diff --git a/src/qml/components/StorageSettings.qml b/src/qml/components/StorageSettings.qml
@@ -8,7 +8,7 @@ import QtQuick.Layouts 1.15
 import "../controls"
 
 ColumnLayout {
-    spacing: 20
+    spacing: 4
     Setting {
         Layout.fillWidth: true
         header: qsTr("Store recent blocks only")
@@ -21,6 +21,7 @@ ColumnLayout {
           loadedItem.toggled()
         }
     }
+    Separator { Layout.fillWidth: true }
     Setting {
         id: pruneTargetSetting
         Layout.fillWidth: true
diff --git a/src/qml/controls/Setting.qml b/src/qml/controls/Setting.qml
@@ -50,36 +50,24 @@ AbstractButton {
         }
     }
 
-    contentItem: ColumnLayout {
-        spacing: 20
-        width: parent.width
-        RowLayout {
-            Header {
-                Layout.fillWidth: true
-                center: false
-                header: root.header
-                headerSize: 18
-                headerColor: root.stateColor
-                description: root.description
-                descriptionSize: 15
-                descriptionMargin: 0
-            }
-            Loader {
-                id: action_loader
-                active: true
-                visible: active
-                sourceComponent: root.actionItem
-            }
+    contentItem: RowLayout {
+        Header {
+            Layout.topMargin: 14
+            Layout.bottomMargin: 14
+            Layout.fillWidth: true
+            center: false
+            header: root.header
+            headerSize: 18
+            headerColor: root.stateColor
+            description: root.description
+            descriptionSize: 15
+            descriptionMargin: 0
         }
         Loader {
-            Layout.fillWidth: true
-            Layout.columnSpan: 2
-            active: !last
+            id: action_loader
+            active: true
             visible: active
-            sourceComponent: Rectangle {
-                height: 1
-                color: Theme.color.neutral5
-            }
+            sourceComponent: root.actionItem
         }
     }
 }
diff --git a/src/qml/pages/node/NodeSettings.qml b/src/qml/pages/node/NodeSettings.qml
@@ -34,7 +34,7 @@ Item {
                 id: navbar
             }
             ColumnLayout {
-                spacing: 20
+                spacing: 4
                 width: Math.min(parent.width, 450)
                 anchors.horizontalCenter: parent.horizontalCenter
                 Setting {
@@ -46,6 +46,7 @@ Item {
                     }
                     onClicked: loadedItem.toggled()
                 }
+                Separator { Layout.fillWidth: true }
                 Setting {
                     id: gotoAbout
                     Layout.fillWidth: true
@@ -58,6 +59,7 @@ Item {
                     }
                     onClicked: loadedItem.clicked()
                 }
+                Separator { Layout.fillWidth: true }
                 Setting {
                     id: gotoStorage
                     Layout.fillWidth: true
@@ -70,6 +72,7 @@ Item {
                     }
                     onClicked: loadedItem.clicked()
                 }
+                Separator { Layout.fillWidth: true }
                 Setting {
                     id: gotoConnection
                     Layout.fillWidth: true

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ import QtQuick.Layouts 1.15`
`8`	`8`	`import "../controls"`
`9`	`9`
`10`	`10`	`ColumnLayout {`
`11`		`- spacing: 20`
	`11`	`+ spacing: 4`
`12`	`12`	`Setting {`
`13`	`13`	`id: websiteLink`
`14`	`14`	`Layout.fillWidth: true`
`@@ -20,6 +20,7 @@ ColumnLayout {`
`20`	`20`	`}`
`21`	`21`	`onClicked: loadedItem.clicked()`
`22`	`22`	`}`
	`23`	`+ Separator { Layout.fillWidth: true }`
`23`	`24`	`Setting {`
`24`	`25`	`id: sourceLink`
`25`	`26`	`Layout.fillWidth: true`
`@@ -31,6 +32,7 @@ ColumnLayout {`
`31`	`32`	`}`
`32`	`33`	`onClicked: loadedItem.clicked()`
`33`	`34`	`}`
	`35`	`+ Separator { Layout.fillWidth: true }`
`34`	`36`	`Setting {`
`35`	`37`	`id: licenseLink`
`36`	`38`	`Layout.fillWidth: true`
`@@ -42,6 +44,7 @@ ColumnLayout {`
`42`	`44`	`}`
`43`	`45`	`onClicked: loadedItem.clicked()`
`44`	`46`	`}`
	`47`	`+ Separator { Layout.fillWidth: true }`
`45`	`48`	`Setting {`
`46`	`49`	`id: versionLink`
`47`	`50`	`Layout.fillWidth: true`
`@@ -56,6 +59,7 @@ ColumnLayout {`
`56`	`59`	`}`
`57`	`60`	`onClicked: loadedItem.clicked()`
`58`	`61`	`}`
	`62`	`+ Separator { Layout.fillWidth: true }`
`59`	`63`	`Setting {`
`60`	`64`	`id: gotoDeveloper`
`61`	`65`	`Layout.fillWidth: true`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ Item {`
`34`	`34`	`id: navbar`
`35`	`35`	`}`
`36`	`36`	`ColumnLayout {`
`37`		`- spacing: 20`
	`37`	`+ spacing: 4`
`38`	`38`	`width: Math.min(parent.width, 450)`
`39`	`39`	`anchors.horizontalCenter: parent.horizontalCenter`
`40`	`40`	`Setting {`
`@@ -46,6 +46,7 @@ Item {`
`46`	`46`	`}`
`47`	`47`	`onClicked: loadedItem.toggled()`
`48`	`48`	`}`
	`49`	`+ Separator { Layout.fillWidth: true }`
`49`	`50`	`Setting {`
`50`	`51`	`id: gotoAbout`
`51`	`52`	`Layout.fillWidth: true`
`@@ -58,6 +59,7 @@ Item {`
`58`	`59`	`}`
`59`	`60`	`onClicked: loadedItem.clicked()`
`60`	`61`	`}`
	`62`	`+ Separator { Layout.fillWidth: true }`
`61`	`63`	`Setting {`
`62`	`64`	`id: gotoStorage`
`63`	`65`	`Layout.fillWidth: true`
`@@ -70,6 +72,7 @@ Item {`
`70`	`72`	`}`
`71`	`73`	`onClicked: loadedItem.clicked()`
`72`	`74`	`}`
	`75`	`+ Separator { Layout.fillWidth: true }`
`73`	`76`	`Setting {`
`74`	`77`	`id: gotoConnection`
`75`	`78`	`Layout.fillWidth: true`