From 04d9f0d424d1b9c7beb1262ee8d8c22613f34f3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Barbosa?= Date: Thu, 30 Nov 2023 21:43:09 +0000 Subject: [PATCH] qml: improve peer delegate --- src/qml/pages/node/Peers.qml | 121 +++++++++++++++-------------------- 1 file changed, 51 insertions(+), 70 deletions(-) diff --git a/src/qml/pages/node/Peers.qml b/src/qml/pages/node/Peers.qml index ab62a6d482..3a07515753 100644 --- a/src/qml/pages/node/Peers.qml +++ b/src/qml/pages/node/Peers.qml @@ -153,7 +153,7 @@ Page { } } - delegate: Item { + delegate: ItemDelegate { id: delegate required property int nodeId; required property string address; @@ -161,47 +161,14 @@ Page { 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,55 @@ 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: RowLayout { + spacing: 15 + ColumnLayout { + Layout.fillWidth: true + CoreText { + Layout.alignment: Qt.AlignLeft + id: primary + font.pixelSize: 18 + color: delegate.stateColor + } + 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 + ColumnLayout { + Layout.fillWidth: false + 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 + } } } - Separator { - anchors.bottom: parent.bottom - width: parent.width - } } } }