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>

2 files changed, 27 insertions, 4 deletions

diff --git a/mobile-widgets/qml/Settings.qml b/mobile-widgets/qml/Settings.qml
index 46c9d2aa6..da2edd06b 100644
--- a/mobile-widgets/qml/Settings.qml
+++ b/mobile-widgets/qml/Settings.qml
@@ -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 {
 				}
diff --git a/mobile-widgets/qml/TemplateButton.qml b/mobile-widgets/qml/TemplateButton.qml
index 49ca8c0dd..5586214a1 100644
--- a/mobile-widgets/qml/TemplateButton.qml
+++ b/mobile-widgets/qml/TemplateButton.qml
@@ -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
 	}