QML UI: simplify settings page code

In stead of using the fixed 4 column code introduced in f2fcad89b0db9b164d8fd3f89218ad27ca362bd3 use percentages of page width to allow for a more flexible layout since no block really has 4 columns.

Signed-off-by: Joakim Bygdell <j.bygdell@gmail.com>
This commit is contained in:
Joakim Bygdell 2017-07-22 12:04:27 +02:00 committed by Dirk Hohndel
parent a80394d5b6
commit 1659390a54

View file

@ -13,10 +13,6 @@ Kirigami.ScrollablePage {
title: qsTr("Settings") title: qsTr("Settings")
anchors.margins: Kirigami.Units.gridUnit / 2 anchors.margins: Kirigami.Units.gridUnit / 2
property real gridWidth: settingsPage.width - 2 * Kirigami.Units.gridUnit property real gridWidth: settingsPage.width - 2 * Kirigami.Units.gridUnit
property real col1Width: gridWidth * 0.25
property real col2Width: gridWidth * 0.25
property real col3Width: gridWidth * 0.25
property real col4Width: gridWidth * 0.25
ColumnLayout { ColumnLayout {
width: parent.width - Kirigami.Units.gridUnit width: parent.width - Kirigami.Units.gridUnit
@ -35,7 +31,7 @@ Kirigami.ScrollablePage {
} }
GridLayout { GridLayout {
id: themeSettings id: themeSettings
columns: 4 columns: 3
Layout.bottomMargin: Kirigami.Units.gridUnit Layout.bottomMargin: Kirigami.Units.gridUnit
Kirigami.Heading { Kirigami.Heading {
@ -44,16 +40,15 @@ Kirigami.ScrollablePage {
level: 4 level: 4
Layout.topMargin: Kirigami.Units.largeSpacing Layout.topMargin: Kirigami.Units.largeSpacing
Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.bottomMargin: Kirigami.Units.largeSpacing / 2
Layout.columnSpan: 4 Layout.columnSpan: 3
} }
Kirigami.Label { Kirigami.Label {
text: qsTr("Blue") text: qsTr("Blue")
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
rightPadding: Kirigami.Units.gridUnit rightPadding: Kirigami.Units.gridUnit
Layout.preferredWidth: settingsPage.col1Width * 0.8 Layout.preferredWidth: gridWidth * 0.2
} }
Row { Row {
Layout.columnSpan: 2
Layout.preferredWidth: gridwidth * 0.6 Layout.preferredWidth: gridwidth * 0.6
// Layout.alignment: Qt.AlignLeft // Layout.alignment: Qt.AlignLeft
Rectangle { Rectangle {
@ -90,7 +85,7 @@ Kirigami.ScrollablePage {
} }
RadioButton { RadioButton {
id: bluebutton id: bluebutton
Layout.preferredWidth: settingsPage.col4Width * 0.5 Layout.preferredWidth: gridWidth * 0.125
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
checked: subsurfaceTheme.currentTheme === "Blue" checked: subsurfaceTheme.currentTheme === "Blue"
onClicked: { onClicked: {
@ -123,10 +118,9 @@ Kirigami.ScrollablePage {
text: qsTr("Pink") text: qsTr("Pink")
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
rightPadding: Kirigami.Units.gridUnit rightPadding: Kirigami.Units.gridUnit
Layout.preferredWidth: settingsPage.col1Width * 0.5 Layout.preferredWidth: gridWidth * 0.125
} }
Row { Row {
Layout.columnSpan: 2
Layout.preferredWidth: settingsPage.col2Width + settingsPage.col3Width Layout.preferredWidth: settingsPage.col2Width + settingsPage.col3Width
Rectangle { Rectangle {
id: pinkRect id: pinkRect
@ -164,7 +158,7 @@ Kirigami.ScrollablePage {
RadioButton { RadioButton {
id: pinkbutton id: pinkbutton
checked: subsurfaceTheme.currentTheme === "Pink" checked: subsurfaceTheme.currentTheme === "Pink"
Layout.preferredWidth: settingsPage.col4Width * 0.5 Layout.preferredWidth: gridWidth * 0.125
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
onClicked: { onClicked: {
pinkTheme() pinkTheme()
@ -196,10 +190,9 @@ Kirigami.ScrollablePage {
text: qsTr("Dark") text: qsTr("Dark")
color: subsurfaceTheme.textColor color: subsurfaceTheme.textColor
rightPadding: Kirigami.Units.gridUnit rightPadding: Kirigami.Units.gridUnit
Layout.preferredWidth: settingsPage.col1Width * 0.5 Layout.preferredWidth: gridWidth * 0.125
} }
Row { Row {
Layout.columnSpan: 2
Layout.preferredWidth: settingsPage.col2Width + settingsPage.col3Width Layout.preferredWidth: settingsPage.col2Width + settingsPage.col3Width
Rectangle { Rectangle {
id: blackRect id: blackRect
@ -236,7 +229,7 @@ Kirigami.ScrollablePage {
RadioButton { RadioButton {
id: darkbutton id: darkbutton
checked: subsurfaceTheme.currentTheme === "Dark" checked: subsurfaceTheme.currentTheme === "Dark"
Layout.preferredWidth: settingsPage.col4Width * 0.5 Layout.preferredWidth: gridWidth * 0.125
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
onClicked: { onClicked: {
darkTheme() darkTheme()
@ -287,13 +280,13 @@ Kirigami.ScrollablePage {
Kirigami.Label { Kirigami.Label {
text: qsTr("Distance threshold (meters)") text: qsTr("Distance threshold (meters)")
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
Layout.preferredWidth: settingsPage.col1Width + settingsPage.col2Width + settingsPage.col3Width Layout.preferredWidth:gridWidth * 0.75
} }
TextField { TextField {
id: distanceThreshold id: distanceThreshold
text: manager.distanceThreshold text: manager.distanceThreshold
Layout.preferredWidth: settingsPage.col4Width Layout.preferredWidth: gridWidth * 0.25
onEditingFinished: { onEditingFinished: {
manager.distanceThreshold = distanceThreshold.text manager.distanceThreshold = distanceThreshold.text
manager.savePreferences() manager.savePreferences()
@ -303,13 +296,13 @@ Kirigami.ScrollablePage {
Kirigami.Label { Kirigami.Label {
text: qsTr("Time threshold (minutes)") text: qsTr("Time threshold (minutes)")
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
Layout.preferredWidth: settingsPage.col1Width + settingsPage.col2Width + settingsPage.col3Width Layout.preferredWidth: gridWidth * 0.75
} }
TextField { TextField {
id: timeThreshold id: timeThreshold
text: manager.timeThreshold text: manager.timeThreshold
Layout.preferredWidth: settingsPage.col4Width Layout.preferredWidth: gridWidth * 0.25
onEditingFinished: { onEditingFinished: {
manager.timeThreshold = timeThreshold.text manager.timeThreshold = timeThreshold.text
manager.savePreferences() manager.savePreferences()
@ -319,11 +312,11 @@ Kirigami.ScrollablePage {
Kirigami.Label { Kirigami.Label {
text: qsTr("Run location service") text: qsTr("Run location service")
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
Layout.preferredWidth: settingsPage.col1Width + settingsPage.col2Width + settingsPage.col3Width Layout.preferredWidth: gridWidth * 0.75
} }
Switch { Switch {
id: locationButton id: locationButton
Layout.preferredWidth: settingsPage.col4Width Layout.preferredWidth: gridWidth * 0.25
visible: manager.locationServiceAvailable visible: manager.locationServiceAvailable
checked: manager.locationServiceEnabled checked: manager.locationServiceEnabled
onClicked: { onClicked: {
@ -360,7 +353,7 @@ Kirigami.ScrollablePage {
} }
GridLayout { GridLayout {
id: libdclogprefs id: libdclogprefs
columns: 4 columns: 2
width: parent.width width: parent.width
Kirigami.Heading { Kirigami.Heading {
text: qsTr("Dive computer") text: qsTr("Dive computer")
@ -368,17 +361,17 @@ Kirigami.ScrollablePage {
level: 4 level: 4
Layout.topMargin: Kirigami.Units.largeSpacing Layout.topMargin: Kirigami.Units.largeSpacing
Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.bottomMargin: Kirigami.Units.largeSpacing / 2
Layout.columnSpan: 4 Layout.columnSpan: 2
} }
Kirigami.Label { Kirigami.Label {
text: qsTr("Save detailed log") text: qsTr("Save detailed log")
Layout.preferredWidth: settingsPage.col1Width + settingsPage.col2Width + settingsPage.col3Width Layout.preferredWidth: gridWidth * 0.75
} }
Switch { Switch {
id: libdclogButton id: libdclogButton
checked: manager.libdcLog checked: manager.libdcLog
Layout.preferredWidth: settingsPage.col4Width Layout.preferredWidth: gridWidth * 0.25
onClicked: { onClicked: {
manager.libdcLog = checked manager.libdcLog = checked
} }
@ -413,7 +406,7 @@ Kirigami.ScrollablePage {
} }
GridLayout { GridLayout {
id: developer id: developer
columns: 4 columns: 2
width: parent.width - Kirigami.Units.gridUnit width: parent.width - Kirigami.Units.gridUnit
Kirigami.Heading { Kirigami.Heading {
text: qsTr("Developer") text: qsTr("Developer")
@ -421,17 +414,17 @@ Kirigami.ScrollablePage {
level: 4 level: 4
Layout.topMargin: Kirigami.Units.largeSpacing Layout.topMargin: Kirigami.Units.largeSpacing
Layout.bottomMargin: Kirigami.Units.largeSpacing / 2 Layout.bottomMargin: Kirigami.Units.largeSpacing / 2
Layout.columnSpan: 4 Layout.columnSpan: 2
} }
Kirigami.Label { Kirigami.Label {
text: qsTr("Display Developer menu") text: qsTr("Display Developer menu")
Layout.preferredWidth: settingsPage.col1Width + settingsPage.col2Width + settingsPage.col3Width Layout.preferredWidth: gridWidth * 0.75
} }
Switch { Switch {
id: developerButton id: developerButton
checked: manager.developer checked: manager.developer
Layout.preferredWidth: settingsPage.col4Width Layout.preferredWidth: gridWidth * 0.25
onClicked: { onClicked: {
manager.developer = checked manager.developer = checked
} }