Skip to content

Commit

Permalink
Merge #370: Add interactive color states to peers table
Browse files Browse the repository at this point in the history
e8a2bbc qml: add interactive color states to peers table (jarolrod)

Pull request description:

  Introduces color states for hover and and pressed to the peers in the peers table.

  ### Light
  | Filled | Hover | Pressed |
  |--------|-------|---------|
  | <img width="486" alt="Screenshot 2023-11-09 at 7 10 37 PM" src="https://github.com/bitcoin-core/gui-qml/assets/23396902/377122f2-b366-4fb6-b9f2-000aaab8d91b"> | <img width="486" alt="Screenshot 2023-11-09 at 7 10 11 PM" src="https://github.com/bitcoin-core/gui-qml/assets/23396902/4fb66b56-e30d-487f-8f7e-b1937d6002d1"> | <img width="486" alt="Screenshot 2023-11-09 at 7 10 20 PM" src="https://github.com/bitcoin-core/gui-qml/assets/23396902/638d3bfe-d52b-4841-89d3-01229783459c"> |

  ### Dark
  | Filled | Hover | Pressed |
  |--------|-------|---------|
  | <img width="486" alt="Screenshot 2023-11-09 at 7 03 23 PM" src="https://github.com/bitcoin-core/gui-qml/assets/23396902/948c034e-d2c8-42b0-938d-8eda329e03c2"> | <img width="486" alt="Screenshot 2023-11-09 at 7 03 18 PM" src="https://github.com/bitcoin-core/gui-qml/assets/23396902/942bb1a7-05f5-416c-90e8-1701a25ef254"> | <img width="486" alt="Screenshot 2023-11-09 at 7 03 40 PM" src="https://github.com/bitcoin-core/gui-qml/assets/23396902/9f27e928-513c-4c3e-a29e-8325d002db8c"> |

  [![Build Artifacts](https://img.shields.io/badge/Build%20Artifacts-green
  )](https://github.com/bitcoin-core/gui-qml/actions/runs/6819492294)

ACKs for top commit:
  pablomartin4btc:
    utACK e8a2bbc

Tree-SHA512: 20dff534c5e22803c7a5606d33b68e12d5a90f7fa55c0121263a22085e654b66865378fcebcb8b3f9006612bd759ba2344f5940673b1b47c67f67daf69e2eeaa
  • Loading branch information
hebasto committed Nov 23, 2023
2 parents c77a96d + e8a2bbc commit 2f08efc
Showing 1 changed file with 42 additions and 2 deletions.
44 changes: 42 additions & 2 deletions src/qml/pages/node/Peers.qml
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import org.bitcoincore.qt 1.0
import "../../controls"
import "../../components"

Expand Down Expand Up @@ -132,14 +133,53 @@ Page {
}

delegate: Item {
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"
}
}
}

Connections {
target: peerListModelProxy
Expand Down Expand Up @@ -200,7 +240,7 @@ Page {
Layout.alignment: Qt.AlignLeft
id: primary
font.pixelSize: 18
color: Theme.color.neutral9
color: delegate.stateColor
}
CoreText {
Layout.alignment: Qt.AlignLeft
Expand All @@ -215,7 +255,7 @@ Page {
Layout.alignment: Qt.AlignRight
id: secondary
font.pixelSize: 18
color: Theme.color.neutral9
color: delegate.stateColor
}
CoreText {
Layout.alignment: Qt.AlignRight
Expand Down

0 comments on commit 2f08efc

Please sign in to comment.