Commit 5bed03ff authored by Alessandro Portale's avatar Alessandro Portale

QmlDesigner: Improve Section collapsing animation

Making the height animation work. Synchronizing height animation and
arrow rotation.

Removing the well meant fading, because gives the impression of a lag
rather than an intended animation.

Change-Id: I97924c715476df72ff903d38277730ca0e02e80d
Reviewed-by: default avatarTim Jenssen <tim.jenssen@theqtcompany.com>
parent 5db0ef19
......@@ -28,13 +28,14 @@ import QtQuick.Controls 1.1 as Controls
import QtQuick.Layouts 1.0
Item {
id: section
property alias caption: label.text
property int leftPadding: 8
property int topPadding: 4
property int rightPadding: 0
readonly property int animationDuration: 120
clip: true
Rectangle {
......@@ -55,12 +56,16 @@ Item {
}
Image {
id: arrow
source: "images/down-arrow.png"
rotation: section.state === "Collapsed" ? -90 : 0
anchors.left: parent.left
anchors.leftMargin: 4
anchors.verticalCenter: parent.verticalCenter
Behavior on rotation {NumberAnimation{duration: 80}}
Behavior on rotation {
NumberAnimation {
duration: animationDuration
}
}
}
color: "#444"
......@@ -104,10 +109,14 @@ Item {
anchors.top: header.bottom
anchors.topMargin: topPadding
id: row
Behavior on opacity { NumberAnimation{easing.type: Easing.Linear ; duration: 80} }
}
Behavior on height { NumberAnimation{easing.type: Easing.OutCubic ; duration: 140} }
Behavior on implicitHeight {
NumberAnimation {
easing.type: Easing.OutCubic
duration: animationDuration
}
}
states: [
State {
......@@ -117,11 +126,9 @@ Item {
implicitHeight: header.height
}
PropertyChanges {
target: row
opacity: 0
target: arrow
rotation: -90
}
}
]
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment