qml: improve OpenWalletDialog, PasswordDialog and PasswordField

electrum/gui/qml/components/OpenWalletDialog.qml

@@ -10,16 +10,14 @@ import "controls"
 ElDialog {
     id: openwalletdialog
 
-    width: parent.width * 4/5
-
-    anchors.centerIn: parent
-
-    title: qsTr("Open Wallet")
-    iconSource: '../../../icons/wallet.png'
-
     property string name
     property string path
 
+    property bool _unlockClicked: false
+
+    title: qsTr('Open Wallet')
+    iconSource: Qt.resolvedUrl('../../icons/wallet.png')
+
     modal: true
     parent: Overlay.overlay
     Overlay.modal: Rectangle {
@@ -28,45 +26,43 @@ ElDialog {
 
     focus: true
 
-    property bool _unlockClicked: false
+    width: parent.width * 4/5
+    anchors.centerIn: parent
+
+    padding: 0
 
     ColumnLayout {
-        id: rootLayout
+        spacing: 0
         width: parent.width
-        spacing: constants.paddingLarge
 
-        Label {
+        ColumnLayout {
-            Layout.alignment: Qt.AlignHCenter
+            id: rootLayout
-            text: name
+            Layout.fillWidth: true
-        }
+            Layout.leftMargin: constants.paddingXXLarge
-
+            Layout.rightMargin: constants.paddingXXLarge
-        Item {
+            spacing: constants.paddingLarge
-            Layout.alignment: Qt.AlignHCenter
-            Layout.preferredWidth: passwordLayout.width
-            Layout.preferredHeight: notice.height
 
             InfoTextArea {
                 id: notice
-                text: qsTr("Wallet requires password to unlock")
+                text: qsTr("Wallet <b>%1</b> requires password to unlock").arg(name)
-                visible: wallet_db.needsPassword
+                // visible: false //wallet_db.needsPassword
                 iconStyle: InfoTextArea.IconStyle.Warn
-                width: parent.width
+                Layout.fillWidth: true
             }
-        }
 
-        RowLayout {
-            id: passwordLayout
-            Layout.alignment: Qt.AlignHCenter
             Label {
                 text: qsTr('Password')
                 visible: wallet_db.needsPassword
                 Layout.fillWidth: true
+                color: Material.accentColor
             }
 
             PasswordField {
                 id: password
-                visible: wallet_db.needsPassword
                 Layout.fillWidth: true
+                Layout.leftMargin: constants.paddingXLarge
+                visible: wallet_db.needsPassword
+
                 onTextChanged: {
                     unlockButton.enabled = true
                     _unlockClicked = false
@@ -75,18 +71,33 @@ ElDialog {
                     unlock()
                 }
             }
-        }
 
-        Label {
+            Label {
-            Layout.alignment: Qt.AlignHCenter
+                Layout.alignment: Qt.AlignHCenter
-            text: !wallet_db.validPassword && _unlockClicked ? qsTr("Invalid Password") : ''
+                text: !wallet_db.validPassword && _unlockClicked ? qsTr("Invalid Password") : ''
-            color: constants.colorError
+                color: constants.colorError
-            font.pixelSize: constants.fontSizeLarge
+                font.pixelSize: constants.fontSizeLarge
+            }
+
+            Label {
+                Layout.alignment: Qt.AlignHCenter
+                visible: wallet_db.requiresSplit
+                text: qsTr('Wallet requires splitting')
+                font.pixelSize: constants.fontSizeLarge
+            }
+
+            FlatButton {
+                Layout.alignment: Qt.AlignHCenter
+                visible: wallet_db.requiresSplit
+                text: qsTr('Split wallet')
+                onClicked: wallet_db.doSplit()
+            }
         }
 
         FlatButton {
             id: unlockButton
-            Layout.alignment: Qt.AlignHCenter
+            // Layout.alignment: Qt.AlignHCenter
+            Layout.fillWidth: true
             visible: wallet_db.needsPassword
             icon.source: '../../icons/unlock.png'
             text: qsTr("Unlock")
@@ -95,20 +106,6 @@ ElDialog {
             }
         }
 
-        Label {
-            Layout.alignment: Qt.AlignHCenter
-            visible: wallet_db.requiresSplit
-            text: qsTr('Wallet requires splitting')
-            font.pixelSize: constants.fontSizeLarge
-        }
-
-        FlatButton {
-            Layout.alignment: Qt.AlignHCenter
-            visible: wallet_db.requiresSplit
-            text: qsTr('Split wallet')
-            onClicked: wallet_db.doSplit()
-        }
-
     }
 
     function unlock() {
@@ -135,6 +132,9 @@ ElDialog {
         onInvalidPassword: {
             password.tf.forceActiveFocus()
         }
+        onNeedsPasswordChanged: {
+            notice.visible = needsPassword
+        }
     }
 
     Component.onCompleted: {

electrum/gui/qml/components/PasswordDialog.qml

@@ -11,7 +11,7 @@ ElDialog {
     id: passworddialog
 
     title: qsTr("Enter Password")
-    iconSource: '../../../icons/lock.png'
+    iconSource: Qt.resolvedUrl('../../icons/lock.png')
 
     property bool confirmPassword: false
     property string password
@@ -21,6 +21,7 @@ ElDialog {
     modal: true
 
     anchors.centerIn: parent
+    width: parent.width * 4/5
     padding: 0
 
     Overlay.modal: Rectangle {
@@ -28,37 +29,43 @@ ElDialog {
     }
 
     ColumnLayout {
+        id: rootLayout
         width: parent.width
         spacing: 0
 
-        InfoTextArea {
+        ColumnLayout {
-            visible: infotext
-            text: infotext
-            Layout.margins: constants.paddingMedium
-            Layout.fillWidth: true
-        }
-
-        GridLayout {
             id: password_layout
-            columns: 2
+            Layout.leftMargin: constants.paddingXXLarge
-            Layout.fillWidth: true
+            Layout.rightMargin: constants.paddingXXLarge
-            Layout.margins: constants.paddingXXLarge
+
+            InfoTextArea {
+                visible: infotext
+                text: infotext
+                Layout.bottomMargin: constants.paddingMedium
+                Layout.fillWidth: true
+            }
 
             Label {
+                Layout.fillWidth: true
                 text: qsTr('Password')
+                color: Material.accentColor
             }
 
             PasswordField {
                 id: pw_1
+                Layout.leftMargin: constants.paddingXLarge
             }
 
             Label {
+                Layout.fillWidth: true
                 text: qsTr('Password (again)')
                 visible: confirmPassword
+                color: Material.accentColor
             }
 
             PasswordField {
                 id: pw_2
+                Layout.leftMargin: constants.paddingXLarge
                 visible: confirmPassword
             }
         }

electrum/gui/qml/components/WalletDetails.qml

@@ -543,13 +543,11 @@ Pane {
     Connections {
         target: Daemon.currentWallet
         function onRequestNewPassword() { // new wallet password
-            var dialog = app.passwordDialog.createObject(app,
+            var dialog = app.passwordDialog.createObject(app, {
-                    {
+                'confirmPassword': true,
-                        'confirmPassword': true,
+                'title': qsTr('Enter new password'),
-                        'title': qsTr('Enter new password'),
+                'infotext': qsTr('If you forget your password, you\'ll need to restore from seed. Please make sure you have your seed stored safely')
-                        'infotext': qsTr('If you forget your password, you\'ll need to\
+            })
-                        restore from seed. Please make sure you have your seed stored safely')
-                    } )
             dialog.accepted.connect(function() {
                 Daemon.currentWallet.set_password(dialog.password)
             })

electrum/gui/qml/components/controls/PasswordField.qml

@@ -13,6 +13,7 @@ RowLayout {
         echoMode: TextInput.Password
         inputMethodHints: Qt.ImhSensitiveData
         Layout.fillWidth: true
+        Layout.minimumWidth: fontMetrics.advanceWidth('X') * 16
         onAccepted: root.accepted()
     }
     ToolButton {
@@ -21,4 +22,10 @@ RowLayout {
             password_tf.echoMode = password_tf.echoMode == TextInput.Password ? TextInput.Normal : TextInput.Password
         }
     }
+
+    FontMetrics {
+        id: fontMetrics
+        font: password_tf.font
+    }
+
 }