qml: highlight selected invoice, styling Invoices buttons

electrum/gui/qml/components/Invoices.qml

@@ -9,74 +9,81 @@ import "controls"
 
 Pane {
     id: root
-    property string selected_key
+
+    padding: 0
 
     ColumnLayout {
         anchors.fill: parent
+        spacing: 0
 
-        InfoTextArea {
+        ColumnLayout {
             Layout.fillWidth: true
-            Layout.bottomMargin: constants.paddingLarge
-            visible: !Config.userKnowsPressAndHold
-            text: qsTr('To access this list from the main screen, press and hold the Send button')
-        }
+            Layout.margins: constants.paddingLarge
 
-        Heading {
-            text: qsTr('Saved Invoices')
-        }
+            InfoTextArea {
+                Layout.fillWidth: true
+                Layout.bottomMargin: constants.paddingLarge
+                visible: !Config.userKnowsPressAndHold
+                text: qsTr('To access this list from the main screen, press and hold the Send button')
+            }
 
-        Frame {
-            background: PaneInsetBackground {}
+            Heading {
+                text: qsTr('Saved Invoices')
+            }
 
-            verticalPadding: 0
-            horizontalPadding: 0
-            Layout.fillHeight: true
-            Layout.fillWidth: true
+            Frame {
+                background: PaneInsetBackground {}
 
-            ListView {
-                id: listview
-                anchors.fill: parent
-                clip: true
+                verticalPadding: 0
+                horizontalPadding: 0
+                Layout.fillHeight: true
+                Layout.fillWidth: true
 
-                model: DelegateModel {
-                    id: delegateModel
-                    model: Daemon.currentWallet.invoiceModel
-                    delegate: InvoiceDelegate {
-                        onClicked: {
-                            var dialog = app.stack.getRoot().openInvoice(model.key)
-                            dialog.invoiceAmountChanged.connect(function () {
-                                Daemon.currentWallet.invoiceModel.init_model()
-                            })
-                            selected_key = ''
+                ListView {
+                    id: listview
+                    anchors.fill: parent
+                    clip: true
+                    currentIndex: -1
+                    model: DelegateModel {
+                        id: delegateModel
+                        model: Daemon.currentWallet.invoiceModel
+                        delegate: InvoiceDelegate {
+                            onClicked: {
+                                var dialog = app.stack.getRoot().openInvoice(model.key)
+                                dialog.invoiceAmountChanged.connect(function () {
+                                    Daemon.currentWallet.invoiceModel.init_model()
+                                })
+                                listview.currentIndex = -1
+                            }
+                            onPressAndHold: listview.currentIndex = index
                         }
-                        onPressAndHold: {
-                            selected_key = model.key
-			}
                     }
-                }
 
-                add: Transition {
-                    NumberAnimation { properties: 'scale'; from: 0.75; to: 1; duration: 500 }
-                    NumberAnimation { properties: 'opacity'; from: 0; to: 1; duration: 500 }
-                }
-                addDisplaced: Transition {
-                    SpringAnimation { properties: 'y'; duration: 200; spring: 5; damping: 0.5; mass: 2 }
-                }
+                    add: Transition {
+                        NumberAnimation { properties: 'scale'; from: 0.75; to: 1; duration: 500 }
+                        NumberAnimation { properties: 'opacity'; from: 0; to: 1; duration: 500 }
+                    }
+                    addDisplaced: Transition {
+                        SpringAnimation { properties: 'y'; duration: 200; spring: 5; damping: 0.5; mass: 2 }
+                    }
 
-                remove: Transition {
-                    NumberAnimation { properties: 'scale'; to: 0.75; duration: 300 }
-                    NumberAnimation { properties: 'opacity'; to: 0; duration: 300 }
-                }
-                removeDisplaced: Transition {
-                    SequentialAnimation {
-                        PauseAnimation { duration: 200 }
-                        SpringAnimation { properties: 'y'; duration: 100; spring: 5; damping: 0.5; mass: 2 }
+                    remove: Transition {
+                        NumberAnimation { properties: 'scale'; to: 0.75; duration: 300 }
+                        NumberAnimation { properties: 'opacity'; to: 0; duration: 300 }
+                    }
+                    removeDisplaced: Transition {
+                        SequentialAnimation {
+                            PauseAnimation { duration: 200 }
+                            SpringAnimation { properties: 'y'; duration: 100; spring: 5; damping: 0.5; mass: 2 }
+                        }
                     }
-                }
 
-                ScrollIndicator.vertical: ScrollIndicator { }
+                    ScrollIndicator.vertical: ScrollIndicator { }
+                }
             }
+
         }
+
         ButtonContainer {
             Layout.fillWidth: true
             FlatButton {
@@ -84,10 +91,9 @@ Pane {
                 Layout.preferredWidth: 1
                 text: qsTr('Delete')
                 icon.source: '../../icons/delete.png'
-                visible: selected_key != ''
+                visible: listview.currentIndex >= 0
                 onClicked: {
-                    Daemon.currentWallet.delete_invoice(selected_key)
-                    selected_key = ''
+                    Daemon.currentWallet.delete_invoice(listview.currentItem.getKey())
                 }
             }
             FlatButton {
@@ -95,13 +101,12 @@ Pane {
                 Layout.preferredWidth: 1
                 text: qsTr('View')
                 icon.source: '../../icons/tab_receive.png'
-                visible: selected_key != ''
+                visible: listview.currentIndex >= 0
                 onClicked: {
-                    var dialog = app.stack.getRoot().openInvoice(selected_key)
+                    var dialog = app.stack.getRoot().openInvoice(listview.currentItem.getKey())
                     dialog.invoiceAmountChanged.connect(function () {
                         Daemon.currentWallet.invoiceModel.init_model()
                     })
-                    selected_key = ''
                 }
             }
         }

electrum/gui/qml/components/controls/InvoiceDelegate.qml

@@ -5,11 +5,17 @@ import QtQuick.Controls.Material 2.0
 
 ItemDelegate {
     id: root
+
     height: item.height
     width: ListView.view.width
-
     font.pixelSize: constants.fontSizeSmall // set default font size for child controls
 
+    highlighted: ListView.isCurrentItem
+
+    function getKey() {
+        return model.key
+    }
+
     GridLayout {
         id: item
 
@@ -130,6 +136,7 @@ ItemDelegate {
             Layout.preferredHeight: constants.paddingTiny
             color: 'transparent'
         }
+
     }
 
     Connections {