From fbea54f8dd6b599da34942a985bff7bb151bc502 Mon Sep 17 00:00:00 2001 From: Dirk Hohndel Date: Fri, 20 Mar 2020 22:54:32 -0700 Subject: [PATCH] mobile/settings: attempt to fix the layout The hardcoded widths with fixed values was just flat our broken and created all kinds of strange artifacts. But even with this somewhat more idiomatic approach this still isn't perfect - on wider screens it doesn't shrink back to the minimum column width. But that seems like a bit of a corner case. Overall this feels like a huge improvement. Signed-off-by: Dirk Hohndel --- mobile-widgets/qml/Settings.qml | 156 ++++++++++++++++---------------- 1 file changed, 78 insertions(+), 78 deletions(-) diff --git a/mobile-widgets/qml/Settings.qml b/mobile-widgets/qml/Settings.qml index a4b55097e..b7d5dd0d7 100644 --- a/mobile-widgets/qml/Settings.qml +++ b/mobile-widgets/qml/Settings.qml @@ -7,32 +7,29 @@ import org.subsurfacedivelog.mobile 1.0 TemplatePage { objectName: "Settings" - id: settingsPage + title: qsTr("Settings") + width: rootItem.colWidth - Kirigami.Units.gridUnit property alias defaultCylinderModel: defaultCylinderBox.model property alias defaultCylinderIndex: defaultCylinderBox.currentIndex - - title: qsTr("Settings") - - property real gridWidth: settingsPage.width - Kirigami.Units.gridUnit + property real contentColumeWidth: width - 2 * Kirigami.Units.gridUnit property var describe: [qsTr("Undefined"), qsTr("Incorrect username/password combination"), qsTr("Credentials need to be verified"), qsTr("Credentials verified"), qsTr("No cloud mode")] - Column { - width: gridWidth - + width: contentColumeWidth TemplateSection { id: sectionGeneral title: qsTr("General settings") isExpanded: true + width: parent.width GridLayout { id: cloudSetting visible: sectionGeneral.isExpanded columns: 3 - + width: parent.width TemplateLabel { text: qsTr("Cloud status") font.pointSize: subsurfaceTheme.headingPointSize @@ -43,11 +40,10 @@ TemplatePage { } TemplateLabel { text: qsTr("Email") - Layout.preferredWidth: gridWidth * 0.15 } TemplateLabel { text: Backend.cloud_verification_status === Enums.CS_NOCLOUD ? qsTr("Not applicable") : PrefCloudStorage.cloud_storage_email - Layout.preferredWidth: gridWidth * 0.60 + Layout.fillWidth: true } TemplateButton { id: changeCloudSettings @@ -59,12 +55,10 @@ TemplatePage { } TemplateLabel { text: qsTr("Status") - Layout.preferredWidth: gridWidth * 0.15 Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5 } TemplateLabel { text: describe[Backend.cloud_verification_status] - Layout.preferredWidth: gridWidth * 0.60 Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5 } } @@ -76,7 +70,6 @@ TemplatePage { visible: sectionGeneral.isExpanded columns: 2 width: parent.width - TemplateLabel { text: qsTr("Default Cylinder") font.pointSize: subsurfaceTheme.headingPointSize @@ -108,6 +101,7 @@ TemplatePage { id: divecomputers visible: sectionGeneral.isExpanded columns: 2 + width: parent.width TemplateLabel { text: qsTr("Dive computers") font.pointSize: subsurfaceTheme.headingPointSize @@ -118,7 +112,7 @@ TemplatePage { } TemplateLabel { text: qsTr("Forget remembered dive computers") - Layout.preferredWidth: gridWidth * 0.75 + Layout.fillWidth: true } TemplateButton { id: forgetDCButton @@ -133,16 +127,24 @@ TemplatePage { } } } - } + } TemplateSection { id: sectionTheme title: qsTr("Theme") - + width: parent.width GridLayout { visible: sectionTheme.isExpanded columns: 2 - + width: parent.width + TemplateLabel { + text: qsTr("Color theme") + font.pointSize: subsurfaceTheme.headingPointSize + font.weight: Font.Light + Layout.topMargin: Kirigami.Units.largeSpacing + Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 + Layout.columnSpan: 2 + } TemplateComboBox { editable: false Layout.columnSpan: 2 @@ -157,12 +159,10 @@ TemplatePage { subsurfaceTheme.currentTheme = currentIndex === 0 ? "Blue" : currentIndex === 1 ? "Pink" : "Dark" } } - Rectangle { color: subsurfaceTheme.backgroundColor - width: rootItem.width / 2 - 20 - height: subsurfaceTheme.regularPointSize + 10 - + Layout.fillWidth: true + Layout.preferredHeight: 2 * Kirigami.Units.gridUnit TemplateLabel { text: qsTr("background") color: subsurfaceTheme.textColor @@ -173,9 +173,8 @@ TemplatePage { } Rectangle { color: subsurfaceTheme.backgroundColor - width: rootItem.width / 2 - 60 - height: subsurfaceTheme.regularPointSize + 10 - + Layout.fillWidth: true + Layout.preferredHeight: 2 * Kirigami.Units.gridUnit TemplateLabel { text: qsTr("text") color: subsurfaceTheme.textColor @@ -184,14 +183,12 @@ TemplatePage { anchors.verticalCenter: parent.verticalCenter } } - Rectangle { border.width: 2 border.color: "black" color: subsurfaceTheme.primaryColor - width: rootItem.width / 2 - 20 - height: subsurfaceTheme.regularPointSize + 10 - + Layout.fillWidth: true + Layout.preferredHeight: 2 * Kirigami.Units.gridUnit TemplateLabel { text: qsTr("primary") color: subsurfaceTheme.primaryTextColor @@ -204,9 +201,8 @@ TemplatePage { border.width: 2 border.color: "black" color: subsurfaceTheme.primaryTextColor - width: rootItem.width / 2 - 60 - height: subsurfaceTheme.regularPointSize + 10 - + Layout.fillWidth: true + Layout.preferredHeight: 2 * Kirigami.Units.gridUnit TemplateLabel { text: qsTr("primary text") color: subsurfaceTheme.primaryColor @@ -215,14 +211,12 @@ TemplatePage { anchors.verticalCenter: parent.verticalCenter } } - Rectangle { border.width: 2 border.color: "black" color: subsurfaceTheme.darkerPrimaryColor - width: rootItem.width / 2 - 20 - height: subsurfaceTheme.regularPointSize + 10 - + Layout.fillWidth: true + Layout.preferredHeight: 2 * Kirigami.Units.gridUnit TemplateLabel { text: qsTr("darker primary") color: subsurfaceTheme.darkerPrimaryTextColor @@ -235,9 +229,8 @@ TemplatePage { border.width: 2 border.color: "black" color: subsurfaceTheme.darkerPrimaryTextColor - width: rootItem.width / 2 - 60 - height: subsurfaceTheme.regularPointSize + 10 - + Layout.fillWidth: true + Layout.preferredHeight: 2 * Kirigami.Units.gridUnit TemplateLabel { text: qsTr("darker primary text") color: subsurfaceTheme.darkerPrimaryColor @@ -246,14 +239,12 @@ TemplatePage { anchors.verticalCenter: parent.verticalCenter } } - Rectangle { border.width: 2 border.color: "black" color: subsurfaceTheme.lightPrimaryColor - width: rootItem.width / 2 - 20 - height: subsurfaceTheme.regularPointSize + 10 - + Layout.fillWidth: true + Layout.preferredHeight: 2 * Kirigami.Units.gridUnit TemplateLabel { text: qsTr("light primary") color: subsurfaceTheme.lightPrimaryTextColor @@ -266,9 +257,8 @@ TemplatePage { border.width: 2 border.color: "black" color: subsurfaceTheme.lightPrimaryTextColor - width: rootItem.width / 2 - 60 - height: subsurfaceTheme.regularPointSize + 10 - + Layout.fillWidth: true + Layout.preferredHeight: 2 * Kirigami.Units.gridUnit TemplateLabel { text: qsTr("light primary text") color: subsurfaceTheme.lightPrimaryColor @@ -277,8 +267,6 @@ TemplatePage { anchors.verticalCenter: parent.verticalCenter } } - - TemplateLabel { text: "" } @@ -286,9 +274,8 @@ TemplatePage { border.width: 2 border.color: "black" color: subsurfaceTheme.secondaryTextColor - width: rootItem.width / 2 - 60 - height: subsurfaceTheme.regularPointSize + 10 - + Layout.fillWidth: true + Layout.preferredHeight: 2 * Kirigami.Units.gridUnit TemplateLabel { text: qsTr("secondary text") color: subsurfaceTheme.primaryColor @@ -297,14 +284,12 @@ TemplatePage { anchors.verticalCenter: parent.verticalCenter } } - Rectangle { border.width: 2 border.color: "black" color: subsurfaceTheme.drawerColor - width: rootItem.width / 2 - 20 - height: subsurfaceTheme.regularPointSize + 10 - + Layout.fillWidth: true + Layout.preferredHeight: 2 * Kirigami.Units.gridUnit TemplateLabel { text: qsTr("drawer") color: subsurfaceTheme.textColor @@ -316,12 +301,20 @@ TemplatePage { TemplateLabel { text: "" } - Row { - Layout.preferredWidth: gridWidth * 0.8 + TemplateLabel { + text: qsTr("Font size") + font.pointSize: subsurfaceTheme.headingPointSize + font.weight: Font.Light + Layout.topMargin: Kirigami.Units.largeSpacing + Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 + Layout.columnSpan: 2 + } + RowLayout { Layout.columnSpan: 2 spacing: Kirigami.Units.largeSpacing TemplateButton { text: qsTr("smaller") + Layout.fillWidth: true enabled: subsurfaceTheme.currentScale !== 0.85 onClicked: { subsurfaceTheme.currentScale = 0.85 @@ -329,6 +322,7 @@ TemplatePage { } TemplateButton { text: qsTr("regular") + Layout.fillWidth: true enabled: subsurfaceTheme.currentScale !== 1.0 onClicked: { subsurfaceTheme.currentScale = 1.0 @@ -336,6 +330,7 @@ TemplatePage { } TemplateButton { text: qsTr("larger") + Layout.fillWidth: true enabled: subsurfaceTheme.currentScale !== 1.15 onClicked: { subsurfaceTheme.currentScale = 1.15 @@ -349,12 +344,13 @@ TemplatePage { TemplateSection { id: sectionUnits title: qsTr("Units") - - Row { + width: parent.width + RowLayout { visible: sectionUnits.isExpanded - + width: parent.width TemplateRadioButton { text: qsTr("Metric") + Layout.fillWidth: true checked: (Backend.unit_system === Enums.METRIC) onClicked: { Backend.unit_system = Enums.METRIC @@ -364,6 +360,7 @@ TemplatePage { } TemplateRadioButton { text: qsTr("Imperial") + Layout.fillWidth: true checked: (Backend.unit_system === Enums.IMPERIAL) onClicked: { Backend.unit_system = Enums.IMPERIAL @@ -373,6 +370,7 @@ TemplatePage { } TemplateRadioButton { text: qsTr("Personalize") + Layout.fillWidth: true checked: (Backend.unit_system === Enums.PERSONALIZE) onClicked: { Backend.unit_system = Enums.PERSONALIZE @@ -384,7 +382,9 @@ TemplatePage { GridLayout { visible: sectionUnits.isExpanded + width: parent.width - 2 * Kirigami.Units.gridUnit enabled: (Backend.unit_system === Enums.PERSONALIZE) + anchors.horizontalCenter: parent.horizontalCenter columns: 3 ButtonGroup { id: unitDepth } @@ -499,12 +499,13 @@ TemplatePage { TemplateSection { id: sectionAdvanced title: qsTr("Advanced") + width: parent.width GridLayout { id: gpsPrefs visible: sectionAdvanced.isExpanded + width: parent.width columns: 2 - TemplateLabel { text: qsTr("GPS location service") font.pointSize: subsurfaceTheme.headingPointSize @@ -513,30 +514,26 @@ TemplatePage { Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.columnSpan: 2 } - TemplateLabel { text: qsTr("Distance threshold (meters)") - Layout.preferredWidth: gridWidth * 0.75 + //Layout.preferredWidth: gridWidth * 0.75 } - TemplateTextField { id: distanceThreshold text: PrefLocationService.distance_threshold - Layout.preferredWidth: gridWidth * 0.25 + //Layout.preferredWidth: gridWidth * 0.25 onEditingFinished: { PrefLocationService.distance_threshold = distanceThreshold.text } } - TemplateLabel { text: qsTr("Time threshold (minutes)") - Layout.preferredWidth: gridWidth * 0.75 + //Layout.preferredWidth: gridWidth * 0.75 } - TemplateTextField { id: timeThreshold text: PrefLocationService.time_threshold / 60 - Layout.preferredWidth: gridWidth * 0.25 + //Layout.preferredWidth: gridWidth * 0.25 onEditingFinished: { PrefLocationService.time_threshold = timeThreshold.text * 60 } @@ -548,6 +545,7 @@ TemplatePage { GridLayout { id: whichBluetoothDevices visible: sectionAdvanced.isExpanded + width: parent.width columns: 2 TemplateLabel { text: qsTr("Bluetooth") @@ -557,15 +555,15 @@ TemplatePage { Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.columnSpan: 2 } - TemplateLabel { text: qsTr("Temporarily show all bluetooth devices \neven if not recognized as dive computers.\nPlease report DCs that need this setting") - Layout.preferredWidth: gridWidth * 0.75 + Layout.fillWidth: true + //Layout.preferredWidth: gridWidth * 0.75 } SsrfSwitch { id: nonDCButton checked: manager.showNonDiveComputers - Layout.preferredWidth: gridWidth * 0.25 + //Layout.preferredWidth: gridWidth * 0.25 onClicked: { manager.showNonDiveComputers = checked } @@ -577,6 +575,7 @@ TemplatePage { GridLayout { id: display visible: sectionAdvanced.isExpanded + width: parent.width columns: 2 TemplateLabel { text: qsTr("Display") @@ -588,24 +587,25 @@ TemplatePage { } TemplateLabel { text: qsTr("Show only one column in Portrait mode") - Layout.preferredWidth: gridWidth * 0.75 + Layout.fillWidth: true + //Layout.preferredWidth: gridWidth * 0.75 } SsrfSwitch { id: singleColumnButton checked: PrefDisplay.singleColumnPortrait - Layout.preferredWidth: gridWidth * 0.25 + //Layout.preferredWidth: gridWidth * 0.25 onClicked: { PrefDisplay.singleColumnPortrait = checked } } } - TemplateLine { visible: sectionAdvanced.isExpanded } GridLayout { id: developer visible: sectionAdvanced.isExpanded + width: parent.width columns: 2 TemplateLabel { text: qsTr("Developer") @@ -615,15 +615,15 @@ TemplatePage { Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.columnSpan: 2 } - TemplateLabel { text: qsTr("Display Developer menu") - Layout.preferredWidth: gridWidth * 0.75 + Layout.fillWidth: true + //Layout.preferredWidth: gridWidth * 0.75 } SsrfSwitch { id: developerButton checked: PrefDisplay.show_developer - Layout.preferredWidth: gridWidth * 0.25 + //sLayout.preferredWidth: gridWidth * 0.25 onClicked: { PrefDisplay.show_developer = checked }