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,83 +32,97 @@ ApplicationWindow
     header: ToolBar {
         id: toolbar
 
-        RowLayout {
+        ColumnLayout {
-            anchors.fill: parent
+            spacing: 0
 
-            ToolButton {
+            RowLayout {
-                text: qsTr("‹")
+                id: toolbarTopLayout
-                enabled: stack.depth > 1
+                Layout.preferredWidth: app.width
-                onClicked: stack.pop()
-            }
 
-            Image {
+                ToolButton {
-                Layout.alignment: Qt.AlignVCenter
+                    text: qsTr("‹")
-                Layout.preferredWidth: constants.iconSizeLarge
+                    enabled: stack.depth > 1
-                Layout.preferredHeight: constants.iconSizeLarge
+                    onClicked: stack.pop()
-                source: "../../icons/electrum.png"
+                }
-            }
 
-            Label {
+                Image {
-                text: stack.currentItem.title
+                    Layout.alignment: Qt.AlignVCenter
-                elide: Label.ElideRight
+                    Layout.preferredWidth: constants.iconSizeLarge
-                horizontalAlignment: Qt.AlignHCenter
+                    Layout.preferredHeight: constants.iconSizeLarge
-                verticalAlignment: Qt.AlignVCenter
+                    source: "../../icons/electrum.png"
-                Layout.fillWidth: true
+                }
-                font.pixelSize: constants.fontSizeMedium
-                font.bold: true
-            }
 
-            Item {
+                Label {
-                visible: Network.isTestNet
+                    text: stack.currentItem.title
-                width: column.width
+                    elide: Label.ElideRight
-                height: column.height
+                    horizontalAlignment: Qt.AlignHCenter
-
+                    verticalAlignment: Qt.AlignVCenter
-                ColumnLayout {
+                    Layout.fillWidth: true
-                    id: column
+                    font.pixelSize: constants.fontSizeMedium
-                    spacing: 0
+                    font.bold: true
-                    Image {
+                    MouseArea {
-                        Layout.alignment: Qt.AlignHCenter
+                        anchors.fill: parent
-                        Layout.preferredWidth: constants.iconSizeSmall
+                        onClicked: walletDetails.toggle()
-                        Layout.preferredHeight: constants.iconSizeSmall
-                        source: "../../icons/info.png"
                     }
+                }
 
-                    Label {
+                Item {
-                        id: networkNameLabel
+                    visible: Network.isTestNet
-                        text: Network.networkName
+                    width: column.width
-                        color: Material.accentColor
+                    height: column.height
-                        font.pixelSize: constants.fontSizeXSmall
+
+                    ColumnLayout {
+                        id: column
+                        spacing: 0
+                        Image {
+                            Layout.alignment: Qt.AlignHCenter
+                            Layout.preferredWidth: constants.iconSizeSmall
+                            Layout.preferredHeight: constants.iconSizeSmall
+                            source: "../../icons/info.png"
+                        }
+
+                        Label {
+                            id: networkNameLabel
+                            text: Network.networkName
+                            color: Material.accentColor
+                            font.pixelSize: constants.fontSizeXSmall
+                        }
+                    }
+                }
+
+                Image {
+                    Layout.preferredWidth: constants.iconSizeSmall
+                    Layout.preferredHeight: constants.iconSizeSmall
+                    visible: Daemon.currentWallet && Daemon.currentWallet.isWatchOnly
+                    source: '../../icons/eye1.png'
+                    scale: 1.5
+                }
+
+                NetworkStatusIndicator { }
+
+                Rectangle {
+                    color: 'transparent'
+                    Layout.preferredWidth: constants.paddingSmall
+                    height: 1
+                    visible: !menuButton.visible
+                }
+
+                ToolButton {
+                    id: menuButton
+                    enabled: stack.currentItem && stack.currentItem.menu ? stack.currentItem.menu.count > 0 : false
+                    text: enabled ? qsTr("≡") : ''
+                    font.pixelSize: constants.fontSizeXLarge
+                    onClicked: {
+                        stack.currentItem.menu.open()
+                        // position the menu to the right
+                        stack.currentItem.menu.x = toolbar.width - stack.currentItem.menu.width
                     }
                 }
             }
 
-            Image {
+            WalletDetails {
-                Layout.preferredWidth: constants.iconSizeSmall
+                id: walletDetails
-                Layout.preferredHeight: constants.iconSizeSmall
+                Layout.preferredWidth: parent.width
-                visible: Daemon.currentWallet && Daemon.currentWallet.isWatchOnly
-                source: '../../icons/eye1.png'
-                scale: 1.5
-            }
-
-            NetworkStatusIndicator { }
-
-            Rectangle {
-                color: 'transparent'
-                Layout.preferredWidth: constants.paddingSmall
-                height: 1
-                visible: !menuButton.visible
-            }
-
-            ToolButton {
-                id: menuButton
-                enabled: stack.currentItem && stack.currentItem.menu ? stack.currentItem.menu.count > 0 : false
-                text: enabled ? qsTr("≡") : ''
-                font.pixelSize: constants.fontSizeXLarge
-                onClicked: {
-                    stack.currentItem.menu.open()
-                    // position the menu to the right
-                    stack.currentItem.menu.x = toolbar.width - stack.currentItem.menu.width
-                }
             }
         }
     }