mobile/UI: correctly scale UI without restart

The fact that the rescaling in the settings gave different results from
what we got after a restart really should have been a dead giveaway that
the code was fundamentally flawed.

With this, if the user picks smaller, regular, or larger they now always
get the same, consistent values for gridUnit and font sizes.

This also gives up on the idea that we can just force the gridUnit to be
smaller to make things work if the font (which drives the gridUnit) is
too big for a screen. That fundamentally cannot work and gives a
horrible UI experience. So instead simply warn the user and continue
with matching font / gridUnit, which will still give a bad experience,
but at least we told the user about it and didn't pretend this was ok or
fixable.

Finally, this gets the factors right when switching from smaller to
larger or back, without stopping at regular on the way.

One odd side effect of this code is that under certain conditions
(number of columns changes) the display window when running mobile on
desktop will resize. That's kind of odd, but as that is not /really/ our
target platform, for now I'd consider it acceptable. But it does deserve
more investigation.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

2 files changed, 19 insertions, 10 deletions

diff --git a/mobile-widgets/qml/Settings.qml b/mobile-widgets/qml/Settings.qml
index da2edd06b..b4946d204 100644
--- a/mobile-widgets/qml/Settings.qml
+++ b/mobile-widgets/qml/Settings.qml
@@ -328,6 +328,7 @@ TemplatePage {
 						enabled: subsurfaceTheme.currentScale !== 0.85
 						onClicked: {
 							subsurfaceTheme.currentScale = 0.85
+							rootItem.setupUnits()
 						}
 					}
 					TemplateButton {
@@ -337,6 +338,7 @@ TemplatePage {
 						enabled: subsurfaceTheme.currentScale !== 1.0
 						onClicked: {
 							subsurfaceTheme.currentScale = 1.0
+							rootItem.setupUnits()
 						}
 					}
 					TemplateButton {
@@ -346,6 +348,7 @@ TemplatePage {
 						enabled: subsurfaceTheme.currentScale !== 1.15
 						onClicked: {
 							subsurfaceTheme.currentScale = 1.15
+							rootItem.setupUnits()
 						}
 					}
 					TemplateButton {
diff --git a/mobile-widgets/qml/main.qml b/mobile-widgets/qml/main.qml
index 1e5e1bdba..de2e601f3 100644
--- a/mobile-widgets/qml/main.qml
+++ b/mobile-widgets/qml/main.qml
@@ -663,29 +663,35 @@ if you have network connectivity and want to sync your data to cloud storage."),
 		}
 	}
 
+	FontMetrics {
+		id: fontMetrics
+		font.pointSize: subsurfaceTheme.regularPointSize
+	}
+
 	function setupUnits() {
+		// since Kirigami was initially instantiated, the font size may have
+		// changed, so recalculate the gridUnit
+		var kirigamiGridUnit = fontMetrics.height
+
 		// some screens are too narrow for Subsurface-mobile to render well
-		// try to hack around that by making sure that we can fit at least 21 gridUnits in a row
-		var numColumns = Math.max(Math.floor(rootItem.width / (21 * Kirigami.Units.gridUnit)), 1)
+		// things don't look greate with fewer than 21 gridUnits in a row
+		var numColumns = Math.max(Math.floor(rootItem.width / (21 * kirigamiGridUnit)), 1)
 		if (Screen.primaryOrientation === Qt.PortraitOrientation && PrefDisplay.singleColumnPortrait) {
 			manager.appendTextToLog("show only one column in portrait mode");
 			numColumns = 1;
 		}
-
 		rootItem.colWidth = numColumns > 1 ? Math.floor(rootItem.width / numColumns) : rootItem.width;
-		var kirigamiGridUnit = Kirigami.Units.gridUnit
+
+		// If we can't fit 21 gridUnits into a line, let the user know and suggest using a smaller font
 		var widthInGridUnits = Math.floor(rootItem.colWidth / kirigamiGridUnit)
 		if (widthInGridUnits < 21) {
-			kirigamiGridUnit = Math.floor(rootItem.colWidth / 21)
-			widthInGridUnits = Math.floor(rootItem.colWidth / kirigamiGridUnit)
+			showPassiveNotification(qsTr("Font size likely too big for the display, switching to smaller font suggested"), 3000)
 		}
-		var factor = 1.0
 		manager.appendTextToLog(numColumns + " columns with column width of " + rootItem.colWidth)
 		manager.appendTextToLog("width in Grid Units " + widthInGridUnits + " original gridUnit " + Kirigami.Units.gridUnit + " now " + kirigamiGridUnit)
 		if (Kirigami.Units.gridUnit !== kirigamiGridUnit) {
-			factor = kirigamiGridUnit / Kirigami.Units.gridUnit
-			// change our glabal grid unit
-			Kirigami.Units.gridUnit = kirigamiGridUnit
+			// change our global grid unit - make absolutely certain there is no Qt binding happening
+			Kirigami.Units.gridUnit = kirigamiGridUnit * 1.0
 		}
 		pageStack.defaultColumnWidth = rootItem.colWidth
 		manager.appendTextToLog("Done setting up sizes")