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.bottomMargin: Kirigami.Units.largeSpacing / 2
Layout.columnSpan: 2 Layout.columnSpan: 2
} }
RowLayout { Flow {
Layout.columnSpan: 2 Layout.columnSpan: 2
spacing: Kirigami.Units.largeSpacing spacing: Kirigami.Units.largeSpacing
TemplateButton { 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 Layout.fillWidth: true
fontSize: subsurfaceTheme.regularPointSize / subsurfaceTheme.currentScale * 0.85
enabled: subsurfaceTheme.currentScale !== 0.85 enabled: subsurfaceTheme.currentScale !== 0.85
onClicked: { onClicked: {
subsurfaceTheme.currentScale = 0.85 subsurfaceTheme.currentScale = 0.85
@ -323,19 +333,31 @@ TemplatePage {
TemplateButton { TemplateButton {
text: qsTr("regular") text: qsTr("regular")
Layout.fillWidth: true Layout.fillWidth: true
fontSize: subsurfaceTheme.regularPointSize / subsurfaceTheme.currentScale * 0.85
enabled: subsurfaceTheme.currentScale !== 1.0 enabled: subsurfaceTheme.currentScale !== 1.0
onClicked: { onClicked: {
subsurfaceTheme.currentScale = 1.0 subsurfaceTheme.currentScale = 1.0
} }
} }
TemplateButton { TemplateButton {
text: qsTr("larger") text: qsTr("large")
Layout.fillWidth: true Layout.fillWidth: true
fontSize: subsurfaceTheme.regularPointSize / subsurfaceTheme.currentScale * 1.15
enabled: subsurfaceTheme.currentScale !== 1.15 enabled: subsurfaceTheme.currentScale !== 1.15
onClicked: { onClicked: {
subsurfaceTheme.currentScale = 1.15 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 { Rectangle {
} }

View file

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