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,239 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Effects
+import qs.Components
+import qs.Modules
+import ZShell.Config
+import qs.Services
+
+StackView {
+	id: root
+
+	readonly property int itemHeight: 30
+	readonly property int panelRadius: ((itemHeight / 2) + Tokens.padding.small) * Tokens.rounding.scale
+	required property PopoutState popouts
+	property int rootWidth: 0
+	required property QsMenuHandle trayItem
+
+	implicitHeight: currentItem.isSubMenu ? currentItem.implicitHeight : currentItem.implicitHeight - currentItem.spacing
+	implicitWidth: currentItem.implicitWidth
+
+	initialItem: SubMenu {
+		handle: root.trayItem
+	}
+	popEnter: NoAnim {
+	}
+	popExit: NoAnim {
+	}
+	pushEnter: NoAnim {
+	}
+	pushExit: NoAnim {
+	}
+
+	Component {
+		id: subMenuComp
+
+		SubMenu {
+		}
+	}
+
+	component NoAnim: Transition {
+		NumberAnimation {
+			duration: 0
+		}
+	}
+	component SubMenu: ColumnLayout {
+		id: menu
+
+		required property QsMenuHandle handle
+		property bool isSubMenu
+		property bool shown
+
+		opacity: shown ? 1 : 0
+		scale: shown ? 1 : 0.8
+		spacing: Tokens.spacing.extraSmall
+
+		Behavior on opacity {
+			Anim {
+			}
+		}
+		Behavior on scale {
+			Anim {
+			}
+		}
+
+		Component.onCompleted: shown = true
+		StackView.onActivating: shown = true
+		StackView.onDeactivating: shown = false
+		StackView.onRemoved: destroy()
+
+		QsMenuOpener {
+			id: menuOpener
+
+			menu: menu.handle
+		}
+
+		Repeater {
+			model: menuOpener.children
+
+			CustomRect {
+				id: item
+
+				required property int index
+				required property QsMenuEntry modelData
+
+				Layout.fillWidth: true
+				Layout.leftMargin: modelData.isSeparator ? Tokens.padding.normal : 0
+				Layout.rightMargin: modelData.isSeparator ? Tokens.padding.normal : 0
+				color: modelData.isSeparator ? Colors.palette.m3outlineVariant : "transparent"
+				implicitHeight: modelData.isSeparator ? (visible ? 1 : 0) : childrenLoader.item.implicitHeight
+				implicitWidth: childrenLoader.item?.implicitWidth ?? 0
+				radius: Tokens.rounding.full
+				visible: index !== (menuOpener.children.values.length - 1) ? true : (modelData.isSeparator ? false : true)
+
+				Loader {
+					id: childrenLoader
+
+					active: !item.modelData.isSeparator
+					anchors.fill: parent
+					asynchronous: true
+
+					sourceComponent: Item {
+						property int iconWidth: icon.active ? icon.width + Tokens.spacing.normal + icon.anchors.rightMargin : 0
+
+						implicitHeight: root.itemHeight
+						implicitWidth: label.width + label.anchors.leftMargin * 2 + iconWidth + (expand.item?.width ?? 0)
+
+						StateLayer {
+							enabled: item.modelData.enabled
+							radius: item.radius
+
+							onClicked: {
+								const entry = item.modelData;
+								if (entry.hasChildren) {
+									root.push(subMenuComp.createObject(null, {
+										handle: entry,
+										isSubMenu: true
+									}));
+								} else {
+									item.modelData.triggered();
+									root.popouts.hasCurrent = false;
+								}
+							}
+						}
+
+						Loader {
+							id: icon
+
+							active: item.modelData.icon !== ""
+							anchors.right: parent.right
+							anchors.rightMargin: 10
+							anchors.verticalCenter: parent.verticalCenter
+							asynchronous: true
+
+							sourceComponent: Item {
+								implicitHeight: label.implicitHeight
+								implicitWidth: label.implicitHeight
+
+								IconImage {
+									id: iconImage
+
+									implicitSize: parent.implicitHeight
+									source: item.modelData.icon
+									visible: false
+								}
+
+								MultiEffect {
+									anchors.fill: iconImage
+									colorization: 1.0
+									colorizationColor: item.modelData.enabled ? Colors.palette.m3onSurface : Colors.palette.m3outline
+									source: iconImage
+								}
+							}
+						}
+
+						CustomText {
+							id: label
+
+							anchors.left: parent.left
+							anchors.leftMargin: 10
+							anchors.verticalCenter: parent.verticalCenter
+							color: item.modelData.enabled ? Colors.palette.m3onSurface : Colors.palette.m3outline
+							text: item.modelData.text
+						}
+
+						Loader {
+							id: expand
+
+							active: item.modelData.hasChildren
+							anchors.right: parent.right
+							anchors.verticalCenter: parent.verticalCenter
+							asynchronous: true
+
+							sourceComponent: MaterialIcon {
+								color: item.modelData.enabled ? Colors.palette.m3onSurface : Colors.palette.m3outline
+								text: "chevron_right"
+							}
+						}
+					}
+				}
+			}
+		}
+
+		Loader {
+			id: loader
+
+			Layout.fillWidth: true
+			Layout.maximumHeight: active ? implicitHeight : 0
+			active: menu.isSubMenu
+			asynchronous: true
+
+			sourceComponent: Item {
+				implicitHeight: 30
+
+				Item {
+					anchors.fill: parent
+					implicitHeight: 30
+
+					CustomRect {
+						anchors.fill: parent
+						color: Colors.palette.m3secondaryContainer
+						radius: Tokens.rounding.full
+
+						StateLayer {
+							color: Colors.palette.m3onSecondaryContainer
+							radius: parent.radius
+
+							onClicked: {
+								root.pop();
+							}
+						}
+					}
+
+					Row {
+						id: back
+
+						anchors.verticalCenter: parent.verticalCenter
+
+						MaterialIcon {
+							anchors.verticalCenter: parent.verticalCenter
+							color: Colors.palette.m3onSecondaryContainer
+							text: "chevron_left"
+						}
+
+						CustomText {
+							anchors.verticalCenter: parent.verticalCenter
+							color: Colors.palette.m3onSecondaryContainer
+							text: qsTr("Back")
+						}
+					}
+				}
+			}
+		}
+	}
+}