UI: Fixed hover colours

This commit is contained in:
2026-08-27 13:02:34 +01:00
parent 4b0b5c72ba
commit fcce5f304b
4 changed files with 72 additions and 66 deletions

View File

@@ -213,18 +213,12 @@ Item {
width: parent ? parent.width : 0
radius: 0
implicitHeight: rowContent.implicitHeight + 12
color: devRow.dev.connected
? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18)
: (rowMouse.containsMouse ? Colors.primary : "transparent")
// Colors.primaryText (used below whenever hovered) assumes a solid
// Colors.primary fill behind it — true for a hovered *disconnected*
// row, but a connected row's background stays the translucent tint
// above even while hovered, so primaryText (dark, meant for a bright
// solid fill) reads poorly against it. This hardcoded near-white
// (same one NetworkIndicator.qml/TailscaleIndicator.qml use for the
// same reason) is used instead for that one case.
readonly property color activeHoverColor: "#c9f0f0f0"
// Hover checked first (same ordering as Volume.qml's DeviceRow):
// hovering always shows a solid Colors.primary fill, even for an
// already-connected row, so the primaryText used below never has to
// sit on top of the dimmer translucent tint instead.
color: rowMouse.containsMouse ? Colors.primary
: (devRow.dev.connected ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) : "transparent")
// Hover-only outline, offset outside the row rather than drawn on
// its own edge — same treatment as NetworkIndicator.qml's NetworkRow.
@@ -257,7 +251,7 @@ Item {
font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14
color: rowMouse.containsMouse ? (devRow.dev.connected ? devRow.activeHoverColor : Colors.primaryText) : Colors.foreground
color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
}
ColumnLayout {
@@ -271,7 +265,7 @@ Item {
font.family: Appearance.fontFamily
font.pixelSize: Appearance.fontSize
font.bold: devRow.dev.connected
color: rowMouse.containsMouse ? (devRow.dev.connected ? devRow.activeHoverColor : Colors.primaryText) : Colors.foreground
color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
}
Text {
readonly property string statusText: {
@@ -285,7 +279,7 @@ Item {
text: statusText
font.family: Appearance.fontFamily
font.pixelSize: Appearance.fontSizeSmall
color: rowMouse.containsMouse ? (devRow.dev.connected ? devRow.activeHoverColor : Colors.primaryText) : Colors.muted
color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted
}
}
@@ -296,7 +290,7 @@ Item {
font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14
color: rowMouse.containsMouse ? (devRow.dev.connected ? devRow.activeHoverColor : Colors.primaryText) : Colors.muted
color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted
}
}