From 6ab410521125366ac75f55145b5aafc6e9434d58 Mon Sep 17 00:00:00 2001 From: Dirk Hohndel Date: Tue, 10 Sep 2019 08:30:09 +0100 Subject: Mobile: adjust grid unit on very narrow screens If the default font size is big enough to leave us fewer than 21 grid units per row, shrink the grid unit. In order for this to create consistent results, we need to reduce the default column width to 21 grid units as well. And with that change, the columnWidth property becomes obsolete. Signed-off-by: Dirk Hohndel --- mobile-widgets/qml/DiveList.qml | 1 - mobile-widgets/qml/main.qml | 24 ++++++++++++++++++++---- 2 files changed, 20 insertions(+), 5 deletions(-) (limited to 'mobile-widgets') diff --git a/mobile-widgets/qml/DiveList.qml b/mobile-widgets/qml/DiveList.qml index aecd2f003..23537ac79 100644 --- a/mobile-widgets/qml/DiveList.qml +++ b/mobile-widgets/qml/DiveList.qml @@ -12,7 +12,6 @@ Kirigami.ScrollablePage { objectName: "DiveList" title: qsTr("Dive list") verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff - width: subsurfaceTheme.columnWidth property int credentialStatus: prefs.credentialStatus property int numDives: diveListView.count property color textColor: subsurfaceTheme.textColor diff --git a/mobile-widgets/qml/main.qml b/mobile-widgets/qml/main.qml index 8c67c9947..b2a57a5cc 100644 --- a/mobile-widgets/qml/main.qml +++ b/mobile-widgets/qml/main.qml @@ -525,12 +525,28 @@ if you have network connectivity and want to sync your data to cloud storage."), property color contrastAccentColor: "#FF5722" // used for delete button property color lightDrawerColor: "#FFFFFF" property color darkDrawerColor: "#424242" - - 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: { + // 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.floor(rootItem.width/(Kirigami.Units.gridUnit * pageStack.defaultColumnWidth)) + var colWidth = numColumns > 1 ? Math.floor(rootItem.width / numColumns) : rootItem.width; + var kirigamiGridUnit = Kirigami.Units.gridUnit + var widthInGridUnits = Math.floor(colWidth / kirigamiGridUnit) + if (widthInGridUnits < 21) { + kirigamiGridUnit = Math.floor(colWidth / 21) + widthInGridUnits = Math.floor(colWidth / kirigamiGridUnit) + } + var factor = 1.0 + console.log("Column width " + colWidth + " root item width " + rootItem.width) + console.log("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 + } // break binding explicitly. Now we have a basePointSize that we can // use to easily scale against - basePointSize = basePointSize * 1.0; + basePointSize = basePointSize * factor; // set the initial UI scaling as in the the preferences fontMetrics.font.pointSize = subsurfaceTheme.basePointSize * PrefDisplay.mobile_scale; @@ -654,7 +670,7 @@ if you have network connectivity and want to sync your data to cloud storage."), rootItem.visible = true diveList.opacity = 1 rootItem.opacity = 1 - pageStack.defaultColumnWidth = Kirigami.Units.gridUnit * 28 + pageStack.defaultColumnWidth = Kirigami.Units.gridUnit * 21 manager.appInitialized() } /* TODO: Verify where opacity went to. -- cgit v1.2.3-70-g09d2