Separate transparent bar foreground from panel text

This commit is contained in:
David Heinemeier Hansson
2026-05-27 14:23:13 +02:00
parent e490f743db
commit d6fa701543
9 changed files with 21 additions and 16 deletions
+7 -6
View File
@@ -51,12 +51,13 @@ Item {
property color themeForeground: Color.bar.text
property color themeContrastForeground: Color.background
property color transparentForeground: Color.bar.text
property color foreground: useTransparentForeground ? transparentForeground : themeForeground
property color foreground: themeForeground
property color barForeground: useTransparentForeground ? transparentForeground : themeForeground
property bool foregroundAnimationEnabled: true
property color background: Color.bar.background
property color urgent: Color.bar.active
Behavior on foreground { enabled: root.foregroundAnimationEnabled; ColorAnimation { duration: 420; easing.type: Easing.InOutCubic } }
Behavior on barForeground { enabled: root.foregroundAnimationEnabled; ColorAnimation { duration: 420; easing.type: Easing.InOutCubic } }
Behavior on background { ColorAnimation { duration: 420; easing.type: Easing.InOutCubic } }
Behavior on urgent { ColorAnimation { duration: 420; easing.type: Easing.InOutCubic } }
property var tooltipTarget: null
@@ -1026,7 +1027,7 @@ Item {
bottom: parent.bottom
}
width: 2
color: root.foreground
color: root.barForeground
opacity: 0.9
}
@@ -1038,7 +1039,7 @@ Item {
bottom: parent.bottom
}
width: 2
color: root.foreground
color: root.barForeground
opacity: 0.9
}
@@ -1050,7 +1051,7 @@ Item {
top: parent.top
}
height: 2
color: root.foreground
color: root.barForeground
opacity: 0.9
}
@@ -1062,7 +1063,7 @@ Item {
bottom: parent.bottom
}
height: 2
color: root.foreground
color: root.barForeground
opacity: 0.9
}
+1 -1
View File
@@ -33,7 +33,7 @@ BarWidget {
anchors.left: parent.left
width: parent.width
text: root.title
color: root.bar ? root.bar.foreground : Color.foreground
color: root.bar ? root.bar.barForeground : Color.foreground
font.family: root.bar ? root.bar.fontFamily : Style.font.family
font.pixelSize: Style.font.body
elide: Text.ElideRight
+1 -1
View File
@@ -87,7 +87,7 @@ BarWidget {
property bool active: false
text: glyph
color: active ? (root.bar ? root.bar.foreground : Color.foreground) : Qt.rgba(0.7, 0.7, 0.7, 0.3)
color: active ? (root.bar ? root.bar.barForeground : Color.foreground) : Qt.rgba(0.7, 0.7, 0.7, 0.3)
font.family: root.bar ? root.bar.fontFamily : Style.font.family
font.pixelSize: Style.font.bodySmall
}
+3 -3
View File
@@ -89,7 +89,7 @@ BarWidget {
onTriggered: root.refresh()
}
readonly property color statColor: bar ? bar.foreground : Color.foreground
readonly property color statColor: bar ? bar.barForeground : Color.foreground
implicitWidth: button.implicitWidth
implicitHeight: button.implicitHeight
@@ -167,7 +167,7 @@ BarWidget {
title: "CPU"
value: Math.round(root.cpuPercent) + "%"
history: root.cpuHistory
barFg: root.statColor
barFg: root.bar.foreground
fontFamily: root.bar.fontFamily
width: parent.width
}
@@ -176,7 +176,7 @@ BarWidget {
title: "Memory"
value: Math.round(root.memPercent) + "%"
history: root.memHistory
barFg: root.statColor
barFg: root.bar.foreground
fontFamily: root.bar.fontFamily
width: parent.width
}
+2 -1
View File
@@ -36,6 +36,7 @@ Panel {
readonly property color dim: Qt.darker(foreground, 1.55)
readonly property string fontFamily: bar ? bar.fontFamily : Style.font.family
readonly property color iconColor: dropbox.authenticated ? foreground : dim
readonly property color barIconColor: dropbox.authenticated ? barForeground : Qt.darker(barForeground, 1.55)
function ensureCursor() {
if (!dropbox.authenticated) {
@@ -168,7 +169,7 @@ Panel {
DropboxIcon {
anchors.centerIn: parent
iconSize: Style.space(12)
color: root.iconColor
color: root.barIconColor
opacity: dropbox.authenticated ? 1.0 : 0.6
}
+2 -1
View File
@@ -43,6 +43,7 @@ Panel {
readonly property var exitNodes: tailscale.exitNodes
readonly property bool showExitNodes: tailscale.running && exitNodes.length > 0
readonly property color iconColor: tailscale.running ? foreground : dim
readonly property color barIconColor: tailscale.running ? barForeground : Qt.darker(barForeground, 1.55)
readonly property color hoverFill: bar ? Style.hoverFillFor(bar.foreground, Color.accent) : "transparent"
readonly property color selectedFill: bar ? Style.selectedFillFor(bar.foreground, Color.accent) : "transparent"
@@ -260,7 +261,7 @@ Panel {
anchors.centerIn: parent
anchors.verticalCenterOffset: -Style.space(1)
iconSize: Style.space(12) * 0.85
color: root.iconColor
color: root.barIconColor
badgeColor: root.urgent
crossed: !tailscale.running && !tailscale.needsLogin
warning: tailscale.needsLogin
+2 -2
View File
@@ -34,7 +34,7 @@ BarWidget {
id: glyph
anchors.verticalCenter: parent.verticalCenter
text: root.playIcon
color: activePlayer && activePlayer.isPlaying ? root.bar.foreground : Qt.darker(root.bar.foreground, 1.5)
color: activePlayer && activePlayer.isPlaying ? root.bar.barForeground : Qt.darker(root.bar.barForeground, 1.5)
font.family: root.bar.fontFamily
font.pixelSize: Style.font.body
Behavior on color {
@@ -54,7 +54,7 @@ BarWidget {
Text {
id: labelText
text: root.title + (root.artist ? " · " + root.artist : "")
color: root.bar.foreground
color: root.bar.barForeground
font.family: root.bar.fontFamily
font.pixelSize: Style.font.body
anchors.verticalCenter: parent.verticalCenter