qml: fix Switch layout issues and add section headings to preferences

electrum/gui/qml/components/Preferences.qml

@@ -29,10 +29,17 @@ Pane {
 
             Pane {
                 id: prefsPane
+                width: parent.width
+
                 GridLayout {
                     columns: 2
                     width: parent.width
 
+                    PrefsHeading {
+                        Layout.columnSpan: 2
+                        text: qsTr('User Interface')
+                    }
+
                     Label {
                         text: qsTr('Language')
                     }
@@ -55,29 +62,55 @@ Pane {
                         }
                     }
 
-                    Switch {
+                    RowLayout {
-                        id: thousands
                         Layout.columnSpan: 2
-                        text: qsTr('Add thousands separators to bitcoin amounts')
+                        Layout.fillWidth: true
-                        onCheckedChanged: {
+                        Layout.leftMargin: -constants.paddingSmall
-                            if (activeFocus)
+                        spacing: 0
-                                Config.thousandsSeparator = checked
+                        Switch {
+                            id: thousands
+                            onCheckedChanged: {
+                                if (activeFocus)
+                                    Config.thousandsSeparator = checked
+                            }
+                        }
+                        Label {
+                            Layout.fillWidth: true
+                            text: qsTr('Add thousands separators to bitcoin amounts')
+                            wrapMode: Text.Wrap
                         }
                     }
 
-                    Switch {
+                    RowLayout {
-                        id: checkSoftware
                         Layout.columnSpan: 2
-                        text: qsTr('Automatically check for software updates')
+                        Layout.fillWidth: true
-                        enabled: false
+                        Layout.leftMargin: -constants.paddingSmall
+                        spacing: 0
+                        Switch {
+                            id: checkSoftware
+                            enabled: false
+                        }
+                        Label {
+                            Layout.fillWidth: true
+                            text: qsTr('Automatically check for software updates')
+                            wrapMode: Text.Wrap
+                        }
                     }
 
-                    Switch {
+                    RowLayout {
-                        id: fiatEnable
+                        Layout.leftMargin: -constants.paddingSmall
-                        text: qsTr('Fiat Currency')
+                        spacing: 0
-                        onCheckedChanged: {
+                        Switch {
-                            if (activeFocus)
+                            id: fiatEnable
-                                Daemon.fx.enabled = checked
+                            onCheckedChanged: {
+                                if (activeFocus)
+                                    Daemon.fx.enabled = checked
+                            }
+                        }
+                        Label {
+                            Layout.fillWidth: true
+                            text: qsTr('Fiat Currency')
+                            wrapMode: Text.Wrap
                         }
                     }
 
@@ -91,19 +124,28 @@ Pane {
                         }
                     }
 
-                    Switch {
+                    RowLayout {
-                        id: historicRates
-                        text: qsTr('Historic rates')
-                        enabled: Daemon.fx.enabled
                         Layout.columnSpan: 2
-                        onCheckedChanged: {
+                        Layout.fillWidth: true
-                            if (activeFocus)
+                        Layout.leftMargin: -constants.paddingSmall
-                                Daemon.fx.historicRates = checked
+                        spacing: 0
+                        Switch {
+                            id: historicRates
+                            enabled: Daemon.fx.enabled
+                            onCheckedChanged: {
+                                if (activeFocus)
+                                    Daemon.fx.historicRates = checked
+                            }
+                        }
+                        Label {
+                            Layout.fillWidth: true
+                            text: qsTr('Historic rates')
+                            wrapMode: Text.Wrap
                         }
                     }
 
                     Label {
-                        text: qsTr('Source')
+                        text: qsTr('Exchange rate provider')
                         enabled: Daemon.fx.enabled
                     }
 
@@ -120,26 +162,9 @@ Pane {
                         }
                     }
 
-                    Switch {
+                    PrefsHeading {
-                        id: spendUnconfirmed
-                        text: qsTr('Spend unconfirmed')
                         Layout.columnSpan: 2
-                        onCheckedChanged: {
+                        text: qsTr('Wallet behavior')
-                            if (activeFocus)
-                                Config.spendUnconfirmed = checked
-                        }
-                    }
-
-                    Label {
-                        text: qsTr('Default request expiry')
-                        Layout.fillWidth: false
-                    }
-
-                    RequestExpiryComboBox {
-                        onCurrentValueChanged: {
-                            if (activeFocus)
-                                Config.requestExpiry = currentValue
-                        }
                     }
 
                     Label {
@@ -185,6 +210,41 @@ Pane {
                         }
                     }
 
+                    RowLayout {
+                        Layout.columnSpan: 2
+                        Layout.leftMargin: -constants.paddingSmall
+                        spacing: 0
+                        Switch {
+                            id: spendUnconfirmed
+                            onCheckedChanged: {
+                                if (activeFocus)
+                                    Config.spendUnconfirmed = checked
+                            }
+                        }
+                        Label {
+                            Layout.fillWidth: true
+                            text: qsTr('Spend unconfirmed')
+                            wrapMode: Text.Wrap
+                        }
+                    }
+
+                    Label {
+                        text: qsTr('Default request expiry')
+                        Layout.fillWidth: false
+                    }
+
+                    RequestExpiryComboBox {
+                        onCurrentValueChanged: {
+                            if (activeFocus)
+                                Config.requestExpiry = currentValue
+                        }
+                    }
+
+                    PrefsHeading {
+                        Layout.columnSpan: 2
+                        text: qsTr('Lightning')
+                    }
+
                     Label {
                         text: qsTr('Lightning Routing')
                     }
@@ -205,37 +265,68 @@ Pane {
                         }
                     }
 
-                    Switch {
+                    RowLayout {
-                        id: useRecoverableChannels
-                        text: qsTr('Create recoverable channels')
                         Layout.columnSpan: 2
-                        onCheckedChanged: {
+                        Layout.fillWidth: true
-                            if (activeFocus)
+                        Layout.leftMargin: -constants.paddingSmall
-                                Config.useRecoverableChannels = checked
+                        spacing: 0
+                        Switch {
+                            id: useRecoverableChannels
+                            onCheckedChanged: {
+                                if (activeFocus)
+                                    Config.useRecoverableChannels = checked
+                            }
+                        }
+                        Label {
+                            Layout.fillWidth: true
+                            text: qsTr('Create recoverable channels')
+                            wrapMode: Text.Wrap
                         }
                     }
 
-                    Switch {
+                    RowLayout {
-                        id: useFallbackAddress
-                        text: qsTr('Use onchain fallback address for Lightning invoices')
                         Layout.columnSpan: 2
-                        onCheckedChanged: {
+                        Layout.fillWidth: true
-                            if (activeFocus)
+                        Layout.leftMargin: -constants.paddingSmall
-                                Config.useFallbackAddress = checked
+                        spacing: 0
+                        Switch {
+                            id: useFallbackAddress
+                            onCheckedChanged: {
+                                if (activeFocus)
+                                    Config.useFallbackAddress = checked
+                            }
+                        }
+                        Label {
+                            Layout.fillWidth: true
+                            text: qsTr('Use onchain fallback address for Lightning invoices')
+                            wrapMode: Text.Wrap
                         }
                     }
 
-                    Switch {
+                    PrefsHeading {
-                        id: enableDebugLogs
-                        text: qsTr('Enable debug logs (for developers)')
                         Layout.columnSpan: 2
-                        onCheckedChanged: {
+                        text: qsTr('Advanced')
-                            if (activeFocus)
-                                Config.enableDebugLogs = checked
-                        }
-                        enabled: Config.canToggleDebugLogs
                     }
 
+                    RowLayout {
+                        Layout.columnSpan: 2
+                        Layout.fillWidth: true
+                        Layout.leftMargin: -constants.paddingSmall
+                        spacing: 0
+                        Switch {
+                            id: enableDebugLogs
+                            onCheckedChanged: {
+                                if (activeFocus)
+                                    Config.enableDebugLogs = checked
+                            }
+                            enabled: Config.canToggleDebugLogs
+                        }
+                        Label {
+                            Layout.fillWidth: true
+                            text: qsTr('Enable debug logs (for developers)')
+                            wrapMode: Text.Wrap
+                        }
+                    }
                 }
 
             }

electrum/gui/qml/components/controls/PrefsHeading.qml

@@ -0,0 +1,35 @@
+import QtQuick 2.6
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 2.1
+
+RowLayout {
+    id: root
+
+    property string text
+
+    Layout.fillWidth: true
+    Layout.topMargin: constants.paddingXLarge
+
+    spacing: constants.paddingLarge
+
+    Rectangle {
+        color: constants.mutedForeground
+        height: 1
+        Layout.fillWidth: true
+    }
+
+    Label {
+        Layout.leftMargin: constants.paddingMedium
+        Layout.rightMargin: constants.paddingMedium
+        text: root.text
+        color: constants.mutedForeground
+        font.pixelSize: constants.fontSizeLarge
+    }
+
+    Rectangle {
+        color: constants.mutedForeground
+        height: 1
+        Layout.fillWidth: true
+    }
+
+}