Fix Search Toolbar transition
authorLuciano Montanaro <mikelima@cirulla.net>
Tue, 10 Jul 2012 11:22:27 +0000 (13:22 +0200)
committerLuciano Montanaro <mikelima@cirulla.net>
Tue, 10 Jul 2012 11:22:27 +0000 (13:22 +0200)
application/resources/harmattan/qml/SearchBar.qml
application/resources/harmattan/qml/StationListPage.qml
application/resources/harmattan/qml/StationPage.qml

index ab49057..e10b17b 100644 (file)
@@ -2,22 +2,82 @@ import QtQuick 1.0
 import com.nokia.meego 1.0
 import "uiconstants.js" as UiConstants
 
-BorderImage {
+Image {
     id: root
     property alias text: searchField.text
+    property bool open: false
+
+    fillMode: Image.Tile
+    height: 0
     width: parent.width
-    border {
-        left: 10
-        right: 10
-        top: 10
-        bottom: 10
+    clip: true
+    ToolBarStyle {
+        id: style
+    }
+    BorderImage {
+        id: border
+        anchors {
+            bottom: root.bottom
+        }
+        width: root.width
+        height: UiConstants.SearchBarDefaultHeight
+        border {
+            left: 10
+            right: 10
+            top: 10
+            bottom: 10
+        }
+        source: style.background
+        TextField {
+            id: searchField
+            anchors {
+                fill: parent
+                leftMargin: UiConstants.DefaultMargin
+                topMargin: UiConstants.DefaultMargin
+                rightMargin: UiConstants.DefaultMargin
+                bottomMargin: UiConstants.DefaultMargin
+            }
+            height: implicitHeight
+            placeholderText: qsTr("Search")
+            inputMethodHints: Qt.ImhNoPredictiveText | Qt.ImhNoAutoUppercase
+            platformStyle: TextFieldStyle { paddingRight: clearButton.width }
+            onTextChanged: {
+                if (searchField.text.length === 0) {
+                    searchButton.visible = true
+                    clearButton.visible = false
+                } else {
+                    searchButton.visible = false
+                    clearButton.visible = true
+                }
+            }
+            Image {
+                id: searchButton
+                visible: true
+                smooth: true
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                source: "image://theme/icon-m-common-search"
+            }
+            Image {
+                id: clearButton
+                visible: false
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                source: "image://theme/icon-m-input-clear"
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        inputContext.reset()
+                        searchField.text = ""
+                    }
+                }
+            }
+        }
     }
-    height: 0
-    source: style.background
     states: [
         State {
-            name: "visible"
-            when: root.visible
+            name: "open"
+            when: root.open
             changes: [
                 PropertyChanges {
                     target: root
@@ -28,58 +88,10 @@ BorderImage {
     ]
     transitions: Transition {
         PropertyAnimation {
-            duration: 200
+            duration: style.visibilityTransitionDuration
             easing.type: Easing.OutBounce
             target: root
             properties: "height"
         }
     }
-
-    ToolBarStyle {
-        id: style
-    }
-    TextField {
-        id: searchField
-        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 }
-        onTextChanged: {
-            if (searchField.text.length === 0) {
-                searchButton.visible = true
-                clearButton.visible = false
-            } else {
-                searchButton.visible = false
-                clearButton.visible = true
-            }
-        }
-        Image {
-            id: searchButton
-            visible: true
-            smooth: true
-            anchors.right: parent.right
-            anchors.verticalCenter: parent.verticalCenter
-            source: "image://theme/icon-m-common-search"
-        }
-        Image {
-            id: clearButton
-            visible: false
-            anchors.right: parent.right
-            anchors.verticalCenter: parent.verticalCenter
-            source: "image://theme/icon-m-input-clear"
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    inputContext.reset()
-                    searchField.text = ""
-                }
-            }
-        }
-    }
 }
index bf96257..c6ebe1d 100644 (file)
@@ -10,7 +10,7 @@ Page {
     id: stationListPage
     tools: ToolBarLayout {
         id: toolBar
-        ToolIcon { iconId: "icon-m-toolbar-search"; onClicked: searchField.visible = !searchField.visible; }
+        ToolIcon { iconId: "icon-m-toolbar-search"; onClicked: searchField.open = !searchField.open; }
         ToolIcon { iconId: "icon-m-toolbar-view-menu"; onClicked: menu.open() }
     }
     Menu {
@@ -48,7 +48,7 @@ Page {
     SearchBar {
         id: searchField
         anchors.top: header.bottom
-        visible: false
+        open: false
     }
     Binding {
         target: stationListProxyModel
@@ -76,6 +76,7 @@ Page {
             id: stationListView
             clip: true
             width: parent.width
+            cacheBuffer: 10
             anchors {
                 top: shadow.top
                 bottom: parent.bottom
index 746a9a5..8ba29e4 100644 (file)
@@ -52,6 +52,7 @@ Page {
             clip: true
             visible: false
             width: parent.width
+            cacheBuffer: 10
             anchors {
                 top: shadow.top
                 bottom: parent.bottom