qml: highlight selected invoice, styling Invoices buttons

electrum/gui/qml/components/Invoices.qml

@@ -9,10 +9,16 @@ import "controls"
 
 Pane {
     id: root
-    property string selected_key
+
+    padding: 0
 
     ColumnLayout {
         anchors.fill: parent
+        spacing: 0
+
+        ColumnLayout {
+            Layout.fillWidth: true
+            Layout.margins: constants.paddingLarge
 
             InfoTextArea {
                 Layout.fillWidth: true
@@ -37,7 +43,7 @@ Pane {
                     id: listview
                     anchors.fill: parent
                     clip: true
-
+                    currentIndex: -1
                     model: DelegateModel {
                         id: delegateModel
                         model: Daemon.currentWallet.invoiceModel
@@ -47,11 +53,9 @@ Pane {
                                 dialog.invoiceAmountChanged.connect(function () {
                                     Daemon.currentWallet.invoiceModel.init_model()
                                 })
-                            selected_key = ''
+                                listview.currentIndex = -1
-                        }
-                        onPressAndHold: {
-                            selected_key = model.key
                             }
+                            onPressAndHold: listview.currentIndex = index
                         }
                     }
 
@@ -77,6 +81,9 @@ Pane {
                     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)
+                    Daemon.currentWallet.delete_invoice(listview.currentItem.getKey())
-                    selected_key = ''
                 }
             }
             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 {