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 {
id: root
default property alias content: layout.children
default property alias content: row.children
property color borderColor: M.Theme.base02
visible: layout.visibleChildren.length > 0
visible: row.visibleChildren.length > 0
implicitWidth: layout.implicitWidth + _pad * 2
implicitHeight: layout.implicitHeight + _pad * 2
implicitWidth: row.implicitWidth + _pad * 2
implicitHeight: row.implicitHeight + _pad * 2
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
Rectangle {
@ -57,68 +55,26 @@ Item {
radius: M.Theme.radius
}
// Separator container thin lines drawn between visible modules
Item {
id: sepContainer
anchors.fill: layout
}
// Layout container children are positioned horizontally with separators between them
Item {
id: layout
Row {
id: row
anchors.centerIn: parent
onChildrenChanged: Qt.callLater(root._relayout)
onVisibleChildrenChanged: Qt.callLater(root._relayout)
// Also watch individual child width changes
Component.onCompleted: Qt.callLater(root._relayout)
spacing: M.Theme.moduleSpacing + 2
}
function _relayout() {
// Remove old separators
for (let i = sepContainer.children.length - 1; i >= 0; i--)
sepContainer.children[i].destroy();
// Separator lines overlaid between visible row children
Repeater {
model: row.visibleChildren.length > 1 ? row.visibleChildren.length - 1 : 0
// Position visible children horizontally, insert separators
let x = 0;
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);
}
delegate: Rectangle {
required property int index
for (let i = 0; i < visible.length; i++) {
const child = visible[i];
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;
}
readonly property Item _left: row.visibleChildren[index]
readonly property real _rightEdge: _left ? _left.x + _left.width : 0
layout.implicitWidth = x;
layout.implicitHeight = 0;
for (let i = 0; i < visible.length; i++) {
if (visible[i].height > layout.implicitHeight)
layout.implicitHeight = visible[i].height;
}
}
Component {
id: _sepComp
Rectangle {
width: root._sepWidth
x: row.x + _rightEdge + row.spacing / 2
y: root._pad + row.implicitHeight * 0.2
width: 1
height: row.implicitHeight * 0.6
color: Qt.rgba(root.borderColor.r, root.borderColor.g, root.borderColor.b, 0.4)
}
}