From 3487612337ef0308e3f2129a3193a0f65ac9691c Mon Sep 17 00:00:00 2001 From: Dirk Hohndel Date: Wed, 4 Oct 2017 21:53:40 -0700 Subject: 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 --- mobile-widgets/qml/DiveDetails.qml | 47 +++++++++++++++++++++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) (limited to 'mobile-widgets/qml/DiveDetails.qml') 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 } -- cgit v1.2.3-70-g09d2