From a454b4fd1953930729d4391fd84353700b3fcd22 Mon Sep 17 00:00:00 2001
From: Dirk Hohndel <dirk@hohndel.org>
Date: Sat, 14 Apr 2018 17:39:13 -0700
Subject: QML UI: animate trip folding

This looks much nicer.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
---
 mobile-widgets/qml/DiveList.qml | 57 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 55 insertions(+), 2 deletions(-)

(limited to 'mobile-widgets/qml')

diff --git a/mobile-widgets/qml/DiveList.qml b/mobile-widgets/qml/DiveList.qml
index 5ba0d0ea1..6a0e1ba7f 100644
--- a/mobile-widgets/qml/DiveList.qml
+++ b/mobile-widgets/qml/DiveList.qml
@@ -49,14 +49,67 @@ Kirigami.ScrollablePage {
 			supportsMouseEvents: true
 			checked: diveListView.currentIndex === model.index
 			width: parent.width
-			height: dive.tripMeta === activeTrip ?  diveListEntry.height + Kirigami.Units.smallSpacing : 0
-			visible: dive.tripMeta === activeTrip
+			height: 0
+			visible: false
 			backgroundColor: checked ? subsurfaceTheme.primaryColor : subsurfaceTheme.backgroundColor
 			activeBackgroundColor: subsurfaceTheme.primaryColor
 			textColor: checked ? subsurfaceTheme.primaryTextColor : subsurfaceTheme.textColor
 
 			property real detailsOpacity : 0
 
+			states: [
+				State {
+					name: "isHidden";
+					when: dive.tripMeta !== activeTrip
+					PropertyChanges {
+						target: innerListItem
+						height: 0
+						visible: false
+					}
+				},
+				State {
+					name: "isVisible";
+					when: dive.tripMeta === activeTrip
+					PropertyChanges {
+						target: innerListItem
+						height: diveListEntry.height + Kirigami.Units.smallSpacing
+						visible: true
+					}
+				}
+			]
+			transitions: [
+				Transition {
+					from: "isHidden"
+					to: "isVisible"
+					SequentialAnimation {
+						NumberAnimation {
+							property: "visible"
+							duration: 1
+						}
+						NumberAnimation {
+							property: "height"
+							duration: 200 + 20 * dive.tripNrDives
+							easing.type: Easing.InOutQuad
+						}
+					}
+				},
+				Transition {
+					from: "isVisible"
+					to: "isHidden"
+					SequentialAnimation {
+						NumberAnimation {
+							property: "height"
+							duration: 200 + 20 * dive.tripNrDives
+							easing.type: Easing.InOutQuad
+						}
+						NumberAnimation {
+							property: "visible"
+							duration: 1
+						}
+					}
+				}
+			]
+
 			// When clicked, the mode changes to details view
 			onClicked: {
 				if (detailsWindow.state === "view") {
-- 
cgit v1.2.3-70-g09d2