qml: create ElCombBox and ElRadioButton that automatically word wrap their text element. Fixes #8611

electrum/gui/qml/components/CloseChannelDialog.qml

@@ -109,21 +109,21 @@ ElDialog {
                         id: closetypegroup
                     }
 
-                    RadioButton {
+                    ElRadioButton {
                         id: closetypeCoop
                         ButtonGroup.group: closetypegroup
                         property string closetype: 'cooperative'
                         enabled: !channeldetails.isClosing && channeldetails.canCoopClose
                         text: qsTr('Cooperative close')
                     }
-                    RadioButton {
+                    ElRadioButton {
                         id: closetypeRemoteForce
                         ButtonGroup.group: closetypegroup
                         property string closetype: 'remote_force'
                         enabled: !channeldetails.isClosing && channeldetails.canForceClose
                         text: qsTr('Request Force-close')
                     }
-                    RadioButton {
+                    ElRadioButton {
                         id: closetypeLocalForce
                         ButtonGroup.group: closetypegroup
                         property string closetype: 'local_force'

electrum/gui/qml/components/controls/ElCheckBox.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.6
+import QtQuick.Controls 2.0
+import QtQuick.Controls.Material 2.0
+
+CheckBox {
+    Component.onCompleted: contentItem.wrapMode = Text.Wrap
+}

electrum/gui/qml/components/controls/ElRadioButton.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.6
+import QtQuick.Controls 2.0
+import QtQuick.Controls.Material 2.0
+
+RadioButton {
+    Component.onCompleted: contentItem.wrapMode = Text.Wrap
+}

electrum/gui/qml/components/wizard/WCAutoConnect.qml

@@ -14,12 +14,14 @@ WizardComponent {
         width: parent.width
 
         Label {
+            Layout.fillWidth: true
             text: qsTr('How do you want to connect to a server?')
+            wrapMode: Text.Wrap
         }
 
         InfoTextArea {
-            text: qsTr('Electrum communicates with remote servers to get information about your transactions and addresses. The servers all fulfill the same purpose only differing in hardware. In most cases you simply want to let Electrum pick one at random.  However if you prefer feel free to select a server manually.')
             Layout.fillWidth: true
+            text: qsTr('Electrum communicates with remote servers to get information about your transactions and addresses. The servers all fulfill the same purpose only differing in hardware. In most cases you simply want to let Electrum pick one at random.  However if you prefer feel free to select a server manually.')
         }
 
         ButtonGroup {
@@ -27,13 +29,15 @@ WizardComponent {
             onCheckedButtonChanged: checkIsLast()
         }
 
-        RadioButton {
+        ElRadioButton {
+            Layout.fillWidth: true
             ButtonGroup.group: serverconnectgroup
             property string connecttype: 'auto'
             text: qsTr('Auto connect')
             checked: true
         }
-        RadioButton {
+        ElRadioButton {
+            Layout.fillWidth: true
             ButtonGroup.group: serverconnectgroup
             property string connecttype: 'manual'
             text: qsTr('Select servers manually')

electrum/gui/qml/components/wizard/WCBIP39Refine.qml

@@ -99,23 +99,28 @@ WizardComponent {
             width: parent.width
 
             Label {
+                Layout.fillWidth: true
                 text: qsTr('Choose the type of addresses in your wallet.')
+                wrapMode: Text.Wrap
             }
 
             // standard
-            RadioButton {
+            ElRadioButton {
+                Layout.fillWidth: true
                 ButtonGroup.group: scripttypegroup
                 property string scripttype: 'p2pkh'
                 text: qsTr('legacy (p2pkh)')
                 visible: !isMultisig
             }
-            RadioButton {
+            ElRadioButton {
+                Layout.fillWidth: true
                 ButtonGroup.group: scripttypegroup
                 property string scripttype: 'p2wpkh-p2sh'
                 text: qsTr('wrapped segwit (p2wpkh-p2sh)')
                 visible: !isMultisig
             }
-            RadioButton {
+            ElRadioButton {
+                Layout.fillWidth: true
                 ButtonGroup.group: scripttypegroup
                 property string scripttype: 'p2wpkh'
                 checked: !isMultisig
@@ -124,7 +129,8 @@ WizardComponent {
             }
 
             // multisig
-            RadioButton {
+            ElRadioButton {
+                Layout.fillWidth: true
                 ButtonGroup.group: scripttypegroup
                 property string scripttype: 'p2sh'
                 text: qsTr('legacy multisig (p2sh)')
@@ -132,7 +138,8 @@ WizardComponent {
                 enabled: !cosigner || wizard_data['script_type'] == 'p2sh'
                 checked: cosigner ? wizard_data['script_type'] == 'p2sh' : false
             }
-            RadioButton {
+            ElRadioButton {
+                Layout.fillWidth: true
                 ButtonGroup.group: scripttypegroup
                 property string scripttype: 'p2wsh-p2sh'
                 text: qsTr('p2sh-segwit multisig (p2wsh-p2sh)')
@@ -140,7 +147,8 @@ WizardComponent {
                 enabled: !cosigner || wizard_data['script_type'] == 'p2wsh-p2sh'
                 checked: cosigner ? wizard_data['script_type'] == 'p2wsh-p2sh' : false
             }
-            RadioButton {
+            ElRadioButton {
+                Layout.fillWidth: true
                 ButtonGroup.group: scripttypegroup
                 property string scripttype: 'p2wsh'
                 text: qsTr('native segwit multisig (p2wsh)')

electrum/gui/qml/components/wizard/WCCosignerKeystore.qml

@@ -78,13 +78,13 @@ WizardComponent {
             text: qsTr('Add cosigner #%1 of %2 to your multi-sig wallet').arg(cosigner).arg(participants)
             wrapMode: Text.Wrap
         }
-        RadioButton {
+        ElRadioButton {
             ButtonGroup.group: keystoregroup
             property string keystoretype: 'key'
             checked: true
             text: qsTr('Cosigner key')
         }
-        RadioButton {
+        ElRadioButton {
             ButtonGroup.group: keystoregroup
             property string keystoretype: 'seed'
             text: qsTr('Cosigner seed')

electrum/gui/qml/components/wizard/WCCreateSeed.qml

@@ -53,6 +53,8 @@ WizardComponent {
 
             Label {
                 Layout.topMargin: constants.paddingMedium
+                Layout.fillWidth: true
+                wrapMode: Text.Wrap
                 text: qsTr('Your wallet generation seed is:')
             }
 
@@ -68,8 +70,9 @@ WizardComponent {
                 }
             }
 
-            CheckBox {
+            ElCheckBox {
                 id: extendcb
+                Layout.fillWidth: true
                 text: qsTr('Extend seed with custom words')
             }
 

electrum/gui/qml/components/wizard/WCHaveSeed.qml

@@ -209,12 +209,14 @@ WizardComponent {
                 }
             }
 
-            CheckBox {
+            ElCheckBox {
                 id: extendcb
                 Layout.columnSpan: 2
+                Layout.fillWidth: true
                 text: qsTr('Extend seed with custom words')
                 onCheckedChanged: startValidationTimer()
             }
+
             TextField {
                 id: customwordstext
                 visible: extendcb.checked

electrum/gui/qml/components/wizard/WCKeystoreType.qml

@@ -2,6 +2,8 @@ import QtQuick 2.6
 import QtQuick.Layouts 1.0
 import QtQuick.Controls 2.1
 
+import "../controls"
+
 WizardComponent {
     valid: keystoregroup.checkedButton !== null
 
@@ -21,23 +23,27 @@ WizardComponent {
             wrapMode: Text.Wrap
             text: qsTr('Do you want to create a new seed, restore using an existing seed, or restore from master key?')
         }
-        RadioButton {
+        ElRadioButton {
+            Layout.fillWidth: true
             ButtonGroup.group: keystoregroup
             property string keystoretype: 'createseed'
             checked: true
             text: qsTr('Create a new seed')
         }
-        RadioButton {
+        ElRadioButton {
+            Layout.fillWidth: true
             ButtonGroup.group: keystoregroup
             property string keystoretype: 'haveseed'
             text: qsTr('I already have a seed')
         }
-        RadioButton {
+        ElRadioButton {
+            Layout.fillWidth: true
             ButtonGroup.group: keystoregroup
             property string keystoretype: 'masterkey'
             text: qsTr('Use a master key')
         }
-        RadioButton {
+        ElRadioButton {
+            Layout.fillWidth: true
             enabled: false
             visible: false
             ButtonGroup.group: keystoregroup

electrum/gui/qml/components/wizard/WCProxyAsk.qml

@@ -26,12 +26,12 @@ WizardComponent {
             onCheckedButtonChanged: checkIsLast()
         }
 
-        RadioButton {
+        ElRadioButton {
             ButtonGroup.group: wantproxygroup
             property bool wantproxy: true
             text: qsTr('Yes')
         }
-        RadioButton {
+        ElRadioButton {
             ButtonGroup.group: wantproxygroup
             property bool wantproxy: false
             text: qsTr('No')

electrum/gui/qml/components/wizard/WCWalletType.qml

@@ -2,6 +2,8 @@ import QtQuick 2.6
 import QtQuick.Layouts 1.0
 import QtQuick.Controls 2.1
 
+import "../controls"
+
 WizardComponent {
     valid: wallettypegroup.checkedButton !== null
 
@@ -26,23 +28,27 @@ WizardComponent {
             text: qsTr('What kind of wallet do you want to create?')
             wrapMode: Text.Wrap
         }
-        RadioButton {
+        ElRadioButton {
+            Layout.fillWidth: true
             ButtonGroup.group: wallettypegroup
             property string wallettype: 'standard'
             checked: true
             text: qsTr('Standard Wallet')
         }
-        RadioButton {
+        ElRadioButton {
+            Layout.fillWidth: true
             ButtonGroup.group: wallettypegroup
             property string wallettype: '2fa'
             text: qsTr('Wallet with two-factor authentication')
         }
-        RadioButton {
+        ElRadioButton {
+            Layout.fillWidth: true
             ButtonGroup.group: wallettypegroup
             property string wallettype: 'multisig'
             text: qsTr('Multi-signature wallet')
         }
-        RadioButton {
+        ElRadioButton {
+            Layout.fillWidth: true
             ButtonGroup.group: wallettypegroup
             property string wallettype: 'imported'
             text: qsTr('Import Bitcoin addresses or private keys')