qml: many UI updates and additions

electrum/gui/qml/components/BalanceSummary.qml

@@ -0,0 +1,31 @@
+import QtQuick 2.6
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 2.0
+
+Item {
+    height: layout.height
+
+    GridLayout {
+        id: layout
+
+        columns: 3
+        Label {
+            Layout.columnSpan: 3
+            font.pointSize: 14
+            text: 'Balance: ' + Daemon.currentWallet.confirmedBalance //'5.6201 mBTC'
+        }
+        Label {
+            font.pointSize: 8
+            text: 'Confirmed: ' + Daemon.currentWallet.confirmedBalance
+        }
+        Label {
+            font.pointSize: 8
+            text: 'Unconfirmed: ' + Daemon.currentWallet.unconfirmedBalance
+        }
+        Label {
+            font.pointSize: 8
+            text: 'Lightning: ?'
+        }
+    }
+
+}

electrum/gui/qml/components/History.qml

@@ -2,19 +2,32 @@ import QtQuick 2.6
 import QtQuick.Layouts 1.0
 import QtQuick.Controls 2.0
 
-Item {
+import Electrum 1.0
-    id: rootItem
 
-    property string title: 'History'
+Pane {
-
+    id: rootItem
-    Column {
+    visible: Daemon.currentWallet !== undefined
-        width: parent.width
+    clip: true
 
     ListView {
+        id: listview
         width: parent.width
-            height: 200
+        height: parent.height
 
         model: Daemon.currentWallet.historyModel
+
+        header: Item {
+            id: header
+            width: ListView.view.width
+            height: balance.height
+
+            BalanceSummary {
+                id: balance
+                width: parent.width
+            }
+
+        }
+
         delegate: Item {
             id: delegate
             width: ListView.view.width
@@ -55,8 +68,8 @@ Item {
                         "../../../gui/icons/confirmed.png"
                     ]
 
-                        sourceSize.width: 32
+                    sourceSize.width: 48
-                        sourceSize.height: 32
+                    sourceSize.height: 48
                     Layout.alignment: Qt.AlignVCenter
                     source: tx_icons[Math.min(6,model.confirmations)]
                 }
@@ -65,6 +78,7 @@ Item {
                     Layout.fillWidth: true
 
                     Label {
+                        font.pointSize: 12
                         text: model.label !== '' ? model.label : '<no label>'
                         color: model.label !== '' ? 'black' : 'gray'
                         font.bold: model.label !== '' ? true : false
@@ -78,6 +92,7 @@ Item {
                 Column {
                     id: valuefee
                     Label {
+                        font.pointSize: 12
                         text: model.bc_value
                         font.bold: true
                     }
@@ -127,7 +142,6 @@ Item {
 
             }
         } // delegate
-        }
 
     }
 

electrum/gui/qml/components/NetworkStats.qml

@@ -3,12 +3,14 @@ import QtQuick.Layouts 1.0
 import QtQuick.Controls 2.0
 import QtQuick.Controls.Material 2.0
 
-Item {
+Pane {
     property string title: qsTr('Network')
 
     GridLayout {
         columns: 2
 
+        Label { text: qsTr("Network: "); color: Material.primaryHighlightedTextColor; font.bold: true }
+        Label { text: Network.networkName }
         Label { text: qsTr("Server: "); color: Material.primaryHighlightedTextColor; font.bold: true }
         Label { text: Network.server }
         Label { text: qsTr("Local Height: "); color: Material.primaryHighlightedTextColor; font.bold: true }

electrum/gui/qml/components/Scan.qml

@@ -4,11 +4,10 @@ import QtQuick.Controls 2.0
 Item {
 
     property bool toolbar: false
-    property string title: 'scan'
 
     QRScan {
         anchors.top: parent.top
-        anchors.bottom: button.top
+        anchors.bottom: parent.bottom
         width: parent.width
     }
 

electrum/gui/qml/components/Send.qml

@@ -2,20 +2,16 @@ import QtQuick 2.6
 import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.0
 
-Item {
+Pane {
     id: rootItem
 
-    property string title: 'Send'
-
     GridLayout {
-        width: rootItem.width - 12
+        width: parent.width
-        anchors.horizontalCenter: parent.horizontalCenter
         columns: 4
 
-        Label {
+        BalanceSummary {
             Layout.columnSpan: 4
-            Layout.alignment: Qt.AlignHCenter
+            //Layout.alignment: Qt.AlignHCenter
-            text: "Current Balance: 0 mBTC"
         }
 
         Label {
@@ -47,13 +43,17 @@ Item {
             placeholderText: 'sat/vB'
         }
 
-        Column {
+        Item {
             Layout.fillWidth: true
             Layout.columnSpan: 4
 
-            Button {
+            Row {
+                spacing: 10
                 anchors.horizontalCenter: parent.horizontalCenter
+                Button {
+//                    anchors.horizontalCenter: parent.horizontalCenter
                     text: 'Pay'
+                    enabled: address.text != '' && amount.text != '' && fee.text != '' // TODO proper validation
                     onClicked: {
                         var i_amount = parseInt(amount.text)
                         if (isNaN(i_amount))
@@ -63,6 +63,13 @@ Item {
                             app.stack.pop()
                     }
                 }
+
+                Button {
+                    text: 'Scan QR Code'
+                    Layout.alignment: Qt.AlignHCenter
+                    onClicked: app.stack.push(Qt.resolvedUrl('Scan.qml'))
+                }
+            }
         }
     }
 

electrum/gui/qml/components/Wallets.qml

@@ -2,20 +2,73 @@ import QtQuick 2.6
 import QtQuick.Layouts 1.0
 import QtQuick.Controls 2.0
 
-Item {
+Pane {
+    id: rootItem
+
     property string title: 'Wallets'
 
-    anchors.fill: parent
+    ColumnLayout {
+        id: layout
+        width: parent.width
+        height: parent.height
+
+        Item {
+            width: parent.width
+            height: detailsLayout.height
+
+
+                GridLayout {
+                    id: detailsLayout
+                    width: parent.width
+                    columns: 4
+
+                    Label { text: 'Wallet'; Layout.columnSpan: 2 }
+                    Label { text: Daemon.walletName; Layout.columnSpan: 2 }
+
+                    Label { text: 'txinType' }
+                    Label { text: Daemon.currentWallet.txinType }
+
+                    Label { text: 'is deterministic' }
+                    Label { text: Daemon.currentWallet.isDeterministic }
+
+                    Label { text: 'is watch only' }
+                    Label { text: Daemon.currentWallet.isWatchOnly }
+
+                    Label { text: 'is Encrypted' }
+                    Label { text: Daemon.currentWallet.isEncrypted }
+
+                    Label { text: 'is Hardware' }
+                    Label { text: Daemon.currentWallet.isHardware }
+
+                    Label { text: 'derivation path (BIP32)'; visible: Daemon.currentWallet.isDeterministic }
+                    Label { text: Daemon.currentWallet.derivationPath; visible: Daemon.currentWallet.isDeterministic }
+                }
+            }
+//        }
+
+        Item {
+            width: parent.width
+//            height: detailsFrame.height
+            Layout.fillHeight: true
+        Frame {
+            id: detailsFrame
+            width: parent.width
+            height: parent.height
 
         ListView {
+            id: listview
             width: parent.width
+//            Layout.fillHeight: true
             height: parent.height
+            clip:true
             model: Daemon.availableWallets
 
-        delegate: Item {
+            // header: sadly seems to be buggy
+
+            delegate: AbstractButton {
                 width: ListView.view.width
                 height: 50
-
+                onClicked: console.log('delegate clicked')
                 RowLayout {
                     x: 20
                     spacing: 20
@@ -25,19 +78,28 @@ Item {
                     }
 
                     Label {
-                    font.pointSize: model.active ? 14 : 13
+                        font.pointSize: 12
-                    font.bold: model.active
                         text: model.name
                         Layout.fillWidth: true
                     }
+                    Button {
+                        text: 'Load'
+                        onClicked: {
+                            Daemon.load_wallet(model.path, null)
+                        }
+                    }
+                }
 
             }
+        }}}
 
-            MouseArea {
+        Button {
-                anchors.fill: parent
+            Layout.alignment: Qt.AlignHCenter
-                onClicked: openMenu()
+            text: 'Create Wallet'
+            onClicked:  {
+                var dialog = app.newWalletWizard.createObject(rootItem)
+                dialog.open()
             }
         }
     }
-
 }

electrum/gui/qml/components/landing.qml

@@ -1,59 +1,87 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.0
 import QtQml 2.6
 
 Item {
     id: rootItem
 
-    property string title: 'Network'
+    property string title: Daemon.walletName
 
     property QtObject menu: Menu {
         MenuItem { text: 'Wallets'; onTriggered: stack.push(Qt.resolvedUrl('Wallets.qml')) }
         MenuItem { text: 'Network'; onTriggered: stack.push(Qt.resolvedUrl('NetworkStats.qml')) }
     }
 
-    Column {
+    ColumnLayout {
-        width: parent.width
+        anchors.fill: parent
 
-        Button {
+        TabBar {
-            text: 'Scan QR Code'
+            id: tabbar
-            onClicked: app.stack.push(Qt.resolvedUrl('Scan.qml'))
+            Layout.fillWidth: true
+            currentIndex: swipeview.currentIndex
+            TabButton {
+                text: qsTr('Receive')
+            }
+            TabButton {
+                text: qsTr('History')
+            }
+            TabButton {
+                enabled: !Daemon.currentWallet.isWatchOnly
+                text: qsTr('Send')
             }
-
-        Button {
-            text: 'Send'
-            onClicked: app.stack.push(Qt.resolvedUrl('Send.qml'))
         }
 
+        SwipeView {
+            id: swipeview
+
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            currentIndex: tabbar.currentIndex
+
+            Item {
+
+                ColumnLayout {
+                    width: parent.width
+                    y: 20
+                    spacing: 20
+
                     Button {
-            text: 'Show TX History'
+                        onClicked: stack.push(Qt.resolvedUrl('Wallets.qml'))
-            onClicked: app.stack.push(Qt.resolvedUrl('History.qml'))
+                        text: 'Wallets'
+                        Layout.alignment: Qt.AlignHCenter
                     }
 
                     Button {
                         text: 'Create Wallet'
+                        Layout.alignment: Qt.AlignHCenter
                         onClicked:  {
-                var dialog = newWalletWizard.createObject(rootItem)
+                            var dialog = app.newWalletWizard.createObject(rootItem)
                             dialog.open()
                         }
                     }
 
                 }
+            }
+
+            Item {
+                History {
+                    id: history
+                    anchors.fill: parent
+                }
+            }
 
-    Component {
-        id: newWalletWizard
-        NewWalletWizard {
-            parent: Overlay.overlay
-            x: 12
-            y: 12
-            width: parent.width - 24
-            height: parent.height - 24
 
-            Overlay.modal: Rectangle {
+            Item {
-                color: "#aa000000"
+                enabled: !Daemon.currentWallet.isWatchOnly
+                Send {
+                    anchors.fill: parent
+                }
             }
 
         }
+
     }
+
 }
 

electrum/gui/qml/components/main.qml

@@ -1,5 +1,5 @@
 import QtQuick 2.6
-import QtQuick.Controls 2.0
+import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.0
 import QtQuick.Controls.Material 2.0
 
@@ -25,15 +25,50 @@ ApplicationWindow
             anchors.fill: parent
             ToolButton {
                 text: qsTr("‹")
-                enabled: stack.currentItem.StackView.index > 0
+                enabled: stack.depth > 1
                 onClicked: stack.pop()
             }
+            Item {
+                width: column.width
+                height: column.height
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        var dialog = app.messageDialog.createObject(app, {'message':
+                            'Electrum is currently on ' + Network.networkName + ''
+                        })
+                        dialog.open()
+                    }
+
+                }
+
+                Column {
+                    id: column
+                    visible: Network.isTestNet
+                    Image {
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        width: 16
+                        height: 16
+                        source: "../../icons/info.png"
+                    }
+
+                    Label {
+                        id: networkNameLabel
+                        text: Network.networkName
+                        color: Material.accentColor //'orange'
+                        font.pointSize: 5
+                    }
+                }
+            }
+
             Label {
                 text: stack.currentItem.title
                 elide: Label.ElideRight
                 horizontalAlignment: Qt.AlignHCenter
                 verticalAlignment: Qt.AlignVCenter
                 Layout.fillWidth: true
+                font.pointSize: 10
+                font.bold: true
             }
             ToolButton {
                 text: qsTr("⋮")
@@ -55,7 +90,7 @@ ApplicationWindow
 
     Timer {
         id: splashTimer
-        interval: 1000
+        interval: 10
         onTriggered: {
             splash.opacity = 0
         }
@@ -73,8 +108,49 @@ ApplicationWindow
         }
     }
 
+    property alias newWalletWizard: _newWalletWizard
+    Component {
+        id: _newWalletWizard
+        NewWalletWizard {
+            parent: Overlay.overlay
+            x: 12
+            y: 12
+            width: parent.width - 24
+            height: parent.height - 24
+
+            Overlay.modal: Rectangle {
+                color: "#aa000000"
+            }
+        }
+    }
+
+    property alias messageDialog: _messageDialog
+    Component {
+        id: _messageDialog
+        Dialog {
+            parent: Overlay.overlay
+            modal: true
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+
+            title: "Message"
+            property alias message: messageLabel.text
+            Label {
+                id: messageLabel
+                text: "Lorem ipsum dolor sit amet..."
+            }
+
+        }
+    }
+
     Component.onCompleted: {
         Daemon.load_wallet()
         splashTimer.start()
     }
+
+    onClosing: {
+        // destroy most GUI components so that we don't dump so many null reference warnings on exit
+        app.header.visible = false
+        mainStackView.clear()
+    }
 }