Fix photo positioning bug in flickr demo.

Task-number: QTBUG-3669

3 files changed, 87 insertions, 87 deletions

diff --git a/demos/declarative/flickr/flickr.qml b/demos/declarative/flickr/flickr.qml
index 48db476..152f9f9 100644
--- a/demos/declarative/flickr/flickr.qml
+++ b/demos/declarative/flickr/flickr.qml
@@ -57,21 +57,20 @@ Item {
 
         Item {
             id: views
-            x: 2; width: parent.width - 4
+            width: parent.width
             anchors.top: titleBar.bottom; anchors.bottom: toolBar.top
 
-            Mobile.GridDelegate { id: gridDelegate }
             GridView {
-                x: (width/4-79)/2; y: x
-                id: photoGridView; model: rssModel; delegate: gridDelegate; cacheBuffer: 100
-                cellWidth: (parent.width-2)/4; cellHeight: cellWidth; width: parent.width; height: parent.height - 1; z: 6
+                id: photoGridView; model: rssModel; delegate: Mobile.GridDelegate {}
+                cacheBuffer: 100
+                cellWidth: (parent.width-2)/4; cellHeight: cellWidth; width: parent.width; height: parent.height
             }
 
-            Mobile.ListDelegate { id: listDelegate }
             ListView {
-                id: photoListView; model: rssModel; delegate: listDelegate; z: 6
+                id: photoListView; model: rssModel; delegate: Mobile.ListDelegate { }
                 width: parent.width; height: parent.height; x: -(parent.width * 1.5); cacheBuffer: 100;
             }
+
             states: State {
                 name: "ListView"; when: screen.inListView == true
                 PropertyChanges { target: photoListView; x: 0 }
@@ -81,13 +80,16 @@ Item {
             transitions: Transition {
                 NumberAnimation { properties: "x"; duration: 500; easing.type: Easing.InOutQuad }
             }
+
+            Mobile.ImageDetails { id: imageDetails; width: parent.width; anchors.left: views.right; height: parent.height }
+
+            Item { id: foreground; anchors.fill: parent }
         }
 
-        Mobile.ImageDetails { id: imageDetails; width: parent.width; anchors.left: views.right; height: parent.height; z:1 }
-        Mobile.TitleBar { id: titleBar; z: 5; width: parent.width; height: 40; opacity: 0.9 }
+        Mobile.TitleBar { id: titleBar; width: parent.width; height: 40; opacity: 0.9 }
 
         Mobile.ToolBar {
-            id: toolBar; z: 5
+            id: toolBar
             height: 40; anchors.bottom: parent.bottom; width: parent.width; opacity: 0.9
             button1Label: "Update"; button2Label: "View mode"
             onButton1Clicked: rssModel.reload()
diff --git a/demos/declarative/flickr/mobile/GridDelegate.qml b/demos/declarative/flickr/mobile/GridDelegate.qml
index cbb00a2..c368e95 100644
--- a/demos/declarative/flickr/mobile/GridDelegate.qml
+++ b/demos/declarative/flickr/mobile/GridDelegate.qml
@@ -39,75 +39,73 @@
 **
 ****************************************************************************/
 
- import Qt 4.7
+import Qt 4.7
 
- Component {
-     id: photoDelegate
-     Item {
-         id: wrapper; width: 79; height: 79
+Item {
+    id: wrapper; width: GridView.view.cellWidth; height: GridView.view.cellHeight
 
-         function photoClicked() {
-             imageDetails.photoTitle = title;
-             imageDetails.photoTags = tags;
-             imageDetails.photoWidth = photoWidth;
-             imageDetails.photoHeight = photoHeight;
-             imageDetails.photoType = photoType;
-             imageDetails.photoAuthor = photoAuthor;
-             imageDetails.photoDate = photoDate;
-             imageDetails.photoUrl = url;
-             imageDetails.rating = 0;
-             scaleMe.state = "Details";
-         }
+    function photoClicked() {
+        imageDetails.photoTitle = title;
+        imageDetails.photoTags = tags;
+        imageDetails.photoWidth = photoWidth;
+        imageDetails.photoHeight = photoHeight;
+        imageDetails.photoType = photoType;
+        imageDetails.photoAuthor = photoAuthor;
+        imageDetails.photoDate = photoDate;
+        imageDetails.photoUrl = url;
+        imageDetails.rating = 0;
+        scaleMe.state = "Details";
+    }
 
-         Item {
-             anchors.centerIn: parent
-             scale: 0.0
-             Behavior on scale { NumberAnimation { easing.type: Easing.InOutQuad} }
-             id: scaleMe
+    Item {
+        anchors.centerIn: parent
+        scale: 0.0
+        Behavior on scale { NumberAnimation { easing.type: Easing.InOutQuad} }
+        id: scaleMe
 
-             Rectangle { height: 79; width: 79; id: blackRect;  anchors.centerIn: parent; color: "black"; smooth: true }
-             Rectangle {
-                 id: whiteRect; width: 77; height: 77; anchors.centerIn: parent; color: "#dddddd"; smooth: true
-                 Image { id: thumb; source: imagePath; x: 1; y: 1; smooth: true}
-                 Image { source: "images/gloss.png" }
-             }
+        Item {
+            width: 77; height: 77; anchors.centerIn: parent
+            Rectangle {
+                id: whiteRect; width: 77; height: 77; color: "#dddddd"; smooth: true
+                Image { id: thumb; source: imagePath; x: 1; y: 1; smooth: true }
+                Image { source: "images/gloss.png" }
+            }
+        }
 
-             Connections {
-                 target: toolBar
-                 onButton2Clicked: if (scaleMe.state == 'Details' ) scaleMe.state = 'Show'
-             }
+        Connections {
+            target: toolBar
+            onButton2Clicked: if (scaleMe.state == 'Details' ) scaleMe.state = 'Show'
+        }
+
+        states: [
+            State {
+                name: "Show"; when: thumb.status == Image.Ready
+                PropertyChanges { target: scaleMe; scale: 1 }
+            },
+            State {
+                name: "Details"
+                PropertyChanges { target: scaleMe; scale: 1 }
+                ParentChange { target: whiteRect; x: 10; y: 20; parent: imageDetails.frontContainer }
+                PropertyChanges { target: background; state: "DetailedView" }
+            }
+        ]
+        transitions: [
+            Transition {
+                from: "Show"; to: "Details"
+                ParentAnimation {
+                    via: foreground
+                    NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
+                }
+            },
+            Transition {
+                from: "Details"; to: "Show"
+                ParentAnimation {
+                    via: foreground
+                    NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
+                }
+            }
+        ]
+    }
+    MouseArea { anchors.fill: wrapper; onClicked: photoClicked() }
+}
 
-             states: [
-                 State {
-                     name: "Show"; when: thumb.status == Image.Ready
-                     PropertyChanges { target: scaleMe; scale: 1 }
-                 },
-                 State {
-                     name: "Details"
-                     PropertyChanges { target: scaleMe; scale: 1 }
-                     ParentChange { target: wrapper; parent: imageDetails.frontContainer }
-                     PropertyChanges { target: wrapper; x: 20; y: 60; z: 1000 }
-                     PropertyChanges { target: background; state: "DetailedView" }
-                 }
-             ]
-             transitions: [
-                 Transition {
-                     from: "Show"; to: "Details"
-                     ParentAnimation {
-                         NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
-                     }
-                 },
-                 Transition {
-                     from: "Details"; to: "Show"
-                     SequentialAnimation {
-                         ParentAnimation {
-                            NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
-                         }
-                         PropertyAction { targets: wrapper; properties: "z" }
-                     }
-                 }
-             ]
-         }
-         MouseArea { anchors.fill: wrapper; onClicked: { photoClicked() } }
-     }
- }
diff --git a/demos/declarative/flickr/mobile/ImageDetails.qml b/demos/declarative/flickr/mobile/ImageDetails.qml
index b1a7359..ff902ce 100644
--- a/demos/declarative/flickr/mobile/ImageDetails.qml
+++ b/demos/declarative/flickr/mobile/ImageDetails.qml
@@ -45,7 +45,7 @@ import "../common" as Common
 Flipable {
     id: container
 
-    property variant frontContainer: containerFront
+    property alias frontContainer: containerFront
     property string photoTitle: ""
     property string photoTags: ""
     property int photoWidth
@@ -76,17 +76,17 @@ Flipable {
         Column {
             spacing: 10
             anchors {
-                left: parent.left; leftMargin: 20
-                right: parent.right; rightMargin: 20
-                top: parent.top; topMargin: 180
+                left: parent.left; leftMargin: 10
+                right: parent.right; rightMargin: 10
+                top: parent.top; topMargin: 120
             }
-            Text { font.bold: true; color: "white"; elide: Text.ElideRight; text: container.photoTitle }
-            Text { color: "white"; elide: Text.ElideRight; text: "<b>Size:</b> " + container.photoWidth + 'x' + container.photoHeight }
-            Text { color: "white"; elide: Text.ElideRight; text: "<b>Type:</b> " + container.photoType }
-            Text { color: "white"; elide: Text.ElideRight; text: "<b>Author:</b> " + container.photoAuthor }
-            Text { color: "white"; elide: Text.ElideRight; text: "<b>Published:</b> " + container.photoDate }
-            Text { color: "white"; elide: Text.ElideRight; text: container.photoTags == "" ? "" : "<b>Tags:</b> " }
-            Text { color: "white"; elide: Text.ElideRight; text: container.photoTags }
+            Text { font.bold: true; color: "white"; elide: Text.ElideRight; text: container.photoTitle; width: parent.width }
+            Text { color: "white"; elide: Text.ElideRight; text: "Size: " + container.photoWidth + 'x' + container.photoHeight; width: parent.width }
+            Text { color: "white"; elide: Text.ElideRight; text: "Type: " + container.photoType; width: parent.width }
+            Text { color: "white"; elide: Text.ElideRight; text: "Author: " + container.photoAuthor; width: parent.width }
+            Text { color: "white"; elide: Text.ElideRight; text: "Published: " + container.photoDate; width: parent.width }
+            Text { color: "white"; elide: Text.ElideRight; text: container.photoTags == "" ? "" : "Tags: "; width: parent.width }
+            Text { color: "white"; elide: Text.ElideRight; text: container.photoTags; width: parent.width }
         }
     }