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,7 +71,6 @@ ElDialog {
                     unlock()
                 }
             }
-        }
 
             Label {
                 Layout.alignment: Qt.AlignHCenter
@@ -84,17 +79,6 @@ ElDialog {
                 font.pixelSize: constants.fontSizeLarge
             }
 
-        FlatButton {
-            id: unlockButton
-            Layout.alignment: Qt.AlignHCenter
-            visible: wallet_db.needsPassword
-            icon.source: '../../icons/unlock.png'
-            text: qsTr("Unlock")
-            onClicked: {
-                unlock()
-            }
-        }
-
             Label {
                 Layout.alignment: Qt.AlignHCenter
                 visible: wallet_db.requiresSplit
@@ -108,6 +92,19 @@ ElDialog {
                 text: qsTr('Split wallet')
                 onClicked: wallet_db.doSplit()
             }
+        }
+
+        FlatButton {
+            id: unlockButton
+            // Layout.alignment: Qt.AlignHCenter
+            Layout.fillWidth: true
+            visible: wallet_db.needsPassword
+            icon.source: '../../icons/unlock.png'
+            text: qsTr("Unlock")
+            onClicked: {
+                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
 
+        ColumnLayout {
+            id: password_layout
+            Layout.leftMargin: constants.paddingXXLarge
+            Layout.rightMargin: constants.paddingXXLarge
+
             InfoTextArea {
                 visible: infotext
                 text: infotext
-            Layout.margins: constants.paddingMedium
+                Layout.bottomMargin: constants.paddingMedium
                 Layout.fillWidth: true
             }
 
-        GridLayout {
-            id: password_layout
-            columns: 2
-            Layout.fillWidth: true
-            Layout.margins: constants.paddingXXLarge
-
             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,12 +543,10 @@ Pane {
     Connections {
         target: Daemon.currentWallet
         function onRequestNewPassword() { // new wallet password
-            var dialog = app.passwordDialog.createObject(app,
+            var dialog = app.passwordDialog.createObject(app, {
-                    {
                 'confirmPassword': true,
                 'title': qsTr('Enter new password'),
-                        'infotext': qsTr('If you forget your password, you\'ll need to\
+                'infotext': qsTr('If you forget your password, you\'ll need to restore from seed. Please make sure you have your seed stored safely')
-                        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
+    }
+
 }