qml: create wallet details drawer

electrum/gui/qml/components/WalletDetails.qml

@@ -0,0 +1,162 @@
+import QtQuick 2.6
+import QtQuick.Layouts 1.5
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.0
+
+import org.electrum 1.0
+
+import "controls"
+
+Item {
+    id: root
+    clip: true
+    Layout.fillWidth: true
+    implicitHeight: 0
+
+    function open() {
+        state = 'opened'
+    }
+    function close() {
+        state = ''
+    }
+    function toggle() {
+        if (state == 'opened')
+            state = ''
+        else
+            state = 'opened'
+    }
+
+    states: [
+        State {
+            name: 'opened'
+            PropertyChanges { target: root; implicitHeight: detailsPane.height }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: ''
+            to: 'opened'
+            NumberAnimation { target: root; properties: 'implicitHeight'; duration: 200 }
+        },
+        Transition {
+            from: 'opened'
+            to: ''
+            NumberAnimation { target: root; properties: 'implicitHeight'; duration: 200 }
+        }
+    ]
+
+    Pane {
+        id: detailsPane
+        width: parent.width
+        anchors.bottom: parent.bottom
+        padding: 0
+        background: Rectangle {
+            color: Material.dialogColor
+        }
+
+        ColumnLayout {
+            width: parent.width
+
+            GridLayout {
+                id: detailsLayout
+                visible: Daemon.currentWallet
+                rowSpacing: constants.paddingSmall
+                Layout.preferredWidth: parent.width
+                Layout.margins: constants.paddingXLarge
+
+                columns: 2
+
+                // Label {
+                //     text: qsTr('Wallet')
+                //     color: Material.accentColor
+                //     font.pixelSize: constants.fontSizeLarge
+                // }
+                Image {
+                    source: '../../icons/wallet.png'
+                    Layout.preferredWidth: constants.iconSizeLarge
+                    Layout.preferredHeight: constants.iconSizeLarge
+                }
+                Label {
+                    Layout.fillWidth: true
+                    text: Daemon.currentWallet.name;
+                    font.bold: true;
+                    font.pixelSize: constants.fontSizeXLarge
+                }
+
+                RowLayout {
+                    Layout.columnSpan: 2
+                    Tag {
+                        text: Daemon.currentWallet.walletType
+                        font.pixelSize: constants.fontSizeSmall
+                        font.bold: true
+                        iconSource: '../../../icons/wallet.png'
+                    }
+                    Tag {
+                        text: Daemon.currentWallet.txinType
+                        font.pixelSize: constants.fontSizeSmall
+                        font.bold: true
+                    }
+                    Tag {
+                        text: qsTr('HD')
+                        visible: Daemon.currentWallet.isDeterministic
+                        font.pixelSize: constants.fontSizeSmall
+                        font.bold: true
+                    }
+                    Tag {
+                        text: qsTr('Watch only')
+                        visible: Daemon.currentWallet.isWatchOnly
+                        font.pixelSize: constants.fontSizeSmall
+                        font.bold: true
+                        iconSource: '../../../icons/eye1.png'
+                    }
+                    Tag {
+                        text: qsTr('Encrypted')
+                        visible: Daemon.currentWallet.isEncrypted
+                        font.pixelSize: constants.fontSizeSmall
+                        font.bold: true
+                        iconSource: '../../../icons/key.png'
+                    }
+                    Tag {
+                        text: qsTr('HW')
+                        visible: Daemon.currentWallet.isHardware
+                        font.pixelSize: constants.fontSizeSmall
+                        font.bold: true
+                        iconSource: '../../../icons/seed.png'
+                    }
+                    Tag {
+                        text: qsTr('Lightning')
+                        visible: Daemon.currentWallet.isLightning
+                        font.pixelSize: constants.fontSizeSmall
+                        font.bold: true
+                        iconSource: '../../../icons/lightning.png'
+                    }
+                    Tag {
+                        text: qsTr('Seed')
+                        visible: Daemon.currentWallet.hasSeed
+                        font.pixelSize: constants.fontSizeSmall
+                        font.bold: true
+                        iconSource: '../../../icons/seed.png'
+                    }
+                }
+
+           }
+
+            RowLayout {
+                Layout.fillWidth: true
+                FlatButton {
+                    text: qsTr('More details')
+                    Layout.fillWidth: true
+                    Layout.preferredWidth: 1
+                }
+                FlatButton {
+                    text: qsTr('Switch wallet')
+                    Layout.fillWidth: true
+                    icon.source: '../../icons/file.png'
+                    Layout.preferredWidth: 1
+                }
+            }
+        }
+    }
+
+}

electrum/gui/qml/components/controls/Tag.qml

@@ -4,9 +4,10 @@ import QtQuick.Controls 2.3
 import QtQuick.Controls.Material 2.0
 
 Rectangle {
-    radius: constants.paddingXSmall
+    id: root
-    width: layout.width
+    radius: height/2
-    height: layout.height
+    implicitWidth: layout.implicitWidth
+    implicitHeight: layout.implicitHeight
     color: 'transparent'
     border.color: Material.accentColor
 
@@ -14,8 +15,40 @@ Rectangle {
     property alias font: label.font
     property alias labelcolor: label.color
 
+    property string iconSource
+
     RowLayout {
         id: layout
+        spacing: 0
+
+        Item {
+            // spacer
+            visible: iconSource
+            Layout.preferredWidth: constants.paddingSmall
+            Layout.preferredHeight: 1
+        }
+
+        Image {
+            visible: iconSource
+            Layout.preferredWidth: constants.iconSizeSmall
+            Layout.preferredHeight: constants.iconSizeSmall
+            source: iconSource
+        }
+
+        Item {
+            // spacer
+            visible: iconSource
+            Layout.preferredWidth: constants.paddingXXSmall
+            Layout.preferredHeight: 1
+        }
+
+        Rectangle {
+            visible: iconSource
+            Layout.preferredHeight: root.height
+            Layout.preferredWidth: 1
+            color: root.color
+            border.color: root.border.color
+        }
 
         Label {
             id: label
@@ -24,6 +57,7 @@ Rectangle {
             Layout.topMargin: constants.paddingXXSmall
             Layout.bottomMargin: constants.paddingXXSmall
             font.pixelSize: constants.fontSizeXSmall
+            color: root.border.color
         }
     }
 }

electrum/gui/qml/components/main.qml

@@ -32,8 +32,12 @@ ApplicationWindow
     header: ToolBar {
         id: toolbar
 
+        ColumnLayout {
+            spacing: 0
+
             RowLayout {
-            anchors.fill: parent
+                id: toolbarTopLayout
+                Layout.preferredWidth: app.width
 
                 ToolButton {
                     text: qsTr("‹")
@@ -56,6 +60,10 @@ ApplicationWindow
                     Layout.fillWidth: true
                     font.pixelSize: constants.fontSizeMedium
                     font.bold: true
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: walletDetails.toggle()
+                    }
                 }
 
                 Item {
@@ -111,6 +119,12 @@ ApplicationWindow
                     }
                 }
             }
+
+            WalletDetails {
+                id: walletDetails
+                Layout.preferredWidth: parent.width
+            }
+        }
     }
 
     StackView {