mobile, QML: introduce basePointSize in subsurfaceTheme

By manipulation the used font pointSize property, we can dynamically
scale fonts and derived UI objects. At the same time, we have
some logic to determine the default font, its size, etc, for example
depending on screen properties. The scaling of the UI (and its font)
does not need to interfere with those defaults.

However, when we want to reset the pointSize, we alter the default, so
a backup of the default is needed. Ok, not al full backup, as the only
thing we like to manipulate is the pointSize, to which we want to be
able to return.

All this leads to this commit. A basePointSize property is added, that
is initialized from the default. Due to the binding logic of the QML
engine, it is not a classic initialization, but a binding between the
2 properties. We need to break that binding explicitly, so that
the original PointSize is always preserved.

In addition, a display of the new font property is added to the
developers theme test.

Signed-off-by: Jan Mulder <jlmulder@xs4all.nl>

2 files changed, 27 insertions, 4 deletions

diff --git a/mobile-widgets/qml/ThemeTest.qml b/mobile-widgets/qml/ThemeTest.qml
index 1109435ef..bca847d24 100644
--- a/mobile-widgets/qml/ThemeTest.qml
+++ b/mobile-widgets/qml/ThemeTest.qml
@@ -62,6 +62,13 @@ Kirigami.Page {
 		}
 
 		Controls.Label {
+			text: "basePointSize:"
+		}
+		Controls.Label {
+			text: subsurfaceTheme.basePointSize
+		}
+
+		Controls.Label {
 			text: "FontMetrics pointSize:"
 		}
 		Controls.Label {
diff --git a/mobile-widgets/qml/main.qml b/mobile-widgets/qml/main.qml
index 3c6fdc02d..743b4caa1 100644
--- a/mobile-widgets/qml/main.qml
+++ b/mobile-widgets/qml/main.qml
@@ -46,7 +46,9 @@ Kirigami.ApplicationWindow {
 	FontMetrics {
 		id: fontMetrics
 		Component.onCompleted: {
-			console.log("Using the following font: " + fontMetrics.font.family + " at " + fontMetrics.font.pointSize + "pt")
+			console.log("Using the following font: " + fontMetrics.font.family
+				    + " at " + subsurfaceTheme.basePointSize + "pt" +
+				    " with mobile_scale: " + PrefDisplay.mobile_scale)
 		}
 	}
 	visible: false
@@ -444,9 +446,16 @@ if you have network connectivity and want to sync your data to cloud storage."),
 
 	QtObject {
 		id: subsurfaceTheme
-		property int regularPointSize: fontMetrics.font.pointSize
-		property int titlePointSize: Math.round(regularPointSize * 1.5)
-		property int smallPointSize: Math.round(regularPointSize * 0.8)
+
+		// basePointSize is determinded at start of the app and shall
+		// never be changed. This is very tricky. In order to break the
+		// binding between basePointSize and fontMetrics.font.pointSize we
+		// multipy it by 1.0 in the onComplete hander of this object.
+		property double basePointSize: fontMetrics.font.pointSize;
+
+		property double regularPointSize: fontMetrics.font.pointSize
+		property double titlePointSize: regularPointSize * 1.5
+		property double smallPointSize: regularPointSize * 0.8
 
 		// colors currently in use
 		property string currentTheme
@@ -500,6 +509,13 @@ if you have network connectivity and want to sync your data to cloud storage."),
 
 		property int columnWidth: Math.round(rootItem.width/(Kirigami.Units.gridUnit*28)) > 0 ? Math.round(rootItem.width / Math.round(rootItem.width/(Kirigami.Units.gridUnit*28))) : rootItem.width
 		Component.onCompleted: {
+			// break binding explicitly. Now we have a basePointSize that we can
+			// use to easily scale against
+			basePointSize = basePointSize * 1.0;
+
+			// set the initial UI scaling as in the the preferences
+			fontMetrics.font.pointSize = subsurfaceTheme.basePointSize * PrefDisplay.mobile_scale;
+
 			// this needs to pick the theme from persistent preference settings
 			var theme = PrefDisplay.theme
 			if (theme == "Blue")