UI history page

electrum/gui/qml/components/Constants.qml

@@ -21,4 +21,7 @@ QtObject {
     readonly property int iconSizeLarge: 32
     readonly property int iconSizeXLarge: 48
     readonly property int iconSizeXXLarge: 64
+
+    property color colorCredit: "#ff80ff80"
+    property color colorDebit: "#ffff8080"
 }

electrum/gui/qml/components/History.qml

@@ -20,20 +20,33 @@ Pane {
         delegate: Item {
             id: delegate
             width: ListView.view.width
-            height: txinfo.height
+            height: delegateLayout.height
 
-            MouseArea {
+            ColumnLayout {
-                anchors.fill: delegate
+                id: delegateLayout
-                onClicked: extinfo.visible = !extinfo.visible
+                width: parent.width
+                spacing: 0
+
+                Rectangle {
+                    visible: index > 0
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: constants.paddingSmall
+                    color: Qt.rgba(0,0,0,0.10)
                 }
 
+
+                ItemDelegate {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: txinfo.height
+
                     GridLayout {
                         id: txinfo
                         columns: 3
 
-                x: 6
+                        x: constants.paddingSmall
-                width: delegate.width - 12
+                        width: delegate.width - 2*constants.paddingSmall
 
+                        Item { Layout.columnSpan: 3; Layout.preferredWidth: 1; Layout.preferredHeight: 1}
                         Image {
                             readonly property variant tx_icons : [
                                 "../../../gui/icons/unconfirmed.png",
@@ -45,76 +58,43 @@ Pane {
                                 "../../../gui/icons/confirmed.png"
                             ]
 
-                    Layout.preferredWidth: 32
+                            Layout.preferredWidth: constants.iconSizeLarge
-                    Layout.preferredHeight: 32
+                            Layout.preferredHeight: constants.iconSizeLarge
                             Layout.alignment: Qt.AlignVCenter
                             Layout.rowSpan: 2
                             source: tx_icons[Math.min(6,model.confirmations)]
                         }
 
                         Label {
-                    font.pixelSize: 18
+                            font.pixelSize: constants.fontSizeLarge
                             Layout.fillWidth: true
                             text: model.label !== '' ? model.label : '<no label>'
                             color: model.label !== '' ? Material.accentColor : 'gray'
+                            wrapMode: Text.Wrap
+                            maximumLineCount: 2
+                            elide: Text.ElideRight
                         }
                         Label {
                             id: valueLabel
                             font.family: FixedFont
-                    font.pixelSize: 15
+                            font.pixelSize: constants.fontSizeMedium
                             text: Config.formatSats(model.bc_value)
                             font.bold: true
-                    color: model.incoming ? "#ff80ff80" : "#ffff8080"
+                            color: model.incoming ? constants.colorCredit : constants.colorDebit
                         }
                         Label {
-                    font.pixelSize: 12
+                            font.pixelSize: constants.fontSizeSmall
                             text: model.date
                         }
                         Label {
-                    font.pixelSize: 10
+                            font.pixelSize: constants.fontSizeXSmall
-                    text: 'fee: ' + (model.fee !== undefined ? model.fee : '0')
+                            Layout.alignment: Qt.AlignRight
+                            text: model.fee !== undefined ? 'fee: ' + model.fee : ''
                         }
-
+                        Item { Layout.columnSpan: 3; Layout.preferredWidth: 1; Layout.preferredHeight: 1 }
-                GridLayout {
-                    id: extinfo
-                    visible: false
-                    columns: 2
-                    Layout.columnSpan: 3
-
-                    Label { text: 'txid' }
-                    Label {
-                        font.pixelSize: 10
-                        text: model.txid
-                        elide: Text.ElideMiddle
-                        Layout.fillWidth: true
-                    }
-                    Label { text: 'height' }
-                    Label {
-                        font.pixelSize: 10
-                        text: model.height
-                    }
-                    Label { text: 'confirmations' }
-                    Label {
-                        font.pixelSize: 10
-                        text: model.confirmations
-                    }
-                    Label { text: 'address' }
-                    Label {
-                        font.pixelSize: 10
-                        elide: Text.ElideMiddle
-                        Layout.fillWidth: true
-                        text: {
-                            for (var i=0; i < Object.keys(model.outputs).length; i++) {
-                                if (model.outputs[i].value === model.bc_value) {
-                                    return model.outputs[i].address
                     }
                 }
             }
-                    }
-                }
-
-            }
-
             // as the items in the model are not bindings to QObjects,
             // hook up events that might change the appearance
             Connections {