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 {
|
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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue