mobile UI: save changes to trip details

The logic when we show the save button is a little fragile (and visually I'm not
sure I love the disabled button), but hey, this works.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
This commit is contained in:
Dirk Hohndel 2020-02-22 14:07:46 -08:00
parent eaa1a5126b
commit 0683d97636
2 changed files with 65 additions and 2 deletions

View file

@ -288,6 +288,7 @@ Kirigami.ScrollablePage {
text: qsTr("Edit trip details") text: qsTr("Edit trip details")
visible: currentItem && currentItem.myData && currentItem.myData.isTrip visible: currentItem && currentItem.myData && currentItem.myData.isTrip
onTriggered: { onTriggered: {
tripEditWindow.tripId = currentItem.myData.tripId
tripEditWindow.tripLocation = currentItem.myData.tripLocation tripEditWindow.tripLocation = currentItem.myData.tripLocation
tripEditWindow.tripNotes = currentItem.myData.tripNotes tripEditWindow.tripNotes = currentItem.myData.tripNotes
pageStack.push(tripEditWindow) pageStack.push(tripEditWindow)

View file

@ -8,6 +8,7 @@ import org.kde.kirigami 2.4 as Kirigami
Kirigami.Page { Kirigami.Page {
id: tripEditPage id: tripEditPage
objectName: "TripDetails" objectName: "TripDetails"
property string tripId
property string tripLocation property string tripLocation
property string tripNotes property string tripNotes
@ -15,7 +16,60 @@ Kirigami.Page {
state: "view" state: "view"
padding: Kirigami.largeSpacing padding: Kirigami.largeSpacing
background: Rectangle { color: subsurfaceTheme.backgroundColor } background: Rectangle { color: subsurfaceTheme.backgroundColor }
width: rootItem.colWidth actions.main: saveAction
actions.right: cancelAction
onVisibleChanged: {
resetState()
}
onTripIdChanged: {
resetState()
}
function resetState() {
// make sure we have the right width and reset focus / state if there aren't any unsaved changes
width = parent.width
if (tripLocation === tripLocationField.text && tripNotes === tripNotesField.text) {
tripLocationField.focus = false
tripNotesField.focus = false
state = "view"
}
}
states: [
State {
name: "view"
PropertyChanges { target: saveAction; enabled: false }
},
State {
name: "edit"
PropertyChanges { target: saveAction; enabled: true }
}
]
property QtObject saveAction: Kirigami.Action {
icon {
name: subsurfaceTheme.iconStyle + "/document-save.svg"
color: enabled ? subsurfaceTheme.primaryColor : subsurfaceTheme.backgroundColor
}
text: enabled ? qsTr("Save edits") : ""
onTriggered: {
manager.appendTextToLog("Save trip details triggered")
manager.updateTripDetails(tripId, tripLocationField.text, tripNotesField.text)
}
}
property QtObject cancelAction: Kirigami.Action {
text: qsTr("Cancel edit")
icon {
name: ":/icons/dialog-cancel.svg"
}
onTriggered: {
manager.appendTextToLog("Cancel trip details edit")
state = "view"
pageStack.pop("TripDetails")
}
}
Flickable { Flickable {
id: tripEditFlickable id: tripEditFlickable
anchors.fill: parent anchors.fill: parent
@ -42,9 +96,13 @@ Kirigami.Page {
opacity: 0.6 opacity: 0.6
} }
SsrfTextField { SsrfTextField {
id: tripLocationField
Layout.fillWidth: true Layout.fillWidth: true
text: tripLocation text: tripLocation
flickable: tripEditFlickable flickable: tripEditFlickable
onFocusChanged: {
tripEditPage.state = "edit"
}
} }
TemplateLabel { TemplateLabel {
Layout.columnSpan: 2 Layout.columnSpan: 2
@ -52,14 +110,18 @@ Kirigami.Page {
opacity: 0.6 opacity: 0.6
} }
Controls.TextArea { Controls.TextArea {
id: tripNotesField
text: tripNotes text: tripNotes
textFormat: TextEdit.RichText textFormat: TextEdit.PlainText
Layout.columnSpan: 2 Layout.columnSpan: 2
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
Layout.minimumHeight: Kirigami.Units.gridUnit * 6 Layout.minimumHeight: Kirigami.Units.gridUnit * 6
selectByMouse: true selectByMouse: true
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
onActiveFocusChanged: {
tripEditPage.state = "edit"
}
} }
} }
} }