Allow qmlplaces example to show media if a place has them

Change-Id: I65b573d17d8bd2a0861ae41ac1f42d114955d0c1
Reviewed-on: http://codereview.qt.nokia.com/2403
Reviewed-by: Qt Sanity Bot <qt_sanity_bot@ovi.com>
Reviewed-by: Aaron McCarthy <aaron.mccarthy@nokia.com>
Reviewed-by: abcd <qt_abcd1@ovi.com>

2 files changed, 99 insertions, 21 deletions

diff --git a/examples/declarative/qmlplaces/SearchResultDelegate.qml b/examples/declarative/qmlplaces/SearchResultDelegate.qml
index 7b172df1..47cc3833 100644
--- a/examples/declarative/qmlplaces/SearchResultDelegate.qml
+++ b/examples/declarative/qmlplaces/SearchResultDelegate.qml
@@ -1,4 +1,4 @@
-import QtQuick 1.0
+import QtQuick 1.1
 import Qt.location 5.0
 
 Rectangle {
@@ -34,7 +34,8 @@ Rectangle {
         id: placeFields
         Item {
             focus:true
-            height: col.height + 10
+            height: col.height + mediaButton.height + 10
+            width:parent.width
             Column {
                 id: col
                 Text { text: '<b>Name: </b> ' + result.place.name; font.pixelSize: 16 }
@@ -55,6 +56,40 @@ Rectangle {
                 Text { id: paymentMethods; font.pixelSize: 16 }
             }
 
+            Rectangle {
+                id: mediaButton
+                anchors.top: col.bottom
+                height: (result.place.mediaModel.totalCount > 0) ? showMedia.height : 0
+
+                Text {
+                    id: showMedia
+                    text: (result.place.mediaModel.totalCount > 0) ? '<a href=\"dummy\">Show Media</a>':''
+                    onLinkActivated: {
+                        mediaDisplayLoader.sourceComponent = mediaDisplay
+                        mediaDisplayLoader.item.model = result.place.mediaModel
+                    }
+                }
+            }
+
+            MouseArea {
+                anchors.fill: col
+                onClicked: {
+                    if (textFields.item.state == 'place-core') {
+                        textFields.item.state = 'place-details'
+                        if (!result.place.detailsFetched)
+                            result.place.getDetails()
+                        } else if (textFields.item.state == 'place-details') {
+                        textFields.item.state = 'place-core'
+                    }
+                }
+
+                onPressAndHold: {
+                    placesList.model = recommendationModel
+                    recommendationModel.placeId = result.place.placeId
+                    recommendationModel.executeQuery()
+                }
+            }
+
             state: 'place-core'
             states: [
                 State {
@@ -84,28 +119,67 @@ Rectangle {
         }
     }
 
-    Loader {
-        id: textFields
-        sourceComponent: (result.type == SearchResult.Place) ? placeFields : didYouMeanField
-    }
+    Component {
+          id: mediaDisplay
+        Rectangle {
+            property alias model: mediaList.model
+            height: fullView.height
+            width: fullView.width
+            z: 1
+
+            ListView {
+                id: mediaList
+                anchors.top: parent.top
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.bottom: closeMediaButton.top
 
-    MouseArea {
-        anchors.fill: parent
-        onClicked: {
-            if (textFields.item.state == 'place-core') {
-                textFields.item.state = 'place-details'
-                if (!result.place.detailsFetched)
-                    result.place.getDetails()
-            } else if (textFields.item.state == 'place-details') {
-                textFields.item.state = 'place-core'
+                delegate: Component {
+                    Rectangle {
+                        height: mediaUrl.height
+                        width: parent.width
+                        radius:10
+                        border.color: 'black'
+
+                        Text { id: mediaUrl; text: media.url}
+
+                        gradient: Gradient {
+                            GradientStop { position: 0.0; color: 'lightblue' }
+                            GradientStop { position: 0.5; color: 'white'}
+                            GradientStop { position: 1.0; color: 'lightblue'}
+                        }
+                    }
+                }
             }
-        }
-        onPressAndHold: {
-            if (textFields.item.state != 'didYouMean') {
-                placesList.model = recommendationModel
-                recommendationModel.placeId = result.place.placeId
-                recommendationModel.executeQuery()
+            Rectangle {
+                id: closeMediaButton
+                height: mediaClose.height
+                width: parent.width
+                anchors.bottom: parent.bottom
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: 'red' }
+                    GradientStop { position: 0.5; color: 'white'}
+                    GradientStop { position: 1.0; color: 'red'}
+                }
+
+                Text {
+                    id: mediaClose;
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    text: 'Close';
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        mediaDisplayLoader.sourceComponent = undefined
+                    }
+                }
             }
         }
     }
+
+    Loader {
+        id: textFields
+        sourceComponent: (result.type == SearchResult.Place) ? placeFields : didYouMeanField
+    }
 }
diff --git a/examples/declarative/qmlplaces/qmlplaces.qml b/examples/declarative/qmlplaces/qmlplaces.qml
index b5a90290..d83be0d2 100644
--- a/examples/declarative/qmlplaces/qmlplaces.qml
+++ b/examples/declarative/qmlplaces/qmlplaces.qml
@@ -218,4 +218,8 @@ Rectangle {
         id: categoriesModel
         plugin: geoServices
     }
+
+    Loader {
+        id: mediaDisplayLoader;
+    }
 }