rope/nixos
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

quickshell: single-surface bar+dropdowns for uniform blur

Browse source 
Make bar full-screen with exclusiveZone 30 and render dropdowns
as Items inside it instead of separate PanelWindows. One surface
means one uniform blur. Input mask ensures clicks pass through
transparent areas.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
rope 2026-05-27 15:38:01 +01:00
parent 658bcf3703
commit fb8854489e
1 changed files with 28 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

50
settings/hyprland.nix
View file

@ -537,7 +537,7 @@ in
readonly property color base0B: "#${c.base0B}" readonly property color base0B: "#${c.base0B}"
readonly property color base0C: "#${c.base0C}" readonly property color base0C: "#${c.base0C}"
readonly property color base0D: "#${c.base0D}" readonly property color base0D: "#${c.base0D}"
readonly property color barBg: "#E6${c.base00}" readonly property color barBg: "#B3${c.base00}"
readonly property color toastBg: "#E6${c.base00}" readonly property color toastBg: "#E6${c.base00}"
} }
''; '';
@ -626,13 +626,28 @@ in
top: true top: true
left: true left: true
right: true right: true
bottom: true
} }
implicitHeight: 30 exclusiveZone: 30
color: "transparent" color: "transparent"
mask: Region {
item: barBgRect
Region {
x: activeDropdown ? activeDropdown.x : 0
y: activeDropdown ? activeDropdown.y : 0
width: activeDropdown && activeDropdown.visible ? activeDropdown.width : 0
height: activeDropdown && activeDropdown.visible ? activeDropdown.height : 0
}
}
Rectangle { Rectangle {
anchors.fill: parent id: barBgRect
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: 30
color: Theme.barBg color: Theme.barBg
} }
@ -667,7 +682,7 @@ in
Row { Row {
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 6 anchors.leftMargin: 6
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: barBgRect.verticalCenter
spacing: 0 spacing: 0
Repeater { Repeater {
@ -706,7 +721,8 @@ in
// Center — clock // Center — clock
Text { Text {
id: clockText id: clockText
anchors.centerIn: parent anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: barBgRect.verticalCenter
property date now: new Date() property date now: new Date()
text: now.toLocaleTimeString(Qt.locale(), "HH:mm") text: now.toLocaleTimeString(Qt.locale(), "HH:mm")
color: Theme.base05 color: Theme.base05
@ -738,7 +754,7 @@ in
Row { Row {
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 8 anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: barBgRect.verticalCenter
spacing: 10 spacing: 10
// Volume // Volume
@ -1167,7 +1183,7 @@ in
} }
// Reusable dropdown component // Reusable dropdown component
component BarDropdown: PanelWindow { component BarDropdown: Item {
id: dropdown id: dropdown
property bool open: false property bool open: false
property bool closing: false property bool closing: false
@ -1190,24 +1206,14 @@ in
if (visible && !closing) _autoClose.restart(); if (visible && !closing) _autoClose.restart();
} }
screen: bar.screen x: alignRight ? bar.width - width : Math.min(
WlrLayershell.namespace: "quickshell-bar" bar.width - width,
WlrLayershell.layer: WlrLayer.Overlay
exclusionMode: ExclusionMode.Ignore
anchors {
top: true
left: !alignRight
right: alignRight
}
margins.top: bar.implicitHeight
margins.left: alignRight ? 0 : Math.min(
bar.width - implicitWidth,
Math.max(0, dropdownX - (fullWidth + 16) / 2) Math.max(0, dropdownX - (fullWidth + 16) / 2)
) )
y: 30
visible: false visible: false
color: "transparent" width: fullWidth + (alignRight ? 8 : 16)
implicitWidth: fullWidth + (alignRight ? 8 : 16) height: fullHeight + 4 + (alignRight ? 8 : 0)
implicitHeight: fullHeight + 4 + (alignRight ? 8 : 0)
onVisibleChanged: { onVisibleChanged: {
if (visible) { if (visible) {