Improve layout of login dialog

- Add margins consistent with other pages
- Top-align the dialog, we want to keep the inputs as high as possible
  on the screen to prevent the on-screen-keyboard from covering them
- Add a checkbox to show the password, with input on mobile devices,
  this is a commonly found and useful feature
- Remove Cancel button, this is just navigation chrome, the user can
  simply use the back button in the top bar (will be fixed in a
  subsequent patch)

Signed-off-by: Sebastian Kügler <sebas@kde.org>
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
This commit is contained in:
Sebastian Kügler 2015-11-07 03:01:16 +01:00 committed by Dirk Hohndel
parent aae4a326f4
commit 6dfac6a081

View file

@ -16,11 +16,13 @@ Item {
GridLayout { GridLayout {
columns: 2 columns: 2
anchors.centerIn: parent anchors.fill: parent
width: parent.width anchors.margins: units.gridUnit
Label { Label {
text: "Enter your Subsurface cloud credentials" text: "Enter your Subsurface cloud credentials"
Layout.bottomMargin: units.largeSpacing
font.pointSize: units.titlePointSize
Layout.columnSpan: 2 Layout.columnSpan: 2
} }
@ -45,6 +47,18 @@ Item {
Layout.fillWidth: true Layout.fillWidth: true
} }
Label {
text: "Show password"
}
CheckBox {
checked: false
id: showPassword
onCheckedChanged: {
password.echoMode = checked ? TextInput.Normal : TextInput.Password
}
}
Label { Label {
text: "Save Password locally" text: "Save Password locally"
} }
@ -54,6 +68,7 @@ Item {
id: savePassword id: savePassword
} }
Item { width: units.gridUnit; height: width }
Item { Item {
height: saveButton.height height: saveButton.height
width: saveButton.width width: saveButton.width
@ -72,16 +87,7 @@ Item {
} }
Item { Item {
height: cancelButton.height Layout.fillHeight: true
width: cancelButton.width
Button {
id: cancelButton
text: "Cancel"
onClicked: {
stackView.pop();
}
}
} }
} }
} }