From c2c751c164f3aca50a41b318e240dbcd0722ac1a Mon Sep 17 00:00:00 2001 From: Jan Mulder Date: Tue, 25 Sep 2018 12:48:48 +0200 Subject: [PATCH] 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 --- mobile-widgets/qml/ThemeTest.qml | 7 +++++++ mobile-widgets/qml/main.qml | 24 ++++++++++++++++++++---- 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 @@ -61,6 +61,13 @@ Kirigami.Page { Layout.columnSpan: 2 } + Controls.Label { + text: "basePointSize:" + } + Controls.Label { + text: subsurfaceTheme.basePointSize + } + Controls.Label { text: "FontMetrics pointSize:" } 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")