Use font-relative units instead of pixels
All spacing/margins now scale with baseFontSize: - Table cell padding: 0.5em horizontal, 0.25em vertical - Table margins: 0.75em - Column spacing: 1.5em - Code block margins: 0.5em - Border radius: fontSize/3 - Left rule width: fontSize/6 Ensures proper display at any DPI/font size.
This commit is contained in:
parent
09962cc800
commit
9e48a89c92
|
|
@ -346,11 +346,11 @@ ListView {
|
||||||
Component {
|
Component {
|
||||||
id: textBlockComponent
|
id: textBlockComponent
|
||||||
RowLayout {
|
RowLayout {
|
||||||
spacing: 8
|
spacing: outline.baseFontSize * 0.5
|
||||||
Rectangle {
|
Rectangle {
|
||||||
width: 2
|
width: outline.baseFontSize / 6
|
||||||
Layout.fillHeight: true
|
Layout.fillHeight: true
|
||||||
Layout.leftMargin: 2
|
Layout.leftMargin: outline.baseFontSize / 6
|
||||||
color: theme.midColor
|
color: theme.midColor
|
||||||
}
|
}
|
||||||
Label {
|
Label {
|
||||||
|
|
@ -369,14 +369,14 @@ ListView {
|
||||||
id: codeBlockComponent
|
id: codeBlockComponent
|
||||||
Rectangle {
|
Rectangle {
|
||||||
color: theme.alternateBaseColor
|
color: theme.alternateBaseColor
|
||||||
radius: 4
|
radius: outline.baseFontSize / 3
|
||||||
implicitHeight: codeColumn.implicitHeight + 12
|
implicitHeight: codeColumn.implicitHeight + outline.baseFontSize
|
||||||
|
|
||||||
ColumnLayout {
|
ColumnLayout {
|
||||||
id: codeColumn
|
id: codeColumn
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
anchors.margins: 6
|
anchors.margins: outline.baseFontSize * 0.5
|
||||||
spacing: 4
|
spacing: outline.baseFontSize * 0.3
|
||||||
|
|
||||||
// Language label
|
// Language label
|
||||||
Label {
|
Label {
|
||||||
|
|
@ -406,8 +406,8 @@ ListView {
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: tableRect
|
id: tableRect
|
||||||
color: theme.alternateBaseColor
|
color: theme.alternateBaseColor
|
||||||
radius: 4
|
radius: outline.baseFontSize / 3
|
||||||
implicitHeight: tableColumn.implicitHeight + 16
|
implicitHeight: tableColumn.implicitHeight + outline.baseFontSize * 1.5
|
||||||
|
|
||||||
property var tableData: modelData
|
property var tableData: modelData
|
||||||
|
|
||||||
|
|
@ -415,8 +415,8 @@ ListView {
|
||||||
id: tableColumn
|
id: tableColumn
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
anchors.margins: 8
|
anchors.margins: outline.baseFontSize * 0.75
|
||||||
spacing: 2
|
spacing: outline.baseFontSize * 0.25
|
||||||
|
|
||||||
Repeater {
|
Repeater {
|
||||||
model: tableRect.tableData.rows ?? []
|
model: tableRect.tableData.rows ?? []
|
||||||
|
|
@ -425,14 +425,17 @@ ListView {
|
||||||
required property var modelData
|
required property var modelData
|
||||||
required property int index
|
required property int index
|
||||||
property bool isHeader: index === 0 && (tableRect.tableData.hasHeader ?? false)
|
property bool isHeader: index === 0 && (tableRect.tableData.hasHeader ?? false)
|
||||||
spacing: 16
|
spacing: outline.baseFontSize * 1.5
|
||||||
|
|
||||||
Repeater {
|
Repeater {
|
||||||
model: modelData
|
model: modelData
|
||||||
|
|
||||||
Label {
|
Label {
|
||||||
required property string modelData
|
required property string modelData
|
||||||
Layout.minimumWidth: 60
|
leftPadding: outline.baseFontSize * 0.5
|
||||||
|
rightPadding: outline.baseFontSize * 0.5
|
||||||
|
topPadding: outline.baseFontSize * 0.25
|
||||||
|
bottomPadding: outline.baseFontSize * 0.25
|
||||||
text: modelData
|
text: modelData
|
||||||
color: parent.isHeader ? theme.textColor : theme.placeholderTextColor
|
color: parent.isHeader ? theme.textColor : theme.placeholderTextColor
|
||||||
font.bold: parent.isHeader
|
font.bold: parent.isHeader
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue