Fix overlapping text in OutlineView
- Replace manual Item+anchoring with ColumnLayout for proper height calc - Remove redundant bodyMeasure Text and bodyWidth property - Add proper top/bottom margins using rowPad constant - Body row now uses RowLayout with Layout.fillWidth
This commit is contained in:
parent
71a89943ae
commit
e129f9ee94
|
|
@ -40,48 +40,20 @@ TreeView {
|
||||||
readonly property string sectionBody: (model.body ?? "").trim()
|
readonly property string sectionBody: (model.body ?? "").trim()
|
||||||
readonly property int bodyIndent: 12
|
readonly property int bodyIndent: 12
|
||||||
|
|
||||||
// The horizontal space available to the body text. The base delegate
|
|
||||||
// reserves (depth+1)*indentation on the left for the tree structure;
|
|
||||||
// the content region occupies the rest, minus our body indent and a
|
|
||||||
// right margin. Computing this explicitly (rather than via anchors)
|
|
||||||
// gives the body Text a concrete width, so contentHeight resolves
|
|
||||||
// deterministically and the row height below is correct.
|
|
||||||
readonly property real bodyWidth:
|
|
||||||
Math.max(1, tree.width - (depth + 1) * indentation
|
|
||||||
- bodyIndent - 12)
|
|
||||||
|
|
||||||
implicitWidth: tree.width
|
implicitWidth: tree.width
|
||||||
|
|
||||||
// Row height = headline + body (if any) + padding. bodyMeasure is a
|
|
||||||
// non-visible Text with the same font/width as the body, used purely
|
|
||||||
// to measure wrapped height without depending on the laid-out item.
|
|
||||||
implicitHeight: headlineRow.implicitHeight
|
|
||||||
+ (sectionBody !== "" ? bodyMeasure.implicitHeight + 4 : 0)
|
|
||||||
+ tree.rowPad * 2
|
|
||||||
|
|
||||||
background: Rectangle {
|
background: Rectangle {
|
||||||
color: del.current ? "#2f3540" : "transparent"
|
color: del.current ? "#2f3540" : "transparent"
|
||||||
radius: 4
|
radius: 4
|
||||||
}
|
}
|
||||||
|
|
||||||
// Off-screen measurement of the wrapped body height.
|
contentItem: ColumnLayout {
|
||||||
Text {
|
spacing: 4
|
||||||
id: bodyMeasure
|
|
||||||
visible: false
|
|
||||||
width: del.bodyWidth
|
|
||||||
text: del.sectionBody
|
|
||||||
font.pixelSize: 12
|
|
||||||
lineHeight: 1.15
|
|
||||||
wrapMode: Text.WordWrap
|
|
||||||
textFormat: Text.PlainText
|
|
||||||
}
|
|
||||||
|
|
||||||
contentItem: Item {
|
|
||||||
RowLayout {
|
RowLayout {
|
||||||
id: headlineRow
|
id: headlineRow
|
||||||
anchors.left: parent.left
|
Layout.fillWidth: true
|
||||||
anchors.right: parent.right
|
Layout.topMargin: tree.rowPad
|
||||||
anchors.top: parent.top
|
|
||||||
spacing: 8
|
spacing: 8
|
||||||
|
|
||||||
// TODO keyword pill.
|
// TODO keyword pill.
|
||||||
|
|
@ -156,34 +128,33 @@ TreeView {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Left rule marking the body region.
|
// Body row with left rule.
|
||||||
Rectangle {
|
RowLayout {
|
||||||
visible: bodyLabel.visible
|
|
||||||
width: 2
|
|
||||||
color: "#3b4252"
|
|
||||||
anchors.top: bodyLabel.top
|
|
||||||
anchors.bottom: bodyLabel.bottom
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.leftMargin: 2
|
|
||||||
}
|
|
||||||
|
|
||||||
// Section body, always visible inline beneath the headline.
|
|
||||||
// Given an explicit width (matching bodyMeasure) so wrapping and
|
|
||||||
// height are consistent with the reserved row height.
|
|
||||||
Text {
|
|
||||||
id: bodyLabel
|
|
||||||
anchors.top: headlineRow.bottom
|
|
||||||
anchors.topMargin: 4
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.leftMargin: del.bodyIndent
|
|
||||||
width: del.bodyWidth
|
|
||||||
visible: del.sectionBody !== ""
|
visible: del.sectionBody !== ""
|
||||||
text: del.sectionBody
|
Layout.fillWidth: true
|
||||||
color: tree.dimColor
|
Layout.bottomMargin: tree.rowPad
|
||||||
font.pixelSize: 12
|
spacing: 8
|
||||||
lineHeight: 1.15
|
|
||||||
wrapMode: Text.WordWrap
|
// Left rule marking the body region.
|
||||||
textFormat: Text.PlainText
|
Rectangle {
|
||||||
|
width: 2
|
||||||
|
Layout.fillHeight: true
|
||||||
|
Layout.leftMargin: 2
|
||||||
|
color: "#3b4252"
|
||||||
|
}
|
||||||
|
|
||||||
|
// Section body text.
|
||||||
|
Text {
|
||||||
|
id: bodyLabel
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.leftMargin: del.bodyIndent - 10
|
||||||
|
text: del.sectionBody
|
||||||
|
color: tree.dimColor
|
||||||
|
font.pixelSize: 12
|
||||||
|
lineHeight: 1.15
|
||||||
|
wrapMode: Text.WordWrap
|
||||||
|
textFormat: Text.PlainText
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue