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: Tim Jenssen <tim.jenssen@theqtcompany.com>

1 files changed, 16 insertions, 9 deletions

diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/Section.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/Section.qml
index 4084e4f12e..f9f10577f1 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/Section.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/Section.qml
@@ -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
             }
         }
     ]
-
 }