qml: use custom combobox so we have more control over cropping and styling

enable lightning routing choice combobox

electrum/gui/qml/components/Preferences.qml

@@ -5,27 +5,30 @@ import QtQuick.Controls.Material 2.0
 
 import org.electrum 1.0
 
+import "controls"
+
 Pane {
     id: preferences
 
     property string title: qsTr("Preferences")
 
-    ColumnLayout {
-        anchors.fill: parent
+    property var _baseunits: ['BTC','mBTC','bits','sat']
 
     Flickable {
-            Layout.fillHeight: true
-            Layout.fillWidth: true
+        anchors.fill: parent
+        contentHeight: rootLayout.height
+        interactive: height < contentHeight
 
         GridLayout {
             id: rootLayout
             columns: 2
+            width: parent.width
 
             Label {
                 text: qsTr('Language')
             }
 
-                ComboBox {
+            ElComboBox {
                 id: language
                 enabled: false
             }
@@ -34,9 +37,9 @@ Pane {
                 text: qsTr('Base unit')
             }
 
-                ComboBox {
+            ElComboBox {
                 id: baseUnit
-                    model: ['BTC','mBTC','bits','sat']
+                model: _baseunits
                 onCurrentValueChanged: {
                     if (activeFocus)
                         Config.baseUnit = currentValue
@@ -69,7 +72,7 @@ Pane {
                 }
             }
 
-                ComboBox {
+            ElComboBox {
                 id: currencies
                 model: Daemon.fx.currencies
                 enabled: Daemon.fx.enabled
@@ -95,7 +98,7 @@ Pane {
                 enabled: Daemon.fx.enabled
             }
 
-                ComboBox {
+            ElComboBox {
                 id: rateSources
                 enabled: Daemon.fx.enabled
                 model: Daemon.fx.rateSources
@@ -165,18 +168,21 @@ Pane {
                 text: qsTr('Lightning Routing')
             }
 
-                ComboBox {
+            ElComboBox {
                 id: lnRoutingType
+                enabled: Daemon.currentWallet && Daemon.currentWallet.isLightning
+
                 valueRole: 'key'
                 textRole: 'label'
-                    enabled: Daemon.currentWallet != null && Daemon.currentWallet.isLightning && false
                 model: ListModel {
                     ListElement { key: 'gossip'; label: qsTr('Gossip') }
                     ListElement { key: 'trampoline'; label: qsTr('Trampoline') }
                 }
+                onCurrentValueChanged: {
+                    if (activeFocus)
+                        Config.useGossip = currentValue == 'gossip'
                 }
             }
-
         }
 
     }
@@ -187,7 +193,7 @@ Pane {
     }
 
     Component.onCompleted: {
-        baseUnit.currentIndex = ['BTC','mBTC','bits','sat'].indexOf(Config.baseUnit)
+        baseUnit.currentIndex = _baseunits.indexOf(Config.baseUnit)
         thousands.checked = Config.thousandsSeparator
         currencies.currentIndex = currencies.indexOfValue(Daemon.fx.fiatCurrency)
         historicRates.checked = Daemon.fx.historicRates

electrum/gui/qml/components/Receive.qml

@@ -71,7 +71,7 @@ Pane {
             Layout.fillWidth: false
         }
 
-        ComboBox {
+        ElComboBox {
             id: expires
             Layout.columnSpan: 2
 
@@ -91,13 +91,6 @@ Pane {
                     expires.currentIndex = 0
                 }
             }
-
-            // redefine contentItem, as the default crops the widest item
-            contentItem: Label {
-                text: expires.currentText
-                padding: constants.paddingLarge
-                font.pixelSize: constants.fontSizeMedium
-            }
         }
 
         Item { width: 1; height: 1; Layout.fillWidth: true }

electrum/gui/qml/components/controls/ElComboBox.qml

@@ -0,0 +1,14 @@
+import QtQuick.Controls 2.0
+
+ComboBox {
+    id: cb
+    // make combobox implicit width a multiple of 32, so it aligns with others
+    implicitWidth: Math.ceil(contentItem.implicitWidth/32)*32 + constants.paddingXXLarge
+    // redefine contentItem, as the default crops the text easily
+    contentItem: Label {
+        text: cb.currentText
+        padding: constants.paddingLarge
+        rightPadding: constants.paddingXXLarge
+        font.pixelSize: constants.fontSizeMedium
+    }
+}