diff options
| author |  Dirk Hohndel <dirk@hohndel.org> | 2018-04-14 17:39:13 -0700 |
|---|---|---|
| committer | Dirk Hohndel <dirk@hohndel.org> | 2018-04-14 17:39:40 -0700 |
| commit | a454b4fd1953930729d4391fd84353700b3fcd22 (patch) | |
| tree | 8fd448071b95de98bb5c1522c6bc802bd6d834de /mobile-widgets | |
| parent | 6a51c14365067fc45365c2a970d76749d9502a9d (diff) | |
| download | subsurface-a454b4fd1953930729d4391fd84353700b3fcd22.tar.gz | |
QML UI: animate trip folding
This looks much nicer.
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
Diffstat (limited to 'mobile-widgets')
| -rw-r--r-- | mobile-widgets/qml/DiveList.qml | 57 |
1 files changed, 55 insertions, 2 deletions
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") { |