From 3c2d9512e7aa1272ca16b4df121fbd0bd97eacca 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 1/2] qml: improve peer delegate --- src/qml/pages/node/Peers.qml | 126 ++++++++++++++++------------------- 1 file changed, 56 insertions(+), 70 deletions(-) diff --git a/src/qml/pages/node/Peers.qml b/src/qml/pages/node/Peers.qml index ab62a6d482..ddcdf5f214 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,60 @@ 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 + 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.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 - } } } } From c54c97378330a5e4002cd88758ff772e92292d50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Barbosa?= Date: Fri, 1 Dec 2023 11:23:52 +0000 Subject: [PATCH 2/2] qml: change peer delegate layout --- src/qml/pages/node/Peers.qml | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/qml/pages/node/Peers.qml b/src/qml/pages/node/Peers.qml index ddcdf5f214..a8b0173aa9 100644 --- a/src/qml/pages/node/Peers.qml +++ b/src/qml/pages/node/Peers.qml @@ -232,10 +232,10 @@ Page { width: parent.width } } - contentItem: RowLayout { - spacing: 15 - ColumnLayout { + contentItem: ColumnLayout { + RowLayout { Layout.fillWidth: true + spacing: 15 CoreText { Layout.alignment: Qt.AlignLeft Layout.fillWidth: true @@ -247,6 +247,14 @@ Page { wrapMode: Text.NoWrap horizontalAlignment: Text.AlignLeft } + CoreText { + Layout.alignment: Qt.AlignRight + id: secondary + font.pixelSize: 18 + color: delegate.stateColor + } + } + RowLayout { CoreText { Layout.alignment: Qt.AlignLeft Layout.fillWidth: true @@ -258,15 +266,6 @@ Page { wrapMode: Text.NoWrap horizontalAlignment: Text.AlignLeft } - } - ColumnLayout { - Layout.fillWidth: false - CoreText { - Layout.alignment: Qt.AlignRight - id: secondary - font.pixelSize: 18 - color: delegate.stateColor - } CoreText { Layout.alignment: Qt.AlignRight id: quaternary