restructure bar components layout

2026-08-15 14:18:00 +02:00
parent 0092b41a05
commit 9823c66299
34 changed files with 69 additions and 278 deletions
@@ -0,0 +1,140 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Hyprland
+import ZShell.Config
+import qs.Modules.Bar.Components.Workspaces
+import qs.Components
+import qs.Services
+
+Item {
+	id: root
+
+	property real activeWorkspaceMargin: Math.ceil(Tokens.padding.small / 2)
+	readonly property int effectiveActiveWorkspaceId: monitor?.activeWorkspace?.id ?? 1
+	required property bool horizontal
+	readonly property HyprlandMonitor monitor: Hyprland.monitorFor(root.screen)
+	required property ShellScreen screen
+	readonly property real shortSize: Math.max(Config.bar.height, Tokens.bar.innerSize)
+	readonly property real size: (workspaceButtonWidth * workspacesShown) + activeWorkspaceMargin * 2
+	property int workspaceButtonWidth: (horizontal ? bgRect.implicitHeight : bgRect.implicitWidth) - root.activeWorkspaceMargin * 2
+	property int workspaceIndexInGroup: (effectiveActiveWorkspaceId - 1) % root.workspacesShown
+	readonly property list<var> workspaces: Hyprland.workspaces.values.filter(w => w.monitor === root.monitor)
+	readonly property int workspacesShown: workspaces.length
+
+	implicitHeight: horizontal ? shortSize : size
+	implicitWidth: horizontal ? size : shortSize
+
+	Behavior on implicitHeight {
+		enabled: !root.horizontal
+
+		Anim {
+		}
+	}
+	Behavior on implicitWidth {
+		enabled: root.horizontal
+
+		Anim {
+		}
+	}
+
+	CustomRect {
+		// qmllint disable Quick.anchor-combinations
+		id: bgRect
+
+		anchors.bottom: root.horizontal ? undefined : parent.bottom
+		anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
+		anchors.left: root.horizontal ? parent.left : undefined
+		anchors.right: root.horizontal ? parent.right : undefined
+		anchors.top: root.horizontal ? undefined : parent.top
+		anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
+		color: Colors.tPalette.m3surfaceContainer
+		implicitHeight: root.horizontal ? root.implicitHeight : 0
+		implicitWidth: root.horizontal ? 0 : root.implicitWidth
+		radius: height / 2
+
+		// qmllint enable Quick.anchor-combinations
+		Grid {
+			id: grid
+
+			anchors.fill: parent
+			anchors.margins: root.activeWorkspaceMargin
+			columnSpacing: 0
+			columns: root.horizontal ? root.workspacesShown : 1
+			rowSpacing: 0
+			rows: root.horizontal ? 1 : root.workspacesShown
+
+			Repeater {
+				model: root.workspaces
+
+				Button {
+					id: button
+
+					required property int index
+					required property HyprlandWorkspace modelData
+
+					implicitHeight: indicator.indicatorThickness
+					implicitWidth: indicator.indicatorThickness
+					width: root.workspaceButtonWidth
+
+					background: Item {
+						id: workspaceButtonBackground
+
+						implicitHeight: root.workspaceButtonWidth
+						implicitWidth: root.workspaceButtonWidth
+
+						CustomText {
+							anchors.centerIn: parent
+							color: Colors.palette.m3onSecondaryContainer
+							elide: Text.ElideRight
+							horizontalAlignment: Text.AlignHCenter
+							text: button.modelData?.name ?? ""
+							verticalAlignment: Text.AlignVCenter
+						}
+					}
+
+					onPressed: {
+						const ws = button.modelData.name;
+						Hyprland.dispatch(Hyprland.usingLua ? `hl.dsp.focus({ workspace= "${ws}"})` : `workspace ${ws}`);
+					}
+				}
+			}
+		}
+
+		CustomRect {
+			id: indicator
+
+			property real indicatorLength: (Math.abs(idxPair.idx1 - idxPair.idx2) + 1) * root.workspaceButtonWidth
+			property real indicatorPosition: Math.min(idxPair.idx1, idxPair.idx2) * root.workspaceButtonWidth + root.activeWorkspaceMargin
+			property real indicatorThickness: root.workspaceButtonWidth
+
+			anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
+			anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
+			clip: true
+			color: Colors.palette.m3primary
+			implicitHeight: root.horizontal ? indicatorThickness : indicatorLength
+			implicitWidth: root.horizontal ? indicatorLength : indicatorThickness
+			radius: Tokens.rounding.full
+			x: root.horizontal ? indicatorPosition : 0
+			y: root.horizontal ? 0 : indicatorPosition
+
+			AnimatedTabIndexPair {
+				id: idxPair
+
+				index: root.workspaces.findIndex(w => w.active)
+			}
+
+			Coloriser {
+				colorizationColor: Colors.palette.m3onPrimary
+				implicitHeight: grid.height
+				implicitWidth: grid.width
+				source: grid
+				sourceColor: Colors.palette.m3onSurface
+				x: root.horizontal ? -indicator.x + 3 : 0
+				y: root.horizontal ? 0 : -indicator.y + 3
+			}
+		}
+	}
+}