Animate the Search bar

Slide in and out the search bar when showing/hiding it.
Also simplified the layout.

diff --git a/application/resources/harmattan/qml/SearchBar.qml b/application/resources/harmattan/qml/SearchBar.qml
index 7850b10..ab49057 100644 (file)
--- a/application/resources/harmattan/qml/SearchBar.qml
+++ b/application/resources/harmattan/qml/SearchBar.qml
@@ -2,43 +2,51 @@ import QtQuick 1.0
 import com.nokia.meego 1.0
 import "uiconstants.js" as UiConstants
 
-
 BorderImage {
+    id: root
     property alias text: searchField.text
     width: parent.width
-    border.left: 10
-    border.right: 10
-    border.top: 10
-    border.bottom: 10
-    height:  visible ? UiConstants.SearchBarDefaultHeight : 0
+    border {
+        left: 10
+        right: 10
+        top: 10
+        bottom: 10
+    }
+    height: 0
     source: style.background
+    states: [
+        State {
+            name: "visible"
+            when: root.visible
+            changes: [
+                PropertyChanges {
+                    target: root
+                    height: UiConstants.SearchBarDefaultHeight
+                }
+            ]
+        }
+    ]
+    transitions: Transition {
+        PropertyAnimation {
+            duration: 200
+            easing.type: Easing.OutBounce
+            target: root
+            properties: "height"
+        }
+    }
 
     ToolBarStyle {
         id: style
     }
-    Item {
-        id: spacerTop
-        width: parent.width
-        height: UiConstants.DefaultMargin
-    }
-    Item {
-        id: spacerLeft
-        anchors.left: parent.left
-        width: UiConstants.DefaultMargin
-        height: searchField.height
-    }
-    Item {
-        id: spacerRight
-        anchors.right: parent.right
-        width: UiConstants.DefaultMargin
-        height: searchField.height
-    }
-
     TextField {
         id: searchField
-        anchors.top: spacerTop.bottom
-        anchors.left: spacerLeft.right
-        anchors.right: spacerRight.left
+        anchors {
+            fill: parent
+            leftMargin: UiConstants.DefaultMargin
+            rightMargin: UiConstants.DefaultMargin
+            topMargin: UiConstants.DefaultMargin
+            bottomMargin: UiConstants.DefaultMargin
+        }
         placeholderText: qsTr("Search")
         inputMethodHints: Qt.ImhNoPredictiveText | Qt.ImhNoAutoUppercase
         platformStyle: TextFieldStyle { paddingRight: clearButton.width }
@@ -74,10 +82,4 @@ BorderImage {
             }
         }
     }
-    Item {
-        id: spacerBottom
-        width: parent.width
-        anchors.top: searchField.bottom
-        height: UiConstants.DefaultMargins
-    }
 }