thomas/dotfiles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Fixed hover colours

Browse Source
This commit is contained in:
Thomas Williams
2026-08-27 13:02:34 +01:00
parent 4b0b5c72ba
commit fcce5f304b
4 changed files with 72 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
dotfiles/.config/quickshell/modules/bar/BluetoothIndicator.qml
View File

@@ -213,18 +213,12 @@ Item {
width: parent ? parent.width : 0 width: parent ? parent.width : 0
radius: 0 radius: 0
implicitHeight: rowContent.implicitHeight + 12 implicitHeight: rowContent.implicitHeight + 12
color: devRow.dev.connected // Hover checked first (same ordering as Volume.qml's DeviceRow):
? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) // hovering always shows a solid Colors.primary fill, even for an
: (rowMouse.containsMouse ? Colors.primary : "transparent") // already-connected row, so the primaryText used below never has to
// sit on top of the dimmer translucent tint instead.
// Colors.primaryText (used below whenever hovered) assumes a solid color: rowMouse.containsMouse ? Colors.primary
// Colors.primary fill behind it — true for a hovered *disconnected* : (devRow.dev.connected ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) : "transparent")
// 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-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 NetworkIndicator.qml's NetworkRow. // its own edge — same treatment as NetworkIndicator.qml's NetworkRow.
@@ -257,7 +251,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 ? (devRow.dev.connected ? devRow.activeHoverColor : Colors.primaryText) : Colors.foreground color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
} }
ColumnLayout { ColumnLayout {
@@ -271,7 +265,7 @@ Item {
font.family: Appearance.fontFamily font.family: Appearance.fontFamily
font.pixelSize: Appearance.fontSize font.pixelSize: Appearance.fontSize
font.bold: devRow.dev.connected 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 { Text {
readonly property string statusText: { readonly property string statusText: {
@@ -285,7 +279,7 @@ Item {
text: statusText text: statusText
font.family: Appearance.fontFamily font.family: Appearance.fontFamily
font.pixelSize: Appearance.fontSizeSmall 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.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: 14 font.pixelSize: 14
color: rowMouse.containsMouse ? (devRow.dev.connected ? devRow.activeHoverColor : Colors.primaryText) : Colors.muted color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted
} }
} }

29
dotfiles/.config/quickshell/modules/bar/NetworkIndicator.qml
View File

@@ -660,19 +660,12 @@ Item {
width: parent ? parent.width : 0 width: parent ? parent.width : 0
radius: 0 radius: 0
implicitHeight: rowContent.implicitHeight + 12 implicitHeight: rowContent.implicitHeight + 12
color: (netRow.net.connected || netRow.passwordOpen) // Hover checked first (same ordering as Volume.qml's DeviceRow):
? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) // hovering always shows a solid Colors.primary fill, even for an
: (rowMouse.containsMouse ? Colors.primary : "transparent") // already-active row, so the primaryText used below never has to
readonly property bool active: netRow.net.connected || netRow.passwordOpen // sit on top of the dimmer translucent tint instead.
color: rowMouse.containsMouse ? Colors.primary
// Colors.primaryText (used below whenever hovered) assumes a solid : ((netRow.net.connected || netRow.passwordOpen) ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) : "transparent")
// 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
@@ -708,7 +701,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 ? (netRow.active ? netRow.activeHoverColor : Colors.primaryText) : Colors.foreground color: rowMouse.containsMouse ? 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.
@@ -729,14 +722,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 ? (netRow.active ? netRow.activeHoverColor : Colors.primaryText) : Colors.foreground color: rowMouse.containsMouse ? 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 ? (netRow.active ? netRow.activeHoverColor : Colors.primaryText) : Colors.foreground color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
} }
} }
Text { Text {
@@ -745,7 +738,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 ? (netRow.active ? netRow.activeHoverColor : Colors.primaryText) : Colors.muted color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted
} }
Text { Text {
id: forgetIcon id: forgetIcon
@@ -754,7 +747,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 ? (netRow.active ? netRow.activeHoverColor : Colors.primaryText) : Colors.muted color: rowMouse.containsMouse ? Colors.primaryText : Colors.muted
} }
} }
} }

49
dotfiles/.config/quickshell/modules/bar/PowerButton.qml
View File

@@ -41,10 +41,12 @@ Item {
id: menu id: menu
visible: false visible: false
color: "transparent" color: "transparent"
implicitWidth: 210 // Same contentWidth/contentPadding split as the other panels
// Same padding as Volume.qml's panel. // (Volume.qml, NetworkIndicator.qml, etc.) rather than a single
// magic implicitWidth.
readonly property int contentWidth: 178
readonly property int contentPadding: 16 readonly property int contentPadding: 16
readonly property int labelOffset: -135 implicitWidth: contentWidth + contentPadding * 2
implicitHeight: mainColumn.implicitHeight + contentPadding * 2 implicitHeight: mainColumn.implicitHeight + contentPadding * 2
anchor { anchor {
@@ -122,36 +124,55 @@ Item {
{ label: "Shut down", icon: "power_settings_new", cmd: ["systemctl", "poweroff"] } { label: "Shut down", icon: "power_settings_new", cmd: ["systemctl", "poweroff"] }
] ]
// Same shape as this project's other selectable rows
// (e.g. VpnIndicator.qml's ProviderRow,
// TailscaleIndicator.qml's ExitNodeRow): radius 0, a
// fixed-width icon column followed by a fillWidth
// label, and an offset hover halo rather than one
// drawn on the row's own edge.
delegate: Rectangle { delegate: Rectangle {
id: entry id: entry
required property var modelData required property var modelData
width: parent ? parent.width : 0 width: parent ? parent.width : 0
height: 40 radius: 0
radius: Appearance.radiusSmall implicitHeight: entryContent.implicitHeight + 12
color: (!entry.modelData.disabled && entryMouse.containsMouse) ? Colors.primary : "transparent" color: (!entry.modelData.disabled && entryMouse.containsMouse) ? Colors.primary : "transparent"
RowLayout { Rectangle {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: 8 anchors.margins: -3
radius: 0
color: "transparent"
border.color: Colors.foreground
border.width: entryMouse.containsMouse ? 1 : 0
}
RowLayout {
id: entryContent
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.margins: 6
spacing: 8 spacing: 8
Text { Text {
Layout.preferredWidth: 25 Layout.preferredWidth: 20
Layout.minimumWidth: 25 Layout.minimumWidth: 20
Layout.maximumWidth: 25 Layout.maximumWidth: 20
horizontalAlignment: Text.AlignLeft horizontalAlignment: Text.AlignLeft
text: entry.modelData.icon text: entry.modelData.icon
font.family: Appearance.iconFontFamilyRounded font.family: Appearance.iconFontFamilyRounded
font.variableAxes: Appearance.iconFontAxes font.variableAxes: Appearance.iconFontAxes
font.pixelSize: entry.modelData.iconSize || 15 font.pixelSize: 14
opacity: entry.modelData.disabled ? 0.4 : 1 opacity: entry.modelData.disabled ? 0.4 : 1
color: entryMouse.containsMouse ? Colors.primaryText : Colors.foreground color: entryMouse.containsMouse ? Colors.primaryText : Colors.foreground
} }
Text { Text {
Layout.leftMargin: menu.labelOffset + (entry.modelData.textOffset || 0) Layout.fillWidth: true
text: entry.modelData.label text: entry.modelData.label
horizontalAlignment: Text.AlignLeft elide: Text.ElideRight
font.family: Appearance.fontFamily font.family: Appearance.fontFamily
font.pixelSize: 16 font.pixelSize: Appearance.fontSize
opacity: entry.modelData.disabled ? 0.4 : 1 opacity: entry.modelData.disabled ? 0.4 : 1
color: entryMouse.containsMouse ? Colors.primaryText : Colors.foreground color: entryMouse.containsMouse ? Colors.primaryText : Colors.foreground
} }

34
dotfiles/.config/quickshell/modules/bar/TailscaleIndicator.qml
View File

@@ -547,18 +547,12 @@ Item {
width: parent ? parent.width : 0 width: parent ? parent.width : 0
radius: 0 radius: 0
implicitHeight: rowContent.implicitHeight + 12 implicitHeight: rowContent.implicitHeight + 12
color: exitRow.active // Hover checked first (same ordering as Volume.qml's DeviceRow):
? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) // hovering always shows a solid Colors.primary fill, even for an
: (rowMouse.containsMouse ? Colors.primary : "transparent") // already-active row, so the primaryText used below never has to
// sit on top of the dimmer translucent tint instead.
// Colors.primaryText (used below whenever hovered) assumes a solid color: rowMouse.containsMouse ? Colors.primary
// Colors.primary fill behind it — true for a hovered *inactive* row, : (exitRow.active ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) : "transparent")
// 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
// used for TailscaleLogo's bright dots, for the same "needs to be
// reliably visible" 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 NetworkIndicator.qml's NetworkRow. // its own edge — same treatment as NetworkIndicator.qml's NetworkRow.
@@ -590,7 +584,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 ? (exitRow.active ? exitRow.activeHoverColor : Colors.primaryText) : Colors.foreground color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
} }
Text { Text {
Layout.fillWidth: true Layout.fillWidth: true
@@ -599,7 +593,7 @@ Item {
font.family: Appearance.fontFamily font.family: Appearance.fontFamily
font.pixelSize: Appearance.fontSize font.pixelSize: Appearance.fontSize
font.bold: exitRow.active font.bold: exitRow.active
color: rowMouse.containsMouse ? (exitRow.active ? exitRow.activeHoverColor : Colors.primaryText) : Colors.foreground color: rowMouse.containsMouse ? Colors.primaryText : Colors.foreground
} }
Text { Text {
visible: exitRow.active visible: exitRow.active
@@ -607,7 +601,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 ? exitRow.activeHoverColor : Colors.primary color: rowMouse.containsMouse ? Colors.primaryText : Colors.primary
} }
} }
@@ -631,9 +625,13 @@ Item {
width: parent ? parent.width : 0 width: parent ? parent.width : 0
radius: 0 radius: 0
implicitHeight: accountContent.implicitHeight + 12 implicitHeight: accountContent.implicitHeight + 12
color: accountRow.selected // Hover checked first (same ordering as Volume.qml's DeviceRow):
? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) // hovering always shows a solid Colors.primary fill, even for an
: (accountMouse.containsMouse ? Colors.primary : "transparent") // already-selected row, so the primaryText the texts below already
// assume on hover is always correct (this row had the same
// active-first ordering bug as ExitNodeRow, just never reported).
color: accountMouse.containsMouse ? Colors.primary
: (accountRow.selected ? Qt.rgba(Colors.primary.r, Colors.primary.g, Colors.primary.b, 0.18) : "transparent")
// Hover-only outline, offset outside the row — same treatment as // Hover-only outline, offset outside the row — same treatment as
// ExitNodeRow/NetworkRow. Not inside a clipped Flickable, so no // ExitNodeRow/NetworkRow. Not inside a clipped Flickable, so no