Fix: hover button fix
This commit is contained in:
@@ -645,6 +645,16 @@ Item {
|
|||||||
color: (netRow.net.connected || netRow.passwordOpen)
|
color: (netRow.net.connected || netRow.passwordOpen)
|
||||||
? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18)
|
? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18)
|
||||||
: (rowMouse.containsMouse ? Colors.primary : "transparent")
|
: (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
|
// Hover-only outline, offset outside the row rather than drawn on
|
||||||
// its own edge — same treatment as ToggleSwitch's halo and the DNS
|
// its own edge — same treatment as ToggleSwitch's halo and the DNS
|
||||||
@@ -680,7 +690,7 @@ Item {
|
|||||||
font.family: Appearance.iconFontFamilyRounded
|
font.family: Appearance.iconFontFamilyRounded
|
||||||
font.variableAxes: Appearance.iconFontAxes
|
font.variableAxes: Appearance.iconFontAxes
|
||||||
font.pixelSize: 16
|
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
|
// The wifi-fan glyph itself is flat/wide — stretch it
|
||||||
// vertically to read taller while keeping its width (and
|
// vertically to read taller while keeping its width (and
|
||||||
// the layout around it) unchanged.
|
// the layout around it) unchanged.
|
||||||
@@ -701,14 +711,14 @@ Item {
|
|||||||
font.family: Appearance.fontFamily
|
font.family: Appearance.fontFamily
|
||||||
font.pixelSize: Appearance.fontSize
|
font.pixelSize: Appearance.fontSize
|
||||||
font.bold: netRow.net.connected
|
font.bold: netRow.net.connected
|
||||||
color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
|
color: rowMouse.containsMouse ? (netRow.active ? netRow.activeHoverColor : Colors.primaryText) : Colors.foreground
|
||||||
}
|
}
|
||||||
Text {
|
Text {
|
||||||
visible: netRow.net.connected
|
visible: netRow.net.connected
|
||||||
text: "Connected"
|
text: "Connected"
|
||||||
font.family: Appearance.fontFamily
|
font.family: Appearance.fontFamily
|
||||||
font.pixelSize: Appearance.fontSizeSmall
|
font.pixelSize: Appearance.fontSizeSmall
|
||||||
color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
|
color: rowMouse.containsMouse ? (netRow.active ? netRow.activeHoverColor : Colors.primaryText) : Colors.foreground
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Text {
|
Text {
|
||||||
@@ -717,7 +727,7 @@ Item {
|
|||||||
font.family: Appearance.iconFontFamilyRounded
|
font.family: Appearance.iconFontFamilyRounded
|
||||||
font.variableAxes: Appearance.iconFontAxes
|
font.variableAxes: Appearance.iconFontAxes
|
||||||
font.pixelSize: 13
|
font.pixelSize: 13
|
||||||
color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted
|
color: rowMouse.containsMouse ? (netRow.active ? netRow.activeHoverColor : Colors.primaryText) : Colors.muted
|
||||||
}
|
}
|
||||||
Text {
|
Text {
|
||||||
id: forgetIcon
|
id: forgetIcon
|
||||||
@@ -726,7 +736,7 @@ Item {
|
|||||||
font.family: Appearance.iconFontFamilyRounded
|
font.family: Appearance.iconFontFamilyRounded
|
||||||
font.variableAxes: Appearance.iconFontAxes
|
font.variableAxes: Appearance.iconFontAxes
|
||||||
font.pixelSize: 14
|
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 {
|
Column {
|
||||||
id: networkListColumn
|
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
|
// the Flickable) so NetworkRow's hover halo below
|
||||||
// has room to sit outside the row without being
|
// 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
|
x: 3
|
||||||
width: networkListFlick.width - 6
|
width: networkListFlick.width - 6
|
||||||
|
topPadding: 3
|
||||||
|
bottomPadding: 3
|
||||||
spacing: 6
|
spacing: 6
|
||||||
|
|
||||||
Column {
|
Column {
|
||||||
|
|||||||
@@ -1097,11 +1097,18 @@ Item {
|
|||||||
|
|
||||||
Column {
|
Column {
|
||||||
id: listColumn
|
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
|
// 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
|
x: 3
|
||||||
width: listFlick.width - 6
|
width: listFlick.width - 6
|
||||||
|
topPadding: 3
|
||||||
|
bottomPadding: 3
|
||||||
spacing: 6
|
spacing: 6
|
||||||
|
|
||||||
Column {
|
Column {
|
||||||
|
|||||||
Reference in New Issue
Block a user