mobile/UI: offer more font sizes

As it turns out, we used to get the font scaling completely wrong. As a
result we got got ~72% and ~132% instead of the intended 85% and 115%.
So now people have both options, in each case with matching gridUnit
(and therefore visual spacing), and font size.

Also visualize the font size by rendering the button text accordingly.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
This commit is contained in:
Dirk Hohndel 2021-01-15 11:50:12 -08:00
parent 2c3d927a42
commit 3469fa70eb
2 changed files with 27 additions and 4 deletions

View file

@ -309,12 +309,22 @@ TemplatePage {
Layout.bottomMargin: Kirigami.Units.largeSpacing / 2
Layout.columnSpan: 2
}
RowLayout {
Flow {
Layout.columnSpan: 2
spacing: Kirigami.Units.largeSpacing
TemplateButton {
text: qsTr("smaller")
text: qsTr("very small")
fontSize: subsurfaceTheme.regularPointSize / subsurfaceTheme.currentScale * 0.75
enabled: subsurfaceTheme.currentScale !== 0.75
onClicked: {
subsurfaceTheme.currentScale = 0.75
rootItem.setupUnits()
}
}
TemplateButton {
text: qsTr("small")
Layout.fillWidth: true
fontSize: subsurfaceTheme.regularPointSize / subsurfaceTheme.currentScale * 0.85
enabled: subsurfaceTheme.currentScale !== 0.85
onClicked: {
subsurfaceTheme.currentScale = 0.85
@ -323,19 +333,31 @@ TemplatePage {
TemplateButton {
text: qsTr("regular")
Layout.fillWidth: true
fontSize: subsurfaceTheme.regularPointSize / subsurfaceTheme.currentScale * 0.85
enabled: subsurfaceTheme.currentScale !== 1.0
onClicked: {
subsurfaceTheme.currentScale = 1.0
}
}
TemplateButton {
text: qsTr("larger")
text: qsTr("large")
Layout.fillWidth: true
fontSize: subsurfaceTheme.regularPointSize / subsurfaceTheme.currentScale * 1.15
enabled: subsurfaceTheme.currentScale !== 1.15
onClicked: {
subsurfaceTheme.currentScale = 1.15
}
}
TemplateButton {
text: qsTr("very large")
Layout.fillWidth: true
fontSize: subsurfaceTheme.regularPointSize / subsurfaceTheme.currentScale * 1.3
enabled: subsurfaceTheme.currentScale !== 1.3
onClicked: {
subsurfaceTheme.currentScale = 1.3
rootItem.setupUnits()
}
}
}
Rectangle {
}

View file

@ -5,6 +5,7 @@ import org.kde.kirigami 2.4 as Kirigami
Button {
id: root
property double fontSize: subsurfaceTheme.regularPointSize
background: Rectangle {
id: buttonBackground
color: root.enabled? (root.pressed ? subsurfaceTheme.darkerPrimaryColor : subsurfaceTheme.primaryColor) : "gray"
@ -15,7 +16,7 @@ Button {
contentItem: Text {
id: buttonText
text: root.text
font.pointSize: subsurfaceTheme.regularPointSize
font.pointSize: root.fontSize
anchors.centerIn: buttonBackground
color: root.pressed ? subsurfaceTheme.darkerPrimaryTextColor :subsurfaceTheme.primaryTextColor
}