diff options
| author |  Dirk Hohndel <dirk@hohndel.org> | 2017-10-04 21:53:40 -0700 |
|---|---|---|
| committer | Dirk Hohndel <dirk@hohndel.org> | 2017-10-05 08:21:55 -0700 |
| commit | 3487612337ef0308e3f2129a3193a0f65ac9691c (patch) | |
| tree | 8bcc2116ee981a99eb897ab8cbf2df6a8db81026 | |
| parent | 2dd8a2ad7bb5fbdd263fecd76c0108ad0c44eef0 (diff) | |
| download | subsurface-3487612337ef0308e3f2129a3193a0f65ac9691c.tar.gz | |
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>
| -rw-r--r-- | mobile-widgets/qml/DiveDetails.qml | 47 | ||||
| -rw-r--r-- | mobile-widgets/qml/DiveDetailsEdit.qml | 2 |
2 files changed, 47 insertions, 2 deletions
diff --git a/mobile-widgets/qml/DiveDetails.qml b/mobile-widgets/qml/DiveDetails.qml index c6243c531..b1357ef55 100644 --- a/mobile-widgets/qml/DiveDetails.qml +++ b/mobile-widgets/qml/DiveDetails.qml @@ -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 } diff --git a/mobile-widgets/qml/DiveDetailsEdit.qml b/mobile-widgets/qml/DiveDetailsEdit.qml index 143ebb8d2..25f4596af 100644 --- a/mobile-widgets/qml/DiveDetailsEdit.qml +++ b/mobile-widgets/qml/DiveDetailsEdit.qml @@ -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) |