Modify search result tab behaviour.

The commit changes the behaviour of the search result tab in the
following ways:

* Moves the search tab handle to the top of the window just below the
  search box.  Search result tab expands down instead of out from the
  left.
* The search search result tab handle is now hidden when no search
  results are available.
* Uses the full area between the search box and the menu for the
  expanded search results tab.

Change-Id: Ib2ad0dccc25dd49d14531e51b0447119f570ec78
Reviewed-by: abcd <amos.choy@nokia.com>

2 files changed, 30 insertions, 11 deletions

diff --git a/examples/declarative/places/content/places/SearchBox.qml b/examples/declarative/places/content/places/SearchBox.qml
index 2ca109ca..e9545441 100644
--- a/examples/declarative/places/content/places/SearchBox.qml
+++ b/examples/declarative/places/content/places/SearchBox.qml
@@ -46,10 +46,11 @@ Rectangle {
     id: searchRectangle
 
     property bool suggestionsEnabled: true
+    readonly property int baseHeight: searchBox.height + 20
 
     color: "#ECECEC"
 
-    height: searchBox.height + 20
+    height: baseHeight
     Behavior on height {
         NumberAnimation { duration: 250 }
     }
diff --git a/examples/declarative/places/places.qml b/examples/declarative/places/places.qml
index a75aa9aa..e42ce52b 100644
--- a/examples/declarative/places/places.qml
+++ b/examples/declarative/places/places.qml
@@ -458,31 +458,38 @@ Item {
         id: searchResultTab
 
         z: backgroundRect.z + 2
-        height: parent.height - 180
+        height: parent.height - searchBox.baseHeight - mainMenu.height
         width: parent.width
-        x: -5 - searchResultTabPage.width
-        y: 60
+        x: 0
+        y: mainMenu.height - height + catchImage.width
 
-        Behavior on x { PropertyAnimation { duration: 300; easing.type: Easing.InOutQuad } }
+        opacity: 0
+
+        property bool open: false
+
+        Behavior on y { PropertyAnimation { duration: 300; easing.type: Easing.InOutQuad } }
+        Behavior on opacity { PropertyAnimation { duration: 300 } }
 
         Image {
             id: catchImage
 
             source: "resources/catch.png"
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.right: parent.right
+            rotation: 90
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: (width - height) / 2
 
             MouseArea {
                 anchors.fill: parent
-                onClicked: searchResultTab.state = (searchResultTab.state === "") ? "Open" : ""
+                onClicked: searchResultTab.open = !searchResultTab.open;
             }
         }
 
         Rectangle {
             id: searchResultTabPage
 
-            width: parent.width - catchImage.width
-            height: parent.height
+            width: parent.width
+            height: parent.height - catchImage.width
             color: "#ECECEC"
             radius: 5
 
@@ -496,8 +503,19 @@ Item {
 
         states: [
             State {
+                name: ""
+                when: placeSearchModel.count == 0 && recommendationModel.count == 0
+                PropertyChanges { target: searchResultTab; open: false }
+            },
+            State {
+                name: "Close"
+                when: (placeSearchModel.count > 0 || recommendationModel.count > 0) && !searchResultTab.open
+                PropertyChanges { target: searchResultTab; opacity: 1 }
+            },
+            State {
                 name: "Open"
-                PropertyChanges { target: searchResultTab; x: 0 }
+                when: (placeSearchModel.count > 0 || recommendationModel.count > 0) && searchResultTab.open
+                PropertyChanges { target: searchResultTab; y: mainMenu.height; opacity: 1 }
             }
         ]
     }