QML UI: add transition when switching to edit mode

The hard switch was not ideal. This isn't perfect, yet, but a step in
the right direction. The 'transitions' to change the visibility
properties are a bit odd, but that's how it's done in the examples as
well.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
This commit is contained in:
Dirk Hohndel 2017-10-04 21:53:40 -07:00
parent 2dd8a2ad7b
commit 3487612337
2 changed files with 47 additions and 2 deletions

View file

@ -79,7 +79,49 @@ Kirigami.Page {
}
}
}
]
transitions: [
Transition {
from: "view"
to: "*"
SequentialAnimation {
NumberAnimation {
target: detailsEditFlickable
properties: "visible"
from: 0
to: 1
duration: 10
}
ScaleAnimator {
target: detailsEditFlickable
from: 0.3
to: 1
duration: 400
easing.type: Easing.InOutQuad
}
}
},
Transition {
from: "*"
to: "view"
SequentialAnimation {
ScaleAnimator {
target: detailsEditFlickable
from: 1
to: 0.3
duration: 400
easing.type: Easing.InOutQuad
}
NumberAnimation {
target: detailsEditFlickable
properties: "visible"
from: 1
to: 0
duration: 10
}
}
}
]
property QtObject deleteAction: Kirigami.Action {
@ -236,11 +278,14 @@ Kirigami.Page {
}
Flickable {
id: detailsEditFlickable
visible: diveDetailsPage.state != "view" ? true : false
anchors.fill: parent
leftMargin: Kirigami.Units.smallSpacing
rightMargin: Kirigami.Units.smallSpacing
contentHeight: detailsEdit.height
// start invisible and scaled down, to get the transition
// off to the right start
visible: false
scale: 0.3
DiveDetailsEdit {
id: detailsEdit
}

View file

@ -39,6 +39,7 @@ Item {
property int visibility
function saveData() {
diveDetailsPage.state = "view" // run the transition
// apply the changes to the dive_table
manager.commitChanges(dive_id, detailsEdit.dateText, detailsEdit.locationText, detailsEdit.gpsText, detailsEdit.durationText,
detailsEdit.depthText, detailsEdit.airtempText, detailsEdit.watertempText, suitBox.text, buddyBox.text,
@ -66,7 +67,6 @@ Item {
diveDetailsListView.currentItem.modelData.notes = detailsEdit.notesText
diveDetailsListView.currentItem.modelData.rating = detailsEdit.rating
diveDetailsListView.currentItem.modelData.visibility = detailsEdit.visibility
diveDetailsPage.state = "view"
Qt.inputMethod.hide()
// now make sure we directly show the saved dive (this may be a new dive, or it may have moved)
showDiveIndex(newIdx)