Files
quickshell_bar/widgets/Bar.qml
Asmir A 6655c9c500 bar: wrap onto two rows when one row doesn't fit
On narrow outputs (portrait rotation) the single-row layout overflowed.
Compare the needed width (implicit sizes of all three clusters) against
the window width; when it doesn't fit, double the bar height and move
the metric pills to a second row, keeping workspaces + clock/tray on
the first.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-06-10 21:41:13 +02:00

93 lines
2.6 KiB
QML

import QtQuick
import QtQuick.Layouts
import Quickshell
import "../config"
// One bar instance per monitor.
PanelWindow {
id: panel
required property var modelData
screen: modelData
color: "transparent"
// Auto-rotation flips the output transform and resizes this layer surface
// in place; the old buffer bleeds through the area that isn't fully
// repainted, leaving stale "garbage" pixels. Remapping the surface on any
// geometry change forces Sway to hand us a fresh, fully-painted buffer.
readonly property string geomKey: modelData
? (modelData.width + "x" + modelData.height)
: ""
onGeomKeyChanged: Qt.callLater(function () {
if (!panel.visible) return;
panel.visible = false;
panel.visible = true;
})
anchors {
top: true
left: true
right: true
}
// Wrap onto two rows when a single row can't hold everything (portrait
// outputs). Needed width is computed from implicit sizes, which don't
// depend on which row anything sits in, so this can't bind-loop.
readonly property real neededWidth:
(Theme.gap + 2) * 2 // outer margins
+ workspaces.implicitWidth
+ Theme.gap * 4 // breathing room between clusters
+ metricsRow.implicitWidth
+ Theme.gap
+ endRow.implicitWidth
readonly property bool twoRows: width > 0 && neededWidth > width
implicitHeight: twoRows ? Theme.barHeight * 2 : Theme.barHeight
// background strip
Rectangle {
anchors.fill: parent
color: Theme.barColor
}
// row 1 left: workspaces
Workspaces {
id: workspaces
anchors.left: parent.left
anchors.leftMargin: Theme.gap + 2
y: (Theme.barHeight - height) / 2
screen: panel.modelData
}
// row 1 right: clock, tray
RowLayout {
id: endRow
anchors.right: parent.right
anchors.rightMargin: Theme.gap + 2
y: (Theme.barHeight - height) / 2
spacing: Theme.gap
Clock {}
Tray { panelWindow: panel }
}
// metrics: left of the clock in one-row mode, own second row when narrow
RowLayout {
id: metricsRow
anchors.right: panel.twoRows ? parent.right : endRow.left
anchors.rightMargin: panel.twoRows ? Theme.gap + 2 : Theme.gap
y: panel.twoRows
? Theme.barHeight + (Theme.barHeight - height) / 2
: (Theme.barHeight - height) / 2
spacing: Theme.gap
Battery {}
CpuGraph {}
CpuTemp {}
Ram {}
Disk {}
Network {}
Volume {}
}
}