fix bar group separators: overlay on Row instead of custom layout

This commit is contained in:
Damocles 2026-04-12 17:49:48 +02:00
parent 9d88d62201
commit 2f31783ead

View file

@ -5,17 +5,15 @@ import "." as M
Item { Item {
id: root id: root
default property alias content: layout.children default property alias content: row.children
property color borderColor: M.Theme.base02 property color borderColor: M.Theme.base02
visible: layout.visibleChildren.length > 0 visible: row.visibleChildren.length > 0
implicitWidth: layout.implicitWidth + _pad * 2 implicitWidth: row.implicitWidth + _pad * 2
implicitHeight: layout.implicitHeight + _pad * 2 implicitHeight: row.implicitHeight + _pad * 2
readonly property int _pad: 6 readonly property int _pad: 6
readonly property int _spacing: M.Theme.moduleSpacing + 2
readonly property int _sepWidth: 1
// Shadow source rendered offscreen, only its glow is visible // Shadow source rendered offscreen, only its glow is visible
Rectangle { Rectangle {
@ -57,68 +55,26 @@ Item {
radius: M.Theme.radius radius: M.Theme.radius
} }
// Separator container thin lines drawn between visible modules Row {
Item { id: row
id: sepContainer
anchors.fill: layout
}
// Layout container children are positioned horizontally with separators between them
Item {
id: layout
anchors.centerIn: parent anchors.centerIn: parent
spacing: M.Theme.moduleSpacing + 2
onChildrenChanged: Qt.callLater(root._relayout)
onVisibleChildrenChanged: Qt.callLater(root._relayout)
// Also watch individual child width changes
Component.onCompleted: Qt.callLater(root._relayout)
} }
function _relayout() { // Separator lines overlaid between visible row children
// Remove old separators Repeater {
for (let i = sepContainer.children.length - 1; i >= 0; i--) model: row.visibleChildren.length > 1 ? row.visibleChildren.length - 1 : 0
sepContainer.children[i].destroy();
// Position visible children horizontally, insert separators delegate: Rectangle {
let x = 0; required property int index
let first = true;
const visible = [];
for (let i = 0; i < layout.children.length; i++) {
const child = layout.children[i];
if (!child.visible || child.width <= 0) continue;
visible.push(child);
}
for (let i = 0; i < visible.length; i++) { readonly property Item _left: row.visibleChildren[index]
const child = visible[i]; readonly property real _rightEdge: _left ? _left.x + _left.width : 0
if (!first) {
// Add separator
const sep = _sepComp.createObject(sepContainer, {
x: x + _spacing / 2 - _sepWidth / 2,
height: Qt.binding(() => layout.implicitHeight * 0.6),
y: Qt.binding(() => layout.implicitHeight * 0.2)
});
x += _spacing;
}
child.x = x;
child.y = Qt.binding(function() { return (layout.implicitHeight - child.height) / 2; });
x += child.width;
first = false;
}
layout.implicitWidth = x; x: row.x + _rightEdge + row.spacing / 2
layout.implicitHeight = 0; y: root._pad + row.implicitHeight * 0.2
for (let i = 0; i < visible.length; i++) { width: 1
if (visible[i].height > layout.implicitHeight) height: row.implicitHeight * 0.6
layout.implicitHeight = visible[i].height;
}
}
Component {
id: _sepComp
Rectangle {
width: root._sepWidth
color: Qt.rgba(root.borderColor.r, root.borderColor.g, root.borderColor.b, 0.4) color: Qt.rgba(root.borderColor.r, root.borderColor.g, root.borderColor.b, 0.4)
} }
} }