Merge #375: Improve peer delegate

c54c973 qml: change peer delegate layout (João Barbosa)
3c2d951 qml: improve peer delegate (João Barbosa)

Pull request description:

  Use Qt `ItemDelegate` and use properties `down` and `hovered`, making it possible to drop the `MouseArea` Also improve the layout and elide the label that can overflow.

  fixes #372.

ACKs for top commit:
  johnny9:
    ACK c54c973

Tree-SHA512: e9fe745100d0d5b17299601ce81c4dbb97ee714b0c9226a2b4b0761f6658f3475be79981e8ac37d62d444e54250a4215bd434c4ab0382b673d0a416432c032cb

Author: hebasto

src/qml/pages/node/Peers.qml

@@ -153,55 +153,22 @@ Page {
             }
         }
 
-        delegate: Item {
+        delegate: ItemDelegate {
             id: delegate
             required property int nodeId;
             required property string address;
             required property string subversion;
             required property string direction;
             required property string connectionType;
             required property string network;
-            property color stateColor;
-            implicitHeight: 60
-            implicitWidth: listView.width
-            state: "FILLED"
-
-            states: [
-                State {
-                    name: "FILLED"
-                    PropertyChanges { target: delegate; stateColor: Theme.color.neutral9 }
-                },
-                State {
-                    name: "HOVER"
-                    PropertyChanges { target: delegate; stateColor: Theme.color.orangeLight1 }
-                },
-                State {
-                    name: "ACTIVE"
-                    PropertyChanges { target: delegate; stateColor: Theme.color.orange }
-                }
-            ]
-
-            MouseArea {
-                anchors.fill: parent
-                hoverEnabled: AppMode.isDesktop
-                onEntered: {
-                    delegate.state = "HOVER"
-                }
-                onExited: {
-                    delegate.state = "FILLED"
-                }
-                onPressed: {
-                    delegate.state = "ACTIVE"
-                }
-                onReleased: {
-                    if (mouseArea.containsMouse) {
-                        delegate.state = "HOVER"
-                    } else {
-                        delegate.state = "FILLED"
-                    }
+            readonly property color stateColor: {
+                if (delegate.down) {
+                    return Theme.color.orange
+                } else if (delegate.hovered) {
+                    return Theme.color.orangeLight1
                 }
+                return Theme.color.neutral9
             }
-
             Connections {
                 target: peerListModelProxy
                 function onSortByChanged(roleName) {
@@ -254,41 +221,59 @@ Page {
                     quaternary.text = subversion
                 }
             }
-
-            ColumnLayout {
-                anchors.left: parent.left
-                CoreText {
-                    Layout.alignment: Qt.AlignLeft
-                    id: primary
-                    font.pixelSize: 18
-                    color: delegate.stateColor
-                }
-                CoreText {
-                    Layout.alignment: Qt.AlignLeft
-                    id: tertiary
-                    font.pixelSize: 15
-                    color: Theme.color.neutral7
+            leftPadding: 0
+            rightPadding: 0
+            topPadding: 0
+            bottomPadding: 14
+            width: listView.width
+            background: Item {
+                Separator {
+                    anchors.bottom: parent.bottom
+                    width: parent.width
                 }
             }
-            ColumnLayout {
-                anchors.right: parent.right
-                CoreText {
-                    Layout.alignment: Qt.AlignRight
-                    id: secondary
-                    font.pixelSize: 18
-                    color: delegate.stateColor
+            contentItem: ColumnLayout {
+                RowLayout {
+                    Layout.fillWidth: true
+                    spacing: 15
+                    CoreText {
+                        Layout.alignment: Qt.AlignLeft
+                        Layout.fillWidth: true
+                        Layout.preferredWidth: 0
+                        id: primary
+                        font.pixelSize: 18
+                        color: delegate.stateColor
+                        elide: Text.ElideMiddle
+                        wrapMode: Text.NoWrap
+                        horizontalAlignment: Text.AlignLeft
+                    }
+                    CoreText {
+                        Layout.alignment: Qt.AlignRight
+                        id: secondary
+                        font.pixelSize: 18
+                        color: delegate.stateColor
+                    }
                 }
-                CoreText {
-                    Layout.alignment: Qt.AlignRight
-                    id: quaternary
-                    font.pixelSize: 15
-                    color: Theme.color.neutral7
+                RowLayout {
+                    CoreText {
+                        Layout.alignment: Qt.AlignLeft
+                        Layout.fillWidth: true
+                        Layout.preferredWidth: 0
+                        id: tertiary
+                        font.pixelSize: 15
+                        color: Theme.color.neutral7
+                        elide: Text.ElideMiddle
+                        wrapMode: Text.NoWrap
+                        horizontalAlignment: Text.AlignLeft
+                    }
+                    CoreText {
+                        Layout.alignment: Qt.AlignRight
+                        id: quaternary
+                        font.pixelSize: 15
+                        color: Theme.color.neutral7
+                    }
                 }
             }
-            Separator {
-                anchors.bottom: parent.bottom
-                width: parent.width
-            }
         }
     }
 }