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>
This commit is contained in:
Dirk Hohndel 2021-01-14 04:08:48 -08:00
parent f26f71a80b
commit cb71fb2822
2 changed files with 19 additions and 10 deletions

View file

@ -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 {

View file

@ -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")