Mobile Settings formatting

Signed-off-by: Rick Walsh <rickmwalsh@gmail.com>
This commit is contained in:
Rick Walsh 2017-07-20 19:55:58 +12:00 committed by Dirk Hohndel
parent 6655b37add
commit 8d2b59ff31
2 changed files with 96 additions and 74 deletions

View file

@ -14,6 +14,10 @@ Item {
property string username: login.text; property string username: login.text;
property string password: password.text; property string password: password.text;
property real gridWidth: loginWindow.width - Kirigami.Units.gridUnit
property real col1Width: gridWidth * 0.80
property real col2Width: gridWidth * 0.20
function saveCredentials() { function saveCredentials() {
manager.cloudUserName = login.text manager.cloudUserName = login.text
manager.cloudPassword = password.text manager.cloudPassword = password.text
@ -82,16 +86,18 @@ Item {
GridLayout { GridLayout {
columns: 2 columns: 2
Kirigami.Label {
text: qsTr("Show password")
Layout.preferredWidth: col1Width
}
Switch { Switch {
checked: false checked: false
id: showPassword id: showPassword
Layout.preferredWidth: col4Width
onCheckedChanged: { onCheckedChanged: {
password.echoMode = checked ? TextInput.Normal : TextInput.Password password.echoMode = checked ? TextInput.Normal : TextInput.Password
} }
} }
Kirigami.Label {
text: qsTr("Show password")
}
} }
Kirigami.Label { Kirigami.Label {

View file

@ -9,8 +9,14 @@ import org.subsurfacedivelog.mobile 1.0
Kirigami.ScrollablePage { Kirigami.ScrollablePage {
objectName: "Settings" objectName: "Settings"
id: settingsPage
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 col1Width: gridWidth * 0.25
property real col2Width: gridWidth * 0.25
property real col3Width: gridWidth * 0.25
property real col4Width: gridWidth * 0.25
actions { actions {
main: Kirigami.Action { main: Kirigami.Action {
@ -38,12 +44,11 @@ Kirigami.ScrollablePage {
color: subsurfaceTheme.darkerPrimaryColor color: subsurfaceTheme.darkerPrimaryColor
height: 1 height: 1
opacity: 0.5 opacity: 0.5
Layout.columnSpan: 3
Layout.fillWidth: true Layout.fillWidth: true
} }
GridLayout { GridLayout {
id: themeSettings id: themeSettings
columns: 2 columns: 4
Layout.bottomMargin: Kirigami.Units.gridUnit Layout.bottomMargin: Kirigami.Units.gridUnit
Kirigami.Heading { Kirigami.Heading {
@ -52,41 +57,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: 2 Layout.columnSpan: 4
} }
RadioButton { Label {
id: bluebutton text: qsTr("Blue")
checked: subsurfaceTheme.currentTheme === "Blue" color: subsurfaceTheme.textColor
onClicked: { rightPadding: Kirigami.Units.gridUnit
blueTheme() Layout.preferredWidth: settingsPage.col1Width
}
indicator: Rectangle {
implicitWidth: 20
implicitHeight: 20
x: bluebutton.leftPadding
y: parent.height / 2 - height / 2
radius: 4
border.color: bluebutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor
color: subsurfaceTheme.backgroundColor
Rectangle {
width: 12
height: 12
x: 4
y: 4
radius: 3
color: bluebutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor
visible: bluebutton.checked
}
}
} }
Row { Row {
Label { Layout.columnSpan: 2
text: qsTr("Blue") Layout.preferredWidth: settingsPage.col2Width + settingsPage.col3Width
color: subsurfaceTheme.textColor
anchors.verticalCenter: blueRect.verticalCenter
rightPadding: Kirigami.Units.gridUnit
}
Rectangle { Rectangle {
id: blueRect id: blueRect
color: subsurfaceTheme.blueBackgroundColor color: subsurfaceTheme.blueBackgroundColor
@ -119,20 +100,20 @@ Kirigami.ScrollablePage {
} }
} }
} }
RadioButton { RadioButton {
id: pinkbutton id: bluebutton
checked: subsurfaceTheme.currentTheme === "Pink" Layout.preferredWidth: settingsPage.col4Width
checked: subsurfaceTheme.currentTheme === "Blue"
onClicked: { onClicked: {
pinkTheme() blueTheme()
} }
indicator: Rectangle { indicator: Rectangle {
implicitWidth: 20 implicitWidth: 20
implicitHeight: 20 implicitHeight: 20
x: pinkbutton.leftPadding x: bluebutton.leftPadding
y: parent.height / 2 - height / 2 y: parent.height / 2 - height / 2
radius: 4 radius: 4
border.color: pinkbutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor border.color: bluebutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor
color: subsurfaceTheme.backgroundColor color: subsurfaceTheme.backgroundColor
Rectangle { Rectangle {
@ -141,18 +122,21 @@ Kirigami.ScrollablePage {
x: 4 x: 4
y: 4 y: 4
radius: 3 radius: 3
color: pinkbutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor color: bluebutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor
visible: pinkbutton.checked visible: bluebutton.checked
} }
} }
} }
Label {
text: qsTr("Pink")
color: subsurfaceTheme.textColor
rightPadding: Kirigami.Units.gridUnit
Layout.preferredWidth: settingsPage.col1Width
}
Row { Row {
Label { Layout.columnSpan: 2
text: qsTr("Pink") Layout.preferredWidth: settingsPage.col2Width + settingsPage.col3Width
color: subsurfaceTheme.textColor
anchors.verticalCenter: pinkRect.verticalCenter
rightPadding: Kirigami.Units.gridUnit
}
Rectangle { Rectangle {
id: pinkRect id: pinkRect
color: subsurfaceTheme.pinkBackgroundColor color: subsurfaceTheme.pinkBackgroundColor
@ -185,20 +169,20 @@ Kirigami.ScrollablePage {
} }
} }
} }
RadioButton { RadioButton {
id: darkbutton id: pinkbutton
checked: subsurfaceTheme.currentTheme === "Dark" checked: subsurfaceTheme.currentTheme === "Pink"
Layout.preferredWidth: settingsPage.col4Width
onClicked: { onClicked: {
darkTheme() pinkTheme()
} }
indicator: Rectangle { indicator: Rectangle {
implicitWidth: 20 implicitWidth: 20
implicitHeight: 20 implicitHeight: 20
x: darkbutton.leftPadding x: pinkbutton.leftPadding
y: parent.height / 2 - height / 2 y: parent.height / 2 - height / 2
radius: 4 radius: 4
border.color: darkbutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor border.color: pinkbutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor
color: subsurfaceTheme.backgroundColor color: subsurfaceTheme.backgroundColor
Rectangle { Rectangle {
@ -207,18 +191,21 @@ Kirigami.ScrollablePage {
x: 4 x: 4
y: 4 y: 4
radius: 3 radius: 3
color: darkbutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor color: pinkbutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor
visible: darkbutton.checked visible: pinkbutton.checked
} }
} }
} }
Label {
text: qsTr("Dark")
color: subsurfaceTheme.textColor
rightPadding: Kirigami.Units.gridUnit
Layout.preferredWidth: settingsPage.col1Width
}
Row { Row {
Label { Layout.columnSpan: 2
text: qsTr("Dark") Layout.preferredWidth: settingsPage.col2Width + settingsPage.col3Width
color: subsurfaceTheme.textColor
anchors.verticalCenter: blackRect.verticalCenter
rightPadding: Kirigami.Units.gridUnit
}
Rectangle { Rectangle {
id: blackRect id: blackRect
color: subsurfaceTheme.darkBackgroundColor color: subsurfaceTheme.darkBackgroundColor
@ -251,12 +238,38 @@ Kirigami.ScrollablePage {
} }
} }
} }
RadioButton {
id: darkbutton
checked: subsurfaceTheme.currentTheme === "Dark"
Layout.preferredWidth: settingsPage.col4Width
onClicked: {
darkTheme()
}
indicator: Rectangle {
implicitWidth: 20
implicitHeight: 20
x: darkbutton.leftPadding
y: parent.height / 2 - height / 2
radius: 4
border.color: darkbutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor
color: subsurfaceTheme.backgroundColor
Rectangle {
width: 12
height: 12
x: 4
y: 4
radius: 3
color: darkbutton.down ? subsurfaceTheme.primaryColor : subsurfaceTheme.darkerPrimaryColor
visible: darkbutton.checked
}
}
}
} }
Rectangle { Rectangle {
color: subsurfaceTheme.darkerPrimaryColor color: subsurfaceTheme.darkerPrimaryColor
height: 1 height: 1
opacity: 0.5 opacity: 0.5
Layout.columnSpan: 3
Layout.fillWidth: true Layout.fillWidth: true
} }
GridLayout { GridLayout {
@ -276,23 +289,25 @@ 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
} }
TextField { TextField {
id: distanceThreshold id: distanceThreshold
text: manager.distanceThreshold text: manager.distanceThreshold
Layout.fillWidth: true Layout.preferredWidth: settingsPage.col3Width + settingsPage.col4Width
} }
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
} }
TextField { TextField {
id: timeThreshold id: timeThreshold
text: manager.timeThreshold text: manager.timeThreshold
Layout.fillWidth: true Layout.preferredWidth: settingsPage.col3Width + settingsPage.col4Width
} }
Item { Item {
@ -303,7 +318,6 @@ Kirigami.ScrollablePage {
color: subsurfaceTheme.darkerPrimaryColor color: subsurfaceTheme.darkerPrimaryColor
height: 1 height: 1
opacity: 0.5 opacity: 0.5
Layout.columnSpan: 3
Layout.fillWidth: true Layout.fillWidth: true
} }
GridLayout { GridLayout {
@ -343,7 +357,7 @@ Kirigami.ScrollablePage {
} }
GridLayout { GridLayout {
id: libdclogprefs id: libdclogprefs
columns: 2 columns: 4
width: parent.width width: parent.width
Kirigami.Heading { Kirigami.Heading {
text: qsTr("Dive computer") text: qsTr("Dive computer")
@ -351,19 +365,21 @@ 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: 2 Layout.columnSpan: 4
} }
Kirigami.Label {
text: qsTr("Save detailed log")
Layout.preferredWidth: settingsPage.col1Width + settingsPage.col2Width + settingsPage.col3Width
}
Switch { Switch {
id: libdclogButton id: libdclogButton
checked: manager.libdcLog checked: manager.libdcLog
Layout.preferredWidth: settingsPage.col4Width
onClicked: { onClicked: {
manager.libdcLog = checked manager.libdcLog = checked
} }
} }
Kirigami.Label {
text: qsTr("Save detailed log of interaction with the dive computer")
}
} }
GridLayout { GridLayout {
id: developer id: developer