From 0ad7df985972bee42f925d2e2853587307e3ef7a Mon Sep 17 00:00:00 2001 From: Jan Mulder Date: Thu, 27 Sep 2018 11:54:28 +0200 Subject: [PATCH] mobile, QML UI: Settings page scalability A relatively big change for such a simple page. Most relevant changes are: 1) Do not use Kirigami.Header anymore. It appears that this header has word wrapping on (and we cannot override that). This is annoying on this page, as headings seems randomly be split over 2 lines, even in cases where there is more than enhough room to display it on one line. And as the Kirigami.Header is just a trivial wrapper of a Text field, we can simple replace it. 2) A lot of the toplevel GridLayouts had width properties set. These are not needed (and confused my debugging code), so they are removed withput any visual change. As a general rule, do not try to set properties that are not needed. In general, it can only lead to binding loops or undefined behavior. 3) Add a font size to our Theme. The step from regular to title size was a little too big. 4) And, obviously, numerous font.pointSize lines are added to actually resize the font. Signed-off-by: Jan Mulder --- mobile-widgets/qml/Settings.qml | 90 +++++++++++++++++++-------------- mobile-widgets/qml/main.qml | 1 + 2 files changed, 53 insertions(+), 38 deletions(-) diff --git a/mobile-widgets/qml/Settings.qml b/mobile-widgets/qml/Settings.qml index 65940cc67..293701fd2 100644 --- a/mobile-widgets/qml/Settings.qml +++ b/mobile-widgets/qml/Settings.qml @@ -28,31 +28,28 @@ Kirigami.ScrollablePage { GridLayout { id: cloudSetting columns: 3 - Layout.bottomMargin: Kirigami.Units.gridUnit - Kirigami.Heading { + Controls.Label { text: qsTr("Cloud status") + font.pointSize: subsurfaceTheme.headingPointSize + font.weight: Font.Light color: subsurfaceTheme.textColor - level: 4 Layout.topMargin: Kirigami.Units.largeSpacing Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.columnSpan: 3 } Controls.Label { text: qsTr("Email") - Layout.alignment: Qt.AlignRight + font.pointSize: subsurfaceTheme.regularPointSize Layout.preferredWidth: gridWidth * 0.15 - Layout.preferredHeight: Kirigami.Units.gridUnit * 2 } Controls.Label { text: prefs.credentialStatus === CloudStatus.CS_NOCLOUD ? qsTr("Not applicable") : prefs.cloudUserName - Layout.alignment: Qt.AlignRight + font.pointSize: subsurfaceTheme.regularPointSize Layout.preferredWidth: gridWidth * 0.60 - Layout.preferredHeight: Kirigami.Units.gridUnit * 2 } SsrfButton { id: changeCloudSettings - Layout.alignment: Qt.AlignRight text: qsTr("Change") onClicked: { prefs.cancelCredentialsPinSetup() @@ -61,15 +58,15 @@ Kirigami.ScrollablePage { } Controls.Label { text: qsTr("Status") - Layout.alignment: Qt.AlignRight + font.pointSize: subsurfaceTheme.regularPointSize Layout.preferredWidth: gridWidth * 0.15 - Layout.preferredHeight: Kirigami.Units.gridUnit * 2 + Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5 } Controls.Label { text: describe[prefs.credentialStatus] - Layout.alignment: Qt.AlignRight + font.pointSize: subsurfaceTheme.regularPointSize Layout.preferredWidth: gridWidth * 0.60 - Layout.preferredHeight: Kirigami.Units.gridUnit * 2 + Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5 } } @@ -82,18 +79,19 @@ Kirigami.ScrollablePage { GridLayout { id: themeSettings columns: 3 - Layout.bottomMargin: Kirigami.Units.gridUnit - Kirigami.Heading { + Controls.Label { text: qsTr("Theme") + font.pointSize: subsurfaceTheme.headingPointSize + font.weight: Font.Light color: subsurfaceTheme.textColor - level: 4 Layout.topMargin: Kirigami.Units.largeSpacing Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.columnSpan: 3 } Controls.Label { text: qsTr("Blue") + font.pointSize: subsurfaceTheme.regularPointSize color: subsurfaceTheme.textColor rightPadding: Kirigami.Units.gridUnit Layout.preferredWidth: gridWidth * 0.15 @@ -109,6 +107,7 @@ Kirigami.ScrollablePage { Text { id: sampleRegularBlue text: qsTr("regular text") + font.pointSize: subsurfaceTheme.regularPointSize color: subsurfaceTheme.blueTextColor anchors { horizontalCenter: parent.horizontalCenter @@ -124,6 +123,7 @@ Kirigami.ScrollablePage { Text { id: sampleHighlightBlue text: qsTr("Highlight") + font.pointSize: subsurfaceTheme.regularPointSize color: subsurfaceTheme.bluePrimaryTextColor anchors { horizontalCenter: parent.horizontalCenter @@ -146,6 +146,7 @@ Kirigami.ScrollablePage { Controls.Label { id: pinkLabel text: qsTr("Pink") + font.pointSize: subsurfaceTheme.regularPointSize rightPadding: Kirigami.Units.gridUnit Layout.preferredWidth: gridWidth * 0.15 } @@ -160,6 +161,7 @@ Kirigami.ScrollablePage { Text { id: sampleRegularPink text: qsTr("regular text") + font.pointSize: subsurfaceTheme.regularPointSize color: subsurfaceTheme.pinkTextColor anchors { horizontalCenter: parent.horizontalCenter @@ -175,6 +177,7 @@ Kirigami.ScrollablePage { Text { id: sampleHighlightPink text: qsTr("Highlight") + font.pointSize: subsurfaceTheme.regularPointSize color: subsurfaceTheme.pinkPrimaryTextColor anchors { horizontalCenter: parent.horizontalCenter @@ -197,6 +200,7 @@ Kirigami.ScrollablePage { Controls.Label { text: qsTr("Dark") + font.pointSize: subsurfaceTheme.regularPointSize color: subsurfaceTheme.textColor rightPadding: Kirigami.Units.gridUnit Layout.preferredWidth: gridWidth * 0.15 @@ -212,6 +216,7 @@ Kirigami.ScrollablePage { Text { id: sampleRegularDark text: qsTr("regular text") + font.pointSize: subsurfaceTheme.regularPointSize color: subsurfaceTheme.darkTextColor anchors { horizontalCenter: parent.horizontalCenter @@ -227,6 +232,7 @@ Kirigami.ScrollablePage { Text { id: sampleHighlightDark text: qsTr("Highlight") + font.pointSize: subsurfaceTheme.regularPointSize color: subsurfaceTheme.darkPrimaryTextColor anchors { horizontalCenter: parent.horizontalCenter @@ -245,10 +251,11 @@ Kirigami.ScrollablePage { PrefDisplay.theme = subsurfaceTheme.currentTheme } } - Kirigami.Heading { + Controls.Label { text: qsTr("Scaling") + font.pointSize: subsurfaceTheme.headingPointSize + font.weight: Font.Light color: subsurfaceTheme.textColor - level: 4 Layout.topMargin: Kirigami.Units.largeSpacing Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.columnSpan: 3 @@ -294,12 +301,12 @@ Kirigami.ScrollablePage { GridLayout { id: gpsPrefs columns: 2 - width: parent.width - Kirigami.Heading { + Controls.Label { text: qsTr("GPS location service") + font.pointSize: subsurfaceTheme.headingPointSize + font.weight: Font.Light color: subsurfaceTheme.textColor - level: 4 Layout.topMargin: Kirigami.Units.largeSpacing Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.columnSpan: 2 @@ -307,13 +314,14 @@ Kirigami.ScrollablePage { Controls.Label { text: qsTr("Distance threshold (meters)") - Layout.alignment: Qt.AlignRight + font.pointSize: subsurfaceTheme.regularPointSize Layout.preferredWidth: gridWidth * 0.75 } Controls.TextField { id: distanceThreshold text: PrefLocationService.distance_threshold + font.pointSize: subsurfaceTheme.regularPointSize Layout.preferredWidth: gridWidth * 0.25 onEditingFinished: { PrefLocationService.distance_threshold = distanceThreshold.text @@ -322,13 +330,14 @@ Kirigami.ScrollablePage { Controls.Label { text: qsTr("Time threshold (minutes)") - Layout.alignment: Qt.AlignRight + font.pointSize: subsurfaceTheme.regularPointSize Layout.preferredWidth: gridWidth * 0.75 } Controls.TextField { id: timeThreshold text: PrefLocationService.time_threshold / 60 + font.pointSize: subsurfaceTheme.regularPointSize Layout.preferredWidth: gridWidth * 0.25 onEditingFinished: { PrefLocationService.time_threshold = timeThreshold.text * 60 @@ -342,27 +351,29 @@ Kirigami.ScrollablePage { opacity: 0.5 Layout.fillWidth: true } + GridLayout { id: defaultCylinder columns: 2 - width: parent.width - Kirigami.Units.gridUnit + Layout.rightMargin: Kirigami.Units.gridUnit * 1.5 - Kirigami.Heading { + Controls.Label { text: qsTr("Default Cylinder") + font.pointSize: subsurfaceTheme.headingPointSize + font.weight: Font.Light color: subsurfaceTheme.textColor - level: 4 Layout.topMargin: Kirigami.Units.largeSpacing Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.columnSpan: 2 } Controls.Label { - Layout.alignment: Qt.AlignRight text: qsTr("Cylinder:") - font.pointSize: subsurfaceTheme.smallPointSize + font.pointSize: subsurfaceTheme.regularPointSize } Controls.ComboBox { id: defaultCylinderBox - flat: true + font.pointSize: subsurfaceTheme.regularPointSize + Layout.preferredHeight: fontMetrics.height * 2.5 inputMethodHints: Qt.ImhNoPredictiveText Layout.fillWidth: true onActivated: { @@ -370,7 +381,6 @@ Kirigami.ScrollablePage { } } } - Rectangle { color: subsurfaceTheme.darkerPrimaryColor height: 1 @@ -381,17 +391,18 @@ Kirigami.ScrollablePage { GridLayout { id: divecomputers columns: 2 - width: parent.width - Kirigami.Units.gridUnit - Kirigami.Heading { + Controls.Label { text: qsTr("Dive computers") + font.pointSize: subsurfaceTheme.headingPointSize + font.weight: Font.Light color: subsurfaceTheme.textColor - level: 4 Layout.topMargin: Kirigami.Units.largeSpacing Layout.bottomMargin: Kirigami.Units.largeSpacing Layout.columnSpan: 2 } Controls.Label { text: qsTr("Forget remembered dive computers") + font.pointSize: subsurfaceTheme.regularPointSize Layout.preferredWidth: gridWidth * 0.75 } SsrfButton { @@ -417,11 +428,11 @@ Kirigami.ScrollablePage { GridLayout { id: unit_system columns: 2 - width: parent.width - Kirigami.Units.gridUnit - Kirigami.Heading { + Controls.Label { text: qsTr("Units") + font.pointSize: subsurfaceTheme.headingPointSize + font.weight: Font.Light color: subsurfaceTheme.textColor - level: 4 Layout.topMargin: Kirigami.Units.largeSpacing Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.columnSpan: 2 @@ -429,6 +440,7 @@ Kirigami.ScrollablePage { Controls.Label { text: qsTr("Use Imperial Units") + font.pointSize: subsurfaceTheme.regularPointSize Layout.preferredWidth: gridWidth * 0.75 } SsrfSwitch { @@ -444,6 +456,7 @@ Kirigami.ScrollablePage { } Controls.Label { text: qsTr("Use Metric Units") + font.pointSize: subsurfaceTheme.regularPointSize Layout.preferredWidth: gridWidth * 0.75 } SsrfSwitch { @@ -469,11 +482,11 @@ Kirigami.ScrollablePage { GridLayout { id: developer columns: 2 - width: parent.width - Kirigami.Units.gridUnit - Kirigami.Heading { + Controls.Label { text: qsTr("Developer") + font.pointSize: subsurfaceTheme.headingPointSize + font.weight: Font.Light color: subsurfaceTheme.textColor - level: 4 Layout.topMargin: Kirigami.Units.largeSpacing Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.columnSpan: 2 @@ -481,6 +494,7 @@ Kirigami.ScrollablePage { Controls.Label { text: qsTr("Display Developer menu") + font.pointSize: subsurfaceTheme.regularPointSize Layout.preferredWidth: gridWidth * 0.75 } SsrfSwitch { diff --git a/mobile-widgets/qml/main.qml b/mobile-widgets/qml/main.qml index 743b4caa1..72d37134a 100644 --- a/mobile-widgets/qml/main.qml +++ b/mobile-widgets/qml/main.qml @@ -455,6 +455,7 @@ if you have network connectivity and want to sync your data to cloud storage."), property double regularPointSize: fontMetrics.font.pointSize property double titlePointSize: regularPointSize * 1.5 + property double headingPointSize: regularPointSize * 1.2 property double smallPointSize: regularPointSize * 0.8 // colors currently in use