Fix font and scaling in Main.qml
Replace all pixelSize with pointSize using baseFontSize: - Sidebar width: 16em (was 220px) - Header margins: 1em (was 12px) - Document title: baseFontSize (was 13px) - Document name: baseFontSize-2 (was 10px) - Section header: baseFontSize-1 (was 11px) - Delegate padding: 0.8em / 0.4em - All spacing font-relative
This commit is contained in:
Levi Neely
parent
9e48a89c92
commit
b2953a7caf
|
|
@ -90,16 +90,19 @@ ApplicationWindow {
|
||||||
id: settingsDialog
|
id: settingsDialog
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Reference font size for scalable UI
|
||||||
|
readonly property int baseFontSize: theme.fontSize > 0 ? theme.fontSize : 12
|
||||||
|
|
||||||
header: ToolBar {
|
header: ToolBar {
|
||||||
background: Rectangle { color: theme.buttonColor }
|
background: Rectangle { color: theme.buttonColor }
|
||||||
RowLayout {
|
RowLayout {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
anchors.leftMargin: 12
|
anchors.leftMargin: root.baseFontSize
|
||||||
anchors.rightMargin: 12
|
anchors.rightMargin: root.baseFontSize
|
||||||
Label {
|
Label {
|
||||||
text: "orkmode"
|
text: "orkmode"
|
||||||
color: theme.buttonTextColor
|
color: theme.buttonTextColor
|
||||||
font.pixelSize: 16
|
font.pointSize: root.baseFontSize + 2
|
||||||
font.bold: true
|
font.bold: true
|
||||||
}
|
}
|
||||||
Item { Layout.fillWidth: true }
|
Item { Layout.fillWidth: true }
|
||||||
|
|
@ -108,7 +111,7 @@ ApplicationWindow {
|
||||||
? "● " + orkClient.address
|
? "● " + orkClient.address
|
||||||
: "○ disconnected"
|
: "○ disconnected"
|
||||||
color: orkClient.connected ? theme.doneColor : theme.deadlineColor
|
color: orkClient.connected ? theme.doneColor : theme.deadlineColor
|
||||||
font.pixelSize: 12
|
font.pointSize: root.baseFontSize - 1
|
||||||
}
|
}
|
||||||
ToolButton {
|
ToolButton {
|
||||||
text: "⟳"
|
text: "⟳"
|
||||||
|
|
@ -131,7 +134,7 @@ ApplicationWindow {
|
||||||
|
|
||||||
// Document sidebar.
|
// Document sidebar.
|
||||||
Rectangle {
|
Rectangle {
|
||||||
Layout.preferredWidth: 220
|
Layout.preferredWidth: root.baseFontSize * 16
|
||||||
Layout.fillHeight: true
|
Layout.fillHeight: true
|
||||||
color: theme.baseColor
|
color: theme.baseColor
|
||||||
|
|
||||||
|
|
@ -142,9 +145,9 @@ ApplicationWindow {
|
||||||
Label {
|
Label {
|
||||||
text: qsTr("Documents")
|
text: qsTr("Documents")
|
||||||
color: theme.placeholderTextColor
|
color: theme.placeholderTextColor
|
||||||
font.pixelSize: 11
|
font.pointSize: root.baseFontSize - 1
|
||||||
font.bold: true
|
font.bold: true
|
||||||
Layout.margins: 10
|
Layout.margins: root.baseFontSize * 0.8
|
||||||
}
|
}
|
||||||
|
|
||||||
ListView {
|
ListView {
|
||||||
|
|
@ -158,23 +161,27 @@ ApplicationWindow {
|
||||||
width: docList.width
|
width: docList.width
|
||||||
highlighted: root.currentDoc === modelData.name
|
highlighted: root.currentDoc === modelData.name
|
||||||
onClicked: root.selectDoc(modelData.name)
|
onClicked: root.selectDoc(modelData.name)
|
||||||
|
leftPadding: root.baseFontSize * 0.8
|
||||||
|
rightPadding: root.baseFontSize * 0.8
|
||||||
|
topPadding: root.baseFontSize * 0.4
|
||||||
|
bottomPadding: root.baseFontSize * 0.4
|
||||||
background: Rectangle {
|
background: Rectangle {
|
||||||
color: highlighted ? theme.highlightColor : "transparent"
|
color: highlighted ? theme.highlightColor : "transparent"
|
||||||
opacity: highlighted ? 0.3 : 1.0
|
opacity: highlighted ? 0.3 : 1.0
|
||||||
}
|
}
|
||||||
contentItem: ColumnLayout {
|
contentItem: ColumnLayout {
|
||||||
spacing: 1
|
spacing: root.baseFontSize * 0.15
|
||||||
Label {
|
Label {
|
||||||
text: modelData.title
|
text: modelData.title
|
||||||
color: theme.textColor
|
color: theme.textColor
|
||||||
font.pixelSize: 13
|
font.pointSize: root.baseFontSize
|
||||||
elide: Text.ElideRight
|
elide: Text.ElideRight
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
}
|
}
|
||||||
Label {
|
Label {
|
||||||
text: modelData.name
|
text: modelData.name
|
||||||
color: theme.placeholderTextColor
|
color: theme.placeholderTextColor
|
||||||
font.pixelSize: 10
|
font.pointSize: root.baseFontSize - 2
|
||||||
elide: Text.ElideRight
|
elide: Text.ElideRight
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
}
|
}
|
||||||
|
|
@ -193,7 +200,7 @@ ApplicationWindow {
|
||||||
|
|
||||||
OutlineView {
|
OutlineView {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
anchors.margins: 8
|
anchors.margins: root.baseFontSize * 0.6
|
||||||
model: docModel
|
model: docModel
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -204,7 +211,7 @@ ApplicationWindow {
|
||||||
? qsTr("Select a document")
|
? qsTr("Select a document")
|
||||||
: qsTr("Not connected: %1").arg(orkClient.error)
|
: qsTr("Not connected: %1").arg(orkClient.error)
|
||||||
color: theme.placeholderTextColor
|
color: theme.placeholderTextColor
|
||||||
font.pixelSize: 14
|
font.pointSize: root.baseFontSize + 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue