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>

1 files changed, 46 insertions, 1 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
 		}