From fc212b1dcc880dd45b18fb37eed848532b03bae1 Mon Sep 17 00:00:00 2001 From: Sander van Grieken Date: Fri, 10 Feb 2023 14:14:23 +0100 Subject: [PATCH] qml: improve OpenWalletDialog, PasswordDialog and PasswordField --- .../gui/qml/components/OpenWalletDialog.qml | 96 +++++++++---------- .../gui/qml/components/PasswordDialog.qml | 31 +++--- electrum/gui/qml/components/WalletDetails.qml | 12 +-- .../qml/components/controls/PasswordField.qml | 7 ++ 4 files changed, 79 insertions(+), 67 deletions(-) diff --git a/electrum/gui/qml/components/OpenWalletDialog.qml b/electrum/gui/qml/components/OpenWalletDialog.qml index 45d159a87..3c9424646 100644 --- a/electrum/gui/qml/components/OpenWalletDialog.qml +++ b/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 { - Layout.alignment: Qt.AlignHCenter - text: name - } - Item { - Layout.alignment: Qt.AlignHCenter - Layout.preferredWidth: passwordLayout.width - Layout.preferredHeight: notice.height + ColumnLayout { + id: rootLayout + Layout.fillWidth: true + Layout.leftMargin: constants.paddingXXLarge + Layout.rightMargin: constants.paddingXXLarge + spacing: constants.paddingLarge InfoTextArea { id: notice - text: qsTr("Wallet requires password to unlock") - visible: wallet_db.needsPassword + text: qsTr("Wallet %1 requires password to unlock").arg(name) + // 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 { - Layout.alignment: Qt.AlignHCenter - text: !wallet_db.validPassword && _unlockClicked ? qsTr("Invalid Password") : '' - color: constants.colorError - font.pixelSize: constants.fontSizeLarge + Label { + Layout.alignment: Qt.AlignHCenter + text: !wallet_db.validPassword && _unlockClicked ? qsTr("Invalid Password") : '' + color: constants.colorError + 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: { diff --git a/electrum/gui/qml/components/PasswordDialog.qml b/electrum/gui/qml/components/PasswordDialog.qml index e1a5455aa..276f1a4a3 100644 --- a/electrum/gui/qml/components/PasswordDialog.qml +++ b/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 { - visible: infotext - text: infotext - Layout.margins: constants.paddingMedium - Layout.fillWidth: true - } - - GridLayout { + ColumnLayout { id: password_layout - columns: 2 - Layout.fillWidth: true - Layout.margins: constants.paddingXXLarge + Layout.leftMargin: constants.paddingXXLarge + Layout.rightMargin: 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 } } diff --git a/electrum/gui/qml/components/WalletDetails.qml b/electrum/gui/qml/components/WalletDetails.qml index d9e83fbb1..7ab98b254 100644 --- a/electrum/gui/qml/components/WalletDetails.qml +++ b/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, - { - 'confirmPassword': true, - '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') - } ) + var dialog = app.passwordDialog.createObject(app, { + 'confirmPassword': true, + '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') + }) dialog.accepted.connect(function() { Daemon.currentWallet.set_password(dialog.password) }) diff --git a/electrum/gui/qml/components/controls/PasswordField.qml b/electrum/gui/qml/components/controls/PasswordField.qml index 9318b73c9..019a928ba 100644 --- a/electrum/gui/qml/components/controls/PasswordField.qml +++ b/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 + } + }