Added animation for expanding/collapsing list items
authorSami Rämö <sami.ramo@ixonos.com>
Wed, 17 Nov 2010 09:48:46 +0000 (11:48 +0200)
committerSami Rämö <sami.ramo@ixonos.com>
Wed, 17 Nov 2010 09:48:46 +0000 (11:48 +0200)
src/qmlui/DelegateBase.qml
src/qmlui/DetailRow.qml
src/qmlui/ListBase.qml

index 6f47441..b3f4763 100644 (file)
@@ -113,7 +113,7 @@ Item {
         Transition {
             from: ""
             to: "expanded"
-//            NumberAnimation { properties: "height"; duration: 100 }
+            NumberAnimation { properties: "height"; duration: 150 }
             PropertyAction { target: primaryText; property: "wrapMode"; value: Text.Wrap }
             PropertyAction { target: primaryText; property: "elide"; value: Text.ElideNone }
             reversible: true
index a3706be..3d92bf6 100644 (file)
@@ -4,6 +4,8 @@ Item {
     property alias image: image.source
     property alias text: text.text
 
+    property int textSingleLineHeight: 0
+
     anchors.left: parent.left
     anchors.right: parent.right
     width: childrenRect.width
@@ -23,18 +25,31 @@ Item {
         clip: true;
         elide: Text.ElideRight
         state: parent.state
+        Behavior on height {
+            id: textHeightBehavior
+            NumberAnimation { duration: 150 }
+        }
     }
 
-    onHeightChanged: {}
+    Component.onCompleted: {
+        textSingleLineHeight = text.height
+    }
 
     states: [
         State {
             name: "expanded"
                 PropertyChanges {
                     target: text
-                    wrapMode: Text.Wrap
-                    elide: Text.ElideNone
+                    height: paintedHeight
                 }
+        },
+        State {
+            name: ""
+            PropertyChanges {
+                target: text
+                explicit: true
+                height: textSingleLineHeight
+            }
         }
     ]
 
@@ -42,7 +57,21 @@ Item {
         Transition {
             from: ""
             to: "expanded"
-//            NumberAnimation { target: text; properties: "height"; duration: 1000 }
+            SequentialAnimation {
+                PropertyAction { target: textHeightBehavior; property: "enabled"; value: true }
+                PropertyAction { target: text; property: "wrapMode"; value: Text.Wrap }
+                PropertyAction { target: text; property: "elide"; value: Text.ElideNone }
+            }
+        },
+        Transition {
+            from: "expanded"
+            to: ""
+            SequentialAnimation {
+                PropertyAction { target: textHeightBehavior; property: "enabled"; value: false }
+                NumberAnimation { target: text; properties: "height"; duration: 150 }
+                PropertyAction { target: text; property: "wrapMode"; value: Text.NoWrap }
+                PropertyAction { target: text; property: "elide"; value: Text.ElideRight }
+            }
         }
     ]
 }
index 10b8763..cc96105 100644 (file)
@@ -6,4 +6,5 @@ ListView {
     spacing: 5
     focus: true
     clip: true
+    highlightMoveDuration: 300
 }