UI

electrum/gui/qml/components/BalanceSummary.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.6
 import QtQuick.Layouts 1.0
 import QtQuick.Controls 2.0
+import QtQuick.Controls.Material 2.0
 
 Frame {
     id: root
@@ -17,27 +18,33 @@ Frame {
     GridLayout {
         id: layout
 
-        columns: 3
+        columns: 2
         Label {
-            id: balance
-            Layout.columnSpan: 3
             font.pixelSize: constants.fontSizeLarge
-            text: 'Balance: ' + formattedBalance
+            text: qsTr('Balance: ')
+        }
+        Label {
+            font.pixelSize: constants.fontSizeLarge
+            color: Material.accentColor
+            text: formattedBalance
         }
         Label {
-            id: confirmed
             font.pixelSize: constants.fontSizeMedium
-            text: 'Confirmed: ' + formattedBalance
+            text: qsTr('Confirmed: ')
         }
         Label {
-            id: unconfirmed
             font.pixelSize: constants.fontSizeMedium
-            text: 'Unconfirmed: ' + formattedUnconfirmed
+            color: Material.accentColor
+            text: formattedBalance
         }
         Label {
-            id: lightning
-            font.pixelSize: constants.fontSizeSmall
-            text: 'Lightning: ?'
+            font.pixelSize: constants.fontSizeMedium
+            text: qsTr('Unconfirmed: ')
+        }
+        Label {
+            font.pixelSize: constants.fontSizeMedium
+            color: Material.accentColor
+            text: formattedUnconfirmed
         }
     }
 

electrum/gui/qml/components/Constants.qml

@@ -15,4 +15,8 @@ QtObject {
     readonly property int fontSizeLarge: 18
     readonly property int fontSizeXLarge: 22
     readonly property int fontSizeXXLarge: 28
+
+    readonly property int iconSizeSmall: 16
+    readonly property int iconSizeMedium: 24
+    readonly property int iconSizeLarge: 32
 }

electrum/gui/qml/components/NetworkStats.qml

@@ -46,11 +46,13 @@ Pane {
             font.bold: true
         }
         Image {
-            Layout.preferredWidth: 16
-            Layout.preferredHeight: 16
-            source: Daemon.currentWallet.isUptodate
-                ? "../../icons/status_connected.png"
-                : "../../icons/status_lagging.png"
+            Layout.preferredWidth: constants.iconSizeSmall
+            Layout.preferredHeight: constants.iconSizeSmall
+            source: Network.status == 'connecting' || Network.status == 'disconnected'
+                ? '../../icons/status_disconnected.png' :
+                    Daemon.currentWallet.isUptodate
+                    ? '../../icons/status_connected.png'
+                    : '../../icons/status_lagging.png'
         }
         Label {
             text: Network.status

electrum/gui/qml/components/Receive.qml

@@ -156,9 +156,7 @@ Pane {
             bottom: parent.bottom
         }
 
-        background: Rectangle {
-            color: Qt.darker(Material.background, 1.25)
-        }
+        background: PaneInsetBackground {}
 
         ColumnLayout {
             spacing: 0
@@ -223,6 +221,7 @@ Pane {
                             Layout.fillWidth: true
                             Layout.columnSpan: 2
                             text: model.message
+                            elide: Text.ElideRight
                             font.pixelSize: constants.fontSizeLarge
                         }
 
@@ -233,6 +232,7 @@ Pane {
                         Label {
                             id: amount
                             text: Config.formatSats(model.amount, true)
+                            font.family: FixedFont
                             font.pixelSize: constants.fontSizeSmall
                         }
 
@@ -282,17 +282,20 @@ Pane {
                     NumberAnimation { properties: 'opacity'; to: 1.0; duration: 700 * (1-from) }
                 }
 
-                ScrollBar.vertical: ScrollBar {
-                    parent: parent.parent
-                    anchors.top: parent.top
-                    anchors.left: parent.right
-                    anchors.bottom: parent.bottom
-                }
-
+                ScrollIndicator.vertical: ScrollIndicator { }
             }
         }
     }
 
+    // make clicking the dialog background move the scope away from textedit fields
+    // so the keyboard goes away
+    MouseArea {
+        anchors.fill: parent
+        z: -1000
+        onClicked: parkFocus.focus = true
+        FocusScope { id: parkFocus }
+    }
+
     function createRequest(ignoreGaplimit = false) {
         var a = Config.unitsToSats(amount.text)
         Daemon.currentWallet.create_invoice(a, message.text, expires.currentValue, false, ignoreGaplimit)

electrum/gui/qml/components/Send.qml

@@ -16,14 +16,14 @@ Pane {
         }
 
         Label {
-            text: "Recipient"
+            text: qsTr('Recipient')
         }
 
         TextField {
             id: address
             Layout.columnSpan: 2
-            placeholderText: 'Paste address or invoice'
             Layout.fillWidth: true
+            placeholderText: qsTr('Paste address or invoice')
         }
 
         ToolButton {
@@ -34,57 +34,64 @@ Pane {
         }
 
         Label {
-            text: "Amount"
+            text: qsTr('Amount')
         }
 
         TextField {
             id: amount
-            placeholderText: 'Amount'
+            placeholderText: qsTr('Amount')
         }
 
         Label {
             text: Config.baseUnit
             color: Material.accentColor
-            Layout.columnSpan: 2
+            Layout.fillWidth: true
         }
 
+        Item { width: 1; height: 1 } // workaround colspan on baseunit messing up row above
+
         Label {
-            text: "Fee"
+            text: qsTr('Fee')
         }
 
         TextField {
             id: fee
-            placeholderText: 'sat/vB'
-            Layout.columnSpan: 2
+            placeholderText: qsTr('sat/vB')
+            Layout.columnSpan: 3
         }
 
-        Item {
-            Layout.fillWidth: true
+        RowLayout {
             Layout.columnSpan: 4
+            Layout.alignment: Qt.AlignHCenter
+            spacing: 10
 
-            Row {
-                spacing: 10
-                anchors.horizontalCenter: parent.horizontalCenter
-                Button {
-                    text: 'Pay'
-                    enabled: address.text != '' && amount.text != '' && fee.text != '' // TODO proper validation
-                    onClicked: {
-                        var i_amount = parseInt(amount.text)
-                        if (isNaN(i_amount))
-                            return
-                        var result = Daemon.currentWallet.send_onchain(address.text, i_amount, undefined, false)
-                        if (result)
-                            app.stack.pop()
-                    }
+            Button {
+                text: qsTr('Pay')
+                enabled: false // TODO proper validation
+                onClicked: {
+                    var i_amount = parseInt(amount.text)
+                    if (isNaN(i_amount))
+                        return
+                    var result = Daemon.currentWallet.send_onchain(address.text, i_amount, undefined, false)
+                    if (result)
+                        app.stack.pop()
                 }
+            }
 
-                Button {
-                    text: 'Scan QR Code'
-                    Layout.alignment: Qt.AlignHCenter
-                    onClicked: app.stack.push(Qt.resolvedUrl('Scan.qml'))
-                }
+            Button {
+                text: qsTr('Scan QR Code')
+                onClicked: app.stack.push(Qt.resolvedUrl('Scan.qml'))
             }
         }
     }
 
+    // make clicking the dialog background move the scope away from textedit fields
+    // so the keyboard goes away
+    MouseArea {
+        anchors.fill: parent
+        z: -1000
+        onClicked: parkFocus.focus = true
+        FocusScope { id: parkFocus }
+    }
+
 }

electrum/gui/qml/components/Wallets.qml

@@ -49,59 +49,61 @@ Pane {
             }
 //        }
 
-        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
-
-            // header: sadly seems to be buggy
-
-            delegate: AbstractButton {
-                width: ListView.view.width
-                height: 50
-                onClicked: {
-                    wallet_db.path = model.path
-                }
-
-                RowLayout {
-                    spacing: 10
-                    width: parent.width
-
-                    Image {
-                        id: walleticon
-                        source: "../../icons/wallet.png"
-                        fillMode: Image.PreserveAspectFit
-                        Layout.preferredWidth: 32
-                        Layout.preferredHeight: 32
+            Layout.preferredWidth: parent.width
+            Layout.fillHeight: true
+            verticalPadding: 0
+            horizontalPadding: 0
+            background: PaneInsetBackground {}
+
+            ListView {
+                id: listview
+                width: parent.width
+                height: parent.height
+                clip: true
+                model: Daemon.availableWallets
+
+                delegate: AbstractButton {
+                    width: ListView.view.width
+                    height: row.height
+                    onClicked: {
+                        wallet_db.path = model.path
                     }
 
-                    Label {
-                        font.pixelSize: 18
-                        text: model.name
-                        Layout.fillWidth: true
-                    }
+                    RowLayout {
+                        id: row
+                        spacing: 10
+                        x: constants.paddingSmall
+                        width: parent.width - 2 * constants.paddingSmall
+
+                        Image {
+                            id: walleticon
+                            source: "../../icons/wallet.png"
+                            fillMode: Image.PreserveAspectFit
+                            Layout.preferredWidth: 32
+                            Layout.preferredHeight: 32
+                        }
 
-                    Button {
-                        text: 'Open'
-                        onClicked: {
-                            Daemon.load_wallet(model.path)
+                        Label {
+                            font.pixelSize: 18
+                            text: model.name
+                            Layout.fillWidth: true
+                        }
+
+                        Button {
+                            text: 'Open'
+                            onClicked: {
+                                Daemon.load_wallet(model.path)
+                            }
                         }
                     }
                 }
+
+                ScrollIndicator.vertical: ScrollIndicator { }
             }
-        }}}
+
+        }
 
         Button {
             Layout.alignment: Qt.AlignHCenter

electrum/gui/qml/components/main.qml

@@ -27,11 +27,23 @@ ApplicationWindow
         id: toolbar
         RowLayout {
             anchors.fill: parent
+
             ToolButton {
                 text: qsTr("‹")
                 enabled: stack.depth > 1
                 onClicked: stack.pop()
             }
+
+            Label {
+                text: stack.currentItem.title
+                elide: Label.ElideRight
+                horizontalAlignment: Qt.AlignHCenter
+                verticalAlignment: Qt.AlignVCenter
+                Layout.fillWidth: true
+                font.pixelSize: constants.fontSizeMedium
+                font.bold: true
+            }
+
             Item {
                 visible: Network.isTestNet
                 width: column.width
@@ -47,12 +59,13 @@ ApplicationWindow
 
                 }
 
-                Column {
+                ColumnLayout {
                     id: column
+                    spacing: 0
                     Image {
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        width: 16
-                        height: 16
+                        Layout.alignment: Qt.AlignHCenter
+                        Layout.preferredWidth: constants.iconSizeSmall
+                        Layout.preferredHeight: constants.iconSizeSmall
                         source: "../../icons/info.png"
                     }
 
@@ -60,28 +73,31 @@ ApplicationWindow
                         id: networkNameLabel
                         text: Network.networkName
                         color: Material.accentColor
-                        font.pointSize: 5
+                        font.pixelSize: constants.fontSizeXSmall
                     }
                 }
             }
 
             Image {
-                Layout.preferredWidth: 16
-                Layout.preferredHeight: 16
-                source: Daemon.currentWallet.isUptodate ? "../../icons/status_connected.png" : "../../icons/status_lagging.png"
+                Layout.preferredWidth: constants.iconSizeSmall
+                Layout.preferredHeight: constants.iconSizeSmall
+                source: Network.status == 'connecting' || Network.status == 'disconnected'
+                    ? '../../icons/status_disconnected.png' :
+                        Daemon.currentWallet.isUptodate
+                        ? '../../icons/status_connected.png'
+                        : '../../icons/status_lagging.png'
             }
 
-            Label {
-                text: stack.currentItem.title
-                elide: Label.ElideRight
-                horizontalAlignment: Qt.AlignHCenter
-                verticalAlignment: Qt.AlignVCenter
-                Layout.fillWidth: true
-                font.pixelSize: 14
-                font.bold: true
+            Rectangle {
+                color: 'transparent'
+                Layout.preferredWidth: constants.paddingSmall
+                height: 1
+                visible: !menuButton.visible
             }
 
             ToolButton {
+                id: menuButton
+                visible: stack.currentItem.menu !== undefined && stack.currentItem.menu.count > 0
                 text: qsTr("⋮")
                 onClicked: {
                     stack.currentItem.menu.open()

electrum/gui/qml/components/wizard/Wizard.qml

@@ -162,5 +162,14 @@ Dialog {
         }
     }
 
+    // make clicking the dialog background move the scope away from textedit fields
+    // so the keyboard goes away
+    // TODO: here it works on desktop, but not android. hmm.
+    MouseArea {
+        anchors.fill: wizard
+        z: -1000
+        onClicked: { parkFocus.focus = true }
+        FocusScope { id: parkFocus }
+    }
 
 }