qml: OpenWalletDialog rework

electrum/gui/qml/components/Constants.qml

@@ -28,7 +28,7 @@ Item {
     property color colorDebit: "#ffff8080"
     property color mutedForeground: 'gray' //Qt.lighter(Material.background, 2)
     property color colorMine: "yellow"
-
+    property color colorError: '#ffff8080'
     property color colorLightningLocal: "blue"
     property color colorLightningRemote: "yellow"
 

electrum/gui/qml/components/OpenWalletDialog.qml

@@ -1,51 +1,91 @@
 import QtQuick 2.6
 import QtQuick.Layouts 1.0
-import QtQuick.Controls 2.1
+import QtQuick.Controls 2.3
+import QtQuick.Controls.Material 2.0
 
 import org.electrum 1.0
 
 import "controls"
 
-Pane {
+ElDialog {
     id: openwalletdialog
-    
+
-    property string title: qsTr("Open Wallet")
+    width: parent.width
+    height: parent.height
+
+    title: qsTr("Open Wallet")
 
     property string name
     property string path
 
+    standardButtons: Dialog.Cancel
+
+    modal: true
+    parent: Overlay.overlay
+    Overlay.modal: Rectangle {
+        color: "#aa000000"
+    }
+
+    focus: true
+
     property bool _unlockClicked: false
 
-    GridLayout {
+    header: GridLayout {
         columns: 2
-        width: parent.width
+        rowSpacing: 0
+
+        Image {
+            source: "../../icons/wallet.png"
+            Layout.preferredWidth: constants.iconSizeXLarge
+            Layout.preferredHeight: constants.iconSizeXLarge
+            Layout.leftMargin: constants.paddingMedium
+            Layout.topMargin: constants.paddingMedium
+            Layout.bottomMargin: constants.paddingMedium
+        }
 
         Label {
+            text: title
+            Layout.fillWidth: true
+            topPadding: constants.paddingXLarge
+            bottomPadding: constants.paddingXLarge
+            font.bold: true
+            font.pixelSize: constants.fontSizeMedium
+        }
+
+        Rectangle {
             Layout.columnSpan: 2
+            Layout.fillWidth: true
+            Layout.leftMargin: constants.paddingXXSmall
+            Layout.rightMargin: constants.paddingXXSmall
+            height: 1
+            color: Qt.rgba(0,0,0,0.5)
+        }
+    }
+
+    ColumnLayout {
+        width: parent.width
+        spacing: constants.paddingLarge
+
+        Label {
             Layout.alignment: Qt.AlignHCenter
             text: name
         }
 
-        MessagePane {
+        Item {
-            Layout.columnSpan: 2
             Layout.alignment: Qt.AlignHCenter
-            text: qsTr("Wallet requires password to unlock")
+            Layout.preferredWidth: passwordLayout.width
-            visible: wallet_db.needsPassword
+            Layout.preferredHeight: notice.height
-            width: parent.width * 2/3
+            InfoTextArea {
-            warning: true
+                id: notice
-        }
+                text: qsTr("Wallet requires password to unlock")
-
+                visible: wallet_db.needsPassword
-        MessagePane {
+                iconStyle: InfoTextArea.IconStyle.Warn
-            Layout.columnSpan: 2
+                width: parent.width
-            Layout.alignment: Qt.AlignHCenter
+            }
-            text: qsTr("Invalid Password")
-            visible: !wallet_db.validPassword && _unlockClicked
-            width: parent.width * 2/3
-            error: true
         }
 
         RowLayout {
-            Layout.columnSpan: 2
+            id: passwordLayout
             Layout.alignment: Qt.AlignHCenter
             Layout.maximumWidth: parent.width * 2/3
             Label {
@@ -68,6 +108,14 @@ Pane {
             }
         }
 
+        Label {
+            Layout.columnSpan: 2
+            Layout.alignment: Qt.AlignHCenter
+            text: !wallet_db.validPassword && _unlockClicked ? qsTr("Invalid Password") : ''
+            color: constants.colorError
+            font.pixelSize: constants.fontSizeLarge
+        }
+
         Button {
             id: unlockButton
             Layout.columnSpan: 2
@@ -100,7 +148,7 @@ Pane {
             text: qsTr('Split wallet')
             onClicked: wallet_db.doSplit()
         }
-        
+
         BusyIndicator {
             id: busy
             running: false
@@ -114,31 +162,29 @@ Pane {
         _unlockClicked = true
         wallet_db.password = password.text
         wallet_db.verify()
-        openwalletdialog.forceActiveFocus()
     }
-    
+
     WalletDB {
         id: wallet_db
         path: openwalletdialog.path
         onSplitFinished: {
             // if wallet needed splitting, we close the pane and refresh the wallet list
             Daemon.availableWallets.reload()
-            app.stack.pop()
+            openwalletdialog.close()
         }
         onReadyChanged: {
             if (ready) {
                 busy.running = true
                 Daemon.load_wallet(openwalletdialog.path, password.text)
-                app.stack.pop(null)
+                openwalletdialog.close()
             }
         }
         onInvalidPassword: {
-            password.forceActiveFocus()
+            password.tf.forceActiveFocus()
         }
     }
-    
+
     Component.onCompleted: {
         wallet_db.verify()
-        password.forceActiveFocus()
     }
 }

electrum/gui/qml/components/controls/MessagePane.qml

@@ -1,30 +0,0 @@
-import QtQuick 2.6
-import QtQuick.Layouts 1.0
-import QtQuick.Controls 2.1
-import QtQuick.Controls.Material 2.0
-
-Rectangle {
-    id: item
-
-    property bool warning
-    property bool error
-    property string text
-
-    color: "transparent"
-    border.color: error ? "red" : warning ? "yellow" : Material.accentColor
-    border.width: 1
-    height: text.height + 2* 16
-    radius: 8
-
-    Text {
-        id: text
-        width: item.width - 2* 16
-        x: 16
-        y: 16
-
-        color: item.border.color
-        text: item.text
-        wrapMode: Text.Wrap
-    }
-
-}

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

@@ -5,7 +5,7 @@ import QtQuick.Controls 2.1
 RowLayout {
     id: root
     property alias text: password_tf.text
-
+    property alias tf: password_tf
     signal accepted
 
     TextField {

electrum/gui/qml/components/main.qml

@@ -194,6 +194,14 @@ ApplicationWindow
         }
     }
 
+    property alias openWalletDialog: _openWalletDialog
+    Component {
+        id: _openWalletDialog
+        OpenWalletDialog {
+            onClosed: destroy()
+        }
+    }
+
     property alias channelOpenProgressDialog: _channelOpenProgressDialog
     ChannelOpenProgressDialog {
         id: _channelOpenProgressDialog
@@ -254,7 +262,8 @@ ApplicationWindow
         target: Daemon
         function onWalletRequiresPassword() {
             console.log('wallet requires password')
-            app.stack.push(Qt.resolvedUrl("OpenWallet.qml"), {"path": Daemon.path})
+            var dialog = openWalletDialog.createObject(app, { path: Daemon.path })
+            dialog.open()
         }
         function onWalletOpenError(error) {
             console.log('wallet open error')