Fix: hover button fix

This commit is contained in:
2026-08-27 10:45:36 +01:00
parent 185b752393
commit c8a9c30fc5
2 changed files with 33 additions and 9 deletions

View File

@@ -645,6 +645,16 @@ Item {
color: (netRow.net.connected || netRow.passwordOpen)
? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18)
: (rowMouse.containsMouse ? Colors.primary : "transparent")
readonly property bool active: netRow.net.connected || netRow.passwordOpen
// Colors.primaryText (used below whenever hovered) assumes a solid
// Colors.primary fill behind it — true for a hovered *inactive* row,
// but an active 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
// TailscaleIndicator.qml uses for the same reason) is used instead
// for that one case.
readonly property color activeHoverColor: "#c9f0f0f0"
// Hover-only outline, offset outside the row rather than drawn on
// its own edge — same treatment as ToggleSwitch's halo and the DNS
@@ -680,7 +690,7 @@ Item {
font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 16
color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
color: rowMouse.containsMouse ? (netRow.active ? netRow.activeHoverColor : Colors.primaryText) : Colors.foreground
// The wifi-fan glyph itself is flat/wide — stretch it
// vertically to read taller while keeping its width (and
// the layout around it) unchanged.
@@ -701,14 +711,14 @@ Item {
font.family: Appearance.fontFamily
font.pixelSize: Appearance.fontSize
font.bold: netRow.net.connected
color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
color: rowMouse.containsMouse ? (netRow.active ? netRow.activeHoverColor : Colors.primaryText) : Colors.foreground
}
Text {
visible: netRow.net.connected
text: "Connected"
font.family: Appearance.fontFamily
font.pixelSize: Appearance.fontSizeSmall
color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
color: rowMouse.containsMouse ? (netRow.active ? netRow.activeHoverColor : Colors.primaryText) : Colors.foreground
}
}
Text {
@@ -717,7 +727,7 @@ Item {
font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 13
color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted
color: rowMouse.containsMouse ? (netRow.active ? netRow.activeHoverColor : Colors.primaryText) : Colors.muted
}
Text {
id: forgetIcon
@@ -726,7 +736,7 @@ Item {
font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14
color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted
color: rowMouse.containsMouse ? (netRow.active ? netRow.activeHoverColor : Colors.primaryText) : Colors.muted
}
}
}
@@ -1204,12 +1214,19 @@ Item {
Column {
id: networkListColumn
// Inset 3px on each side (rather than flush with
// Inset 3px on every side (rather than flush with
// the Flickable) so NetworkRow's hover halo below
// has room to sit outside the row without being
// cropped by the Flickable's own clip.
// cropped by the Flickable's own clip. Left/right
// needs the manual x/width shift (children bind
// width: parent.width, which ignores Column's own
// padding); top/bottom just needs padding, since
// that's along Column's own layout axis and the
// Flickable's contentHeight tracks it.
x: 3
width: networkListFlick.width - 6
topPadding: 3
bottomPadding: 3
spacing: 6
Column {

View File

@@ -1097,11 +1097,18 @@ Item {
Column {
id: listColumn
// Inset 3px on each side so ExitNodeRow/PeerRow's
// Inset 3px on every side so ExitNodeRow/PeerRow's
// hover halo has room without being cropped by
// listFlick's clip.
// listFlick's clip. Left/right needs the manual
// x/width shift (children bind width: parent.width,
// which ignores Column's own padding); top/bottom
// just needs padding, since that's along Column's
// own layout axis and Flickable's contentHeight
// tracks it.
x: 3
width: listFlick.width - 6
topPadding: 3
bottomPadding: 3
spacing: 6
Column {