fix bar group separators: overlay on Row instead of custom layout
This commit is contained in:
parent
9d88d62201
commit
2f31783ead
1 changed files with 18 additions and 62 deletions
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue