37 files changed, 313 insertions, 291 deletions
diff --git a/demos/declarative/flickr/content/ImageDetails.qml b/demos/declarative/flickr/common/ImageDetails.qml
index 8098273..8098273 100644
--- a/demos/declarative/flickr/content/ImageDetails.qml
+++ b/demos/declarative/flickr/common/ImageDetails.qml
diff --git a/demos/declarative/flickr/content/LikeOMeter.qml b/demos/declarative/flickr/common/LikeOMeter.qml
index 754dbb1..754dbb1 100644
--- a/demos/declarative/flickr/content/LikeOMeter.qml
+++ b/demos/declarative/flickr/common/LikeOMeter.qml
diff --git a/demos/declarative/flickr/content/Loading.qml b/demos/declarative/flickr/common/Loading.qml
index ff2c829..ff2c829 100644
--- a/demos/declarative/flickr/content/Loading.qml
+++ b/demos/declarative/flickr/common/Loading.qml
diff --git a/demos/declarative/flickr/content/MediaButton.qml b/demos/declarative/flickr/common/MediaButton.qml
index 0ffd596..0ffd596 100644
--- a/demos/declarative/flickr/content/MediaButton.qml
+++ b/demos/declarative/flickr/common/MediaButton.qml
diff --git a/demos/declarative/flickr/content/MediaLineEdit.qml b/demos/declarative/flickr/common/MediaLineEdit.qml
index 500a402..500a402 100644
--- a/demos/declarative/flickr/content/MediaLineEdit.qml
+++ b/demos/declarative/flickr/common/MediaLineEdit.qml
diff --git a/demos/declarative/flickr/content/Progress.qml b/demos/declarative/flickr/common/Progress.qml
index 00ef901..00ef901 100644
--- a/demos/declarative/flickr/content/Progress.qml
+++ b/demos/declarative/flickr/common/Progress.qml
diff --git a/demos/declarative/flickr/content/ScrollBar.qml b/demos/declarative/flickr/common/ScrollBar.qml
index 89d51e2..89d51e2 100644
--- a/demos/declarative/flickr/content/ScrollBar.qml
+++ b/demos/declarative/flickr/common/ScrollBar.qml
diff --git a/demos/declarative/flickr/content/Slider.qml b/demos/declarative/flickr/common/Slider.qml
index b88636d..b88636d 100644
--- a/demos/declarative/flickr/content/Slider.qml
+++ b/demos/declarative/flickr/common/Slider.qml
diff --git a/demos/declarative/flickr/content/Star.qml b/demos/declarative/flickr/common/Star.qml
index 006e86ad..006e86ad 100644
--- a/demos/declarative/flickr/content/Star.qml
+++ b/demos/declarative/flickr/common/Star.qml
diff --git a/demos/declarative/flickr/content/pics/background.png b/demos/declarative/flickr/common/pics/background.png
index 5b37072..5b37072 100644
--- a/demos/declarative/flickr/content/pics/background.png
+++ b/demos/declarative/flickr/common/pics/background.png
diff --git a/demos/declarative/flickr/content/pics/button-pressed.png b/demos/declarative/flickr/common/pics/button-pressed.png
index e434d32..e434d32 100644
--- a/demos/declarative/flickr/content/pics/button-pressed.png
+++ b/demos/declarative/flickr/common/pics/button-pressed.png
diff --git a/demos/declarative/flickr/content/pics/button-pressed.sci b/demos/declarative/flickr/common/pics/button-pressed.sci
index d3b16e2..d3b16e2 100644
--- a/demos/declarative/flickr/content/pics/button-pressed.sci
+++ b/demos/declarative/flickr/common/pics/button-pressed.sci
diff --git a/demos/declarative/flickr/content/pics/button.png b/demos/declarative/flickr/common/pics/button.png
index 56a63ce..56a63ce 100644
--- a/demos/declarative/flickr/content/pics/button.png
+++ b/demos/declarative/flickr/common/pics/button.png
diff --git a/demos/declarative/flickr/content/pics/button.sci b/demos/declarative/flickr/common/pics/button.sci
index d3b16e2..d3b16e2 100644
--- a/demos/declarative/flickr/content/pics/button.sci
+++ b/demos/declarative/flickr/common/pics/button.sci
diff --git a/demos/declarative/flickr/content/pics/ghns_star.png b/demos/declarative/flickr/common/pics/ghns_star.png
index 4ad43cc..4ad43cc 100644
--- a/demos/declarative/flickr/content/pics/ghns_star.png
+++ b/demos/declarative/flickr/common/pics/ghns_star.png
diff --git a/demos/declarative/flickr/content/pics/loading.png b/demos/declarative/flickr/common/pics/loading.png
index 47a1589..47a1589 100644
--- a/demos/declarative/flickr/content/pics/loading.png
+++ b/demos/declarative/flickr/common/pics/loading.png
diff --git a/demos/declarative/flickr/content/pics/reflection.png b/demos/declarative/flickr/common/pics/reflection.png
index c143a48..c143a48 100644
--- a/demos/declarative/flickr/content/pics/reflection.png
+++ b/demos/declarative/flickr/common/pics/reflection.png
diff --git a/demos/declarative/flickr/content/pics/shadow-bottom.png b/demos/declarative/flickr/common/pics/shadow-bottom.png
index 523f6e7..523f6e7 100644
--- a/demos/declarative/flickr/content/pics/shadow-bottom.png
+++ b/demos/declarative/flickr/common/pics/shadow-bottom.png
diff --git a/demos/declarative/flickr/content/pics/shadow-corner.png b/demos/declarative/flickr/common/pics/shadow-corner.png
index ef8c856..ef8c856 100644
--- a/demos/declarative/flickr/content/pics/shadow-corner.png
+++ b/demos/declarative/flickr/common/pics/shadow-corner.png
diff --git a/demos/declarative/flickr/content/pics/shadow-right-screen.png b/demos/declarative/flickr/common/pics/shadow-right-screen.png
index 9856c4f..9856c4f 100644
--- a/demos/declarative/flickr/content/pics/shadow-right-screen.png
+++ b/demos/declarative/flickr/common/pics/shadow-right-screen.png
diff --git a/demos/declarative/flickr/content/pics/shadow-right.png b/demos/declarative/flickr/common/pics/shadow-right.png
index f534a35..f534a35 100644
--- a/demos/declarative/flickr/content/pics/shadow-right.png
+++ b/demos/declarative/flickr/common/pics/shadow-right.png
diff --git a/demos/declarative/flickr/flickr.qml b/demos/declarative/flickr/flickr-desktop.qml
index d8a27d5..5effc42 100644
--- a/demos/declarative/flickr/flickr.qml
+++ b/demos/declarative/flickr/flickr-desktop.qml
@@ -1,6 +1,6 @@
 import Qt 4.6
 
-import "content"
+import "common"
 
 Item {
     id: MainWindow; width: 800; height: 450
@@ -8,25 +8,6 @@ Item {
     property bool showPathView : false
 
     resources: [
-        XmlListModel {
-            id: FeedModel
-            property string tags : TagsEdit.text
-            source: "http://api.flickr.com/services/feeds/photos_public.gne?"+(tags ? "tags="+tags+"&" : "")+"format=rss2"
-            query: "/rss/channel/item"
-            namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";"
-
-            XmlRole { name: "title"; query: "title/string()" }
-            XmlRole { name: "imagePath"; query: "media:thumbnail/@url/string()" }
-            XmlRole { name: "url"; query: "media:content/@url/string()" }
-            XmlRole { name: "description"; query: "description/string()" }
-            XmlRole { name: "tags"; query: "media:category/string()" }
-            XmlRole { name: "photoWidth"; query: "media:content/@width/string()" }
-            XmlRole { name: "photoHeight"; query: "media:content/@height/string()" }
-            XmlRole { name: "photoType"; query: "media:content/@type/string()" }
-            XmlRole { name: "photoAuthor"; query: "author/string()" }
-            XmlRole { name: "photoDate"; query: "pubDate/string()" }
-        },
-
         Component {
         id: PhotoDelegate
         Item {
@@ -72,9 +53,9 @@ Item {
 
                 Item {
                     id: Shadows
-                    Image { source: "content/pics/shadow-right.png"; x: WhiteRect.width; height: WhiteRect.height }
-                    Image { source: "content/pics/shadow-bottom.png"; y: WhiteRect.height; width: WhiteRect.width }
-                    Image { id: Corner; source: "content/pics/shadow-corner.png"; x: WhiteRect.width; y: WhiteRect.height }
+                    Image { source: "common/pics/shadow-right.png"; x: WhiteRect.width; height: WhiteRect.height }
+                    Image { source: "common/pics/shadow-bottom.png"; y: WhiteRect.height; width: WhiteRect.width }
+                    Image { id: Corner; source: "common/pics/shadow-corner.png"; x: WhiteRect.width; y: WhiteRect.height }
                 }
             }
 
@@ -123,17 +104,17 @@ Item {
 
         anchors.fill: parent
 
-        Image { source: "content/pics/background.png"; anchors.fill: parent }
-
-        Loading { anchors.centerIn: parent; visible: FeedModel.status }
+        Image { source: "common/pics/background.png"; anchors.fill: parent }
+        RssModel { id: RssModel; tags : TagsEdit.text }
+        Loading { anchors.centerIn: parent; visible: RssModel.status }
 
         GridView {
-            id: PhotoGridView; model: FeedModel; delegate: PhotoDelegate; cacheBuffer: 100
+            id: PhotoGridView; model: RssModel; delegate: PhotoDelegate; cacheBuffer: 100
             cellWidth: 105; cellHeight: 105; x:32; y: 80; width: 800; height: 330; z: 1
         }
 
         PathView {
-            id: PhotoPathView; model: FeedModel; delegate: PhotoDelegate
+            id: PhotoPathView; model: RssModel; delegate: PhotoDelegate
             y: -380; width: 800; height: 330; pathItemCount: 10; z: 1
             path: Path {
                 startX: -50; startY: 40;
@@ -175,7 +156,7 @@ Item {
             text: "Update"
             anchors.right: ViewModeButton.left; anchors.rightMargin: 5
             anchors.top: ViewModeButton.top
-            onClicked: { FeedModel.reload(); }
+            onClicked: { RssModel.reload(); }
         }
 
         MediaLineEdit {
@@ -205,7 +186,7 @@ Item {
     Text {
         id: CategoryText;  anchors.horizontalCenter: parent.horizontalCenter; y: 15;
         text: "Flickr - " +
-            (FeedModel.tags=="" ? "Uploads from everyone" : "Recent Uploads tagged " + FeedModel.tags)
+            (RssModel.tags=="" ? "Uploads from everyone" : "Recent Uploads tagged " + RssModel.tags)
         font.pointSize: 20; font.bold: true; color: "white"; style: "Raised"; styleColor: "black"
     }
 }
diff --git a/demos/declarative/flickr/flickr-mobile.qml b/demos/declarative/flickr/flickr-mobile.qml
new file mode 100644
index 0000000..a4692a3
--- /dev/null
+++ b/demos/declarative/flickr/flickr-mobile.qml
@@ -0,0 +1,51 @@
+import Qt 4.6
+import "common" as Common
+import "mobile" as Mobile
+
+Item {
+    id: Screen; width: 320; height: 480
+    property bool inListView : false
+
+    Rectangle {
+        id: Background
+        anchors.fill: parent; color: "#343434";
+
+        Image { source: "mobile/images/stripes.png"; fillMode: "Tile"; anchors.fill: parent; opacity: 0.3 }
+
+        Common.RssModel { id: RssModel }
+        Common.Loading { anchors.centerIn: parent; visible: RssModel.status }
+
+        Item {
+            id: Views
+            x: 2; width: parent.width - 4
+            anchors.top: TitleBar.bottom; anchors.bottom: ToolBar.top
+
+            Mobile.GridDelegate { id: GridDelegate }
+            GridView {
+                id: PhotoGridView; model: RssModel; delegate: GridDelegate; cacheBuffer: 100
+                cellWidth: 79; cellHeight: 79; width: parent.width; height: parent.height - 1
+            }
+
+            Mobile.ListDelegate { id: ListDelegate }
+            ListView {
+                id: PhotoListView; model: RssModel; delegate: ListDelegate
+                width: parent.width; height: parent.height; x: -(parent.width * 1.5); cacheBuffer: 100;
+            }
+        }
+
+        Common.ImageDetails { id: ImageDetails; width: parent.width; x: parent.width; height: parent.height }
+        Mobile.TitleBar { id: TitleBar; width: parent.width; height: 40; opacity: 0.9 }
+        Mobile.ToolBar { id: ToolBar; height: 40; anchors.bottom: parent.bottom; width: parent.width; opacity: 0.9 }
+
+        states: [
+            State {
+                name: "ListView"; when: Screen.inListView == true
+                PropertyChanges { target: PhotoListView; x: 0 }
+                PropertyChanges { target: PhotoGridView; x: -(parent.width * 1.5) }
+            }
+        ]
+        transitions: [
+            Transition { NumberAnimation { properties: "x"; duration: 500; easing: "easeInOutQuad" } }
+        ]
+    }
+}
diff --git a/demos/declarative/flickr/flickr2.qml b/demos/declarative/flickr/flickr2.qml
deleted file mode 100644
index d9b1f60..0000000
--- a/demos/declarative/flickr/flickr2.qml
+++ /dev/null
@@ -1,261 +0,0 @@
-import Qt 4.6
-
-import "content"
-
-Item {
-    id: MainWindow; width: 800; height: 450
-
-    property bool showPathView : false
-
-        VisualModel {
-            id: MyVisualModel
-            model:
-                XmlListModel {
-                    id: FeedModel
-                    property string tags : TagsEdit.text
-                    source: "http://api.flickr.com/services/feeds/photos_public.gne?"+(tags ? "tags="+tags+"&" : "")+"format=rss2"
-                    query: "/rss/channel/item"
-                    namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";"
-
-                    XmlRole { name: "title"; query: "title/string()" }
-                    XmlRole { name: "imagePath"; query: "media:thumbnail/@url/string()" }
-                    XmlRole { name: "url"; query: "media:content/@url/string()" }
-                    XmlRole { name: "description"; query: "description/string()" }
-                    XmlRole { name: "tags"; query: "media:category/string()" }
-                    XmlRole { name: "photoWidth"; query: "media:content/@width/string()" }
-                    XmlRole { name: "photoHeight"; query: "media:content/@height/string()" }
-                    XmlRole { name: "photoType"; query: "media:content/@type/string()" }
-                    XmlRole { name: "photoAuthor"; query: "author/string()" }
-                    XmlRole { name: "photoDate"; query: "pubDate/string()" }
-                }
-
-            delegate: Package {
-                Item {
-                    id: Wrapper; width: 85; height: 85; scale: {1.0}
-                    z: PathViewPackage.PathView.z
-                    property real angle: 0 * 0
-
-                    transform: [
-                        Rotation {
-                            id: Rotation; origin.x: 30; axis.x: 30; axis.y: 60; axis.z: 0
-                            angle: Wrapper.angle
-                        }
-                    ]
-
-                    Connection {
-                        sender: Background.imageDetails; signal: "closed()"
-                        script: { if (Wrapper.state == 'Details') Wrapper.state = '' }
-                    }
-
-                    Script {
-                        function photoClicked() {
-                            Background.imageDetails.photoTitle = title;
-                            Background.imageDetails.photoDescription = description;
-                            Background.imageDetails.photoTags = tags;
-                            Background.imageDetails.photoWidth = photoWidth;
-                            Background.imageDetails.photoHeight = photoHeight;
-                            Background.imageDetails.photoType = photoType;
-                            Background.imageDetails.photoAuthor = photoAuthor;
-                            Background.imageDetails.photoDate = photoDate;
-                            Background.imageDetails.photoUrl = url;
-                            Background.imageDetails.rating = 0;
-                            Wrapper.state = "Details";
-                        }
-                    }
-
-                    Rectangle {
-                        id: WhiteRect; anchors.fill: parent; color: "white"; radius: 5
-
-                        Loading { x: 26; y: 26; visible: Thumb.status!=1 }
-                        Image { id: Thumb; source: imagePath; x: 5; y: 5 }
-
-                        Item {
-                            id: Shadows
-                            Image { source: "content/pics/shadow-right.png"; x: WhiteRect.width; height: WhiteRect.height }
-                            Image { source: "content/pics/shadow-bottom.png"; y: WhiteRect.height; width: WhiteRect.width }
-                            Image { id: Corner; source: "content/pics/shadow-corner.png"; x: WhiteRect.width; y: WhiteRect.height }
-                        }
-                    }
-
-                    MouseRegion { anchors.fill: Wrapper; onClicked: { photoClicked() } }
-
-                    states: [
-                        State {
-                            name: "Details"
-                            PropertyChanges { target: Background.imageDetails; z: 2 }
-                            ParentChange { target: Wrapper; parent: Background.imageDetails.frontContainer }
-                            PropertyChanges { target: Wrapper; x: 45; y: 35; scale: 1; z: 1000 }
-                            PropertyChanges { target: Rotation; angle: 0 }
-                            PropertyChanges { target: Shadows; opacity: 0 }
-                            PropertyChanges { target: Background.imageDetails; y: 20 }
-                            PropertyChanges { target: PhotoGridView; y: "-480" }
-                            PropertyChanges { target: PhotoPathView; y: "-480" }
-                            PropertyChanges { target: ViewModeButton; opacity: 0 }
-                            PropertyChanges { target: TagsEdit; opacity: 0 }
-                            PropertyChanges { target: FetchButton; opacity: 0 }
-                            PropertyChanges { target: CategoryText; y: "-50" }
-                        }
-                    ]
-
-                    transitions: [
-                        Transition {
-                            from: "*"; to: "Details"
-                            ParentAction { }
-                            NumberAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing: "easeInOutQuad" }
-                        },
-                        Transition {
-                            from: "Details"; to: "*"
-                            SequentialAnimation {
-                                ParentAction { }
-                                NumberAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing: "easeInOutQuad" }
-                                PropertyAction { target: Wrapper; properties: "z" }
-                            }
-                        }
-                    ]
-                }
-
-                Item {
-                    Package.name: "pathView"
-                    id: PathViewPackage; width: 85; height: 85
-                }
-
-                Item {
-                    Package.name: "gridView"
-                    id: GridViewPackage; width: 85; height: 85
-                }
-
-                Item {
-                    id: MyItem
-                    state: MainWindow.showPathView ? "pathView" : "gridView"
-                    states: [
-                        State {
-                            name: "gridView"
-                            PropertyChanges { target: Wrapper; explicit: true; property: "moveToParent"; value: GridViewPackage }
-                        },
-                        State {
-                            name: "pathView"
-                            PropertyChanges { target: Wrapper; scale: PathViewPackage.PathView.scale; angle: PathViewPackage.PathView.angle; }
-                            PropertyChanges { target: Wrapper; explicit: true; moveToParent: PathViewPackage }
-                        }
-                    ]
-                    transitions: [
-                        Transition {
-                            to: "pathView"
-                            SequentialAnimation {
-                                PropertyAction { target: Wrapper; property: "moveToParent" }
-                                ParallelAnimation {
-                                    NumberAnimation {
-                                        target: Wrapper
-                                        properties: "x,y"
-                                        to: 0
-                                        easing: "easeOutQuad"
-                                        duration: 350
-                                    }
-                                    NumberAnimation { target: Wrapper; properties: "scale,angle"; duration: 350 }
-                                }
-                            }
-                        },
-                        Transition {
-                            to: "gridView"
-                            SequentialAnimation {
-                                PauseAnimation { duration: Math.floor(index/7)*100 }
-                                PropertyAction { target: Wrapper; property: "moveToParent" }
-                                ParallelAnimation {
-                                    NumberAnimation {
-                                        target: Wrapper
-                                        properties: "x,y"
-                                        to: 0
-                                        easing: "easeOutQuad"
-                                        duration: 250
-                                    }
-                                    NumberAnimation { target: Wrapper; properties: "scale,angle"; duration: 250 }
-                                }
-                            }
-                        }
-                    ]
-                }
-            }
-        }
-
-
-    Item {
-        id: Background
-        property var imageDetails: ImageDetails
-
-        Image { source: "content/pics/background.png" }
-
-        GridView {
-            id: PhotoGridView; model: MyVisualModel.parts.gridView
-            cellWidth: 105; cellHeight: 105; x:32; y: 80; width: 800; height: 330; z: 1
-            cacheBuffer: 100
-        }
-
-        PathView {
-            id: PhotoPathView; model: MyVisualModel.parts.pathView
-            y: 80; width: 800; height: 330; z: 1
-            pathItemCount: 10; snapPosition: 0.001
-            path: Path {
-                startX: -150; startY: 40;
-
-                PathAttribute { name: "scale"; value: 0.9 }
-                PathAttribute { name: "angle"; value: -45 }
-                PathPercent { value: 0 }
-                PathLine { x: -50; y: 40 }
-
-                PathPercent { value: 0.001 }
-
-                PathCubic {
-                    x: 400; y: 220
-                    control1X: 140; control1Y: 40
-                    control2X: 210; control2Y: 220
-                }
-
-                PathAttribute { name: "scale"; value: 1.2  }
-                PathAttribute { name: "z"; value: 1 }
-                PathAttribute { name: "angle"; value: 0 }
-
-                PathCubic {
-                    x: 850; y: 40
-                    control2X: 660; control2Y: 40
-                    control1X: 590; control1Y: 220
-                }
-
-                PathPercent { value: 0.999 }
-                PathLine { x: 950; y: 40 }
-                PathPercent { value: 1.0 }
-                PathAttribute { name: "scale"; value: 0.9 }
-                PathAttribute { name: "angle"; value: 45 }
-            }
-        }
-
-        ImageDetails { id: ImageDetails; width: 750; x: 25; y: 500; height: 410 }
-
-        MediaButton {
-            id: ViewModeButton; x: 680; y: 410; text: "View Mode"
-            onClicked: { if (MainWindow.showPathView == true) MainWindow.showPathView = false; else MainWindow.showPathView = true }
-        }
-
-        MediaButton {
-            id: FetchButton
-            text: "Update"
-            anchors.right: ViewModeButton.left; anchors.rightMargin: 5
-            anchors.top: ViewModeButton.top
-            onClicked: { FeedModel.reload(); }
-        }
-
-        MediaLineEdit {
-            id: TagsEdit;
-            label: "Tags"
-            anchors.right: FetchButton.left; anchors.rightMargin: 5
-            anchors.top: ViewModeButton.top
-        }
-
-    }
-
-    Text {
-        id: CategoryText;  anchors.horizontalCenter: parent.horizontalCenter; y: 15;
-        text: "Flickr - " +
-            (FeedModel.tags=="" ? "Uploads from everyone" : "Recent Uploads tagged " + FeedModel.tags)
-        font.pointSize: 16; font.bold: true; color: "white"; style: "Raised"; styleColor: "black"
-    }
-}
diff --git a/demos/declarative/flickr/mobile/Button.qml b/demos/declarative/flickr/mobile/Button.qml
new file mode 100644
index 0000000..275408c
--- /dev/null
+++ b/demos/declarative/flickr/mobile/Button.qml
@@ -0,0 +1,41 @@
+import Qt 4.6
+
+Item {
+    id: Container
+
+    signal clicked
+
+    property string text
+
+    BorderImage {
+        id: Image
+        source: "images/toolbutton2.sci"
+        width: Container.width; height: Container.height
+    }
+    BorderImage {
+        id: Pressed
+        opacity: 0
+        source: "images/toolbutton2.sci"
+        width: Container.width; height: Container.height
+    }
+    MouseRegion {
+        id: MouseRegion
+        anchors.fill: Image
+        onClicked: { Container.clicked(); }
+    }
+    Text {
+        color: "white"
+        anchors.centerIn: Image; font.bold: true
+        text: Container.text; style: "Raised"; styleColor: "black"
+    }
+    states: [
+        State {
+            name: "Pressed"
+            when: MouseRegion.pressed == true
+            PropertyChanges {
+                target: Pressed
+                opacity: 1
+            }
+        }
+    ]
+}
diff --git a/demos/declarative/flickr/mobile/GridDelegate.qml b/demos/declarative/flickr/mobile/GridDelegate.qml
new file mode 100644
index 0000000..8090cd4
--- /dev/null
+++ b/demos/declarative/flickr/mobile/GridDelegate.qml
@@ -0,0 +1,74 @@
+ import Qt 4.6
+
+ Component {
+     id: PhotoDelegate
+     Item {
+         id: Wrapper; width: 79; height: 79
+
+         Script {
+             function photoClicked() {
+                 ImageDetails.photoTitle = title;
+                 ImageDetails.photoDescription = description;
+                 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
+             scale: Behavior { NumberAnimation { easing: "easeInOutQuad"} }
+             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: "mobile/images/gloss.png"; smooth: true}
+             }
+
+             Connection {
+                 sender: ToolBar.button2; signal: "clicked()"
+                 script: if (ScaleMe.state == 'Details' ) ScaleMe.state = 'Show';
+             }
+
+             states: [
+                 State {
+                     name: "Show"; when: Thumb.status == 1
+                     PropertyChanges { target: ScaleMe; scale: 1 }
+                 },
+                 State {
+                     name: "Details"; extend: "Show"
+                     ParentChange { target: Wrapper; parent: ImageDetails.frontContainer }
+                     PropertyChanges { target: Wrapper; x: 20; y: 60 }
+                     PropertyChanges { target: ImageDetails; x: 0 }
+                     PropertyChanges { target: Views; x: -parent.width }
+                     PropertyChanges { target: ToolBar.button2; text: "Back" }
+                 }
+             ]
+             transitions: [
+                 Transition {
+                     from: "Show"; to: "Details"
+                     ParentAction { }
+                     NumberAnimation { properties: "x,y,opacity,angle"; duration: 500; easing: "easeInOutQuad" }
+                 },
+                 Transition {
+                     from: "Details"; to: "Show"
+                     SequentialAnimation {
+                         ParentAction { }
+                         NumberAnimation { properties: "x,y,opacity,angle"; duration: 500; easing: "easeInOutQuad" }
+                         PropertyAction { target: Wrapper; properties: "z" }
+                     }
+                 }
+             ]
+         }
+         MouseRegion { anchors.fill: Wrapper; onClicked: { photoClicked() } }
+     }
+ }
diff --git a/demos/declarative/flickr/mobile/ListDelegate.qml b/demos/declarative/flickr/mobile/ListDelegate.qml
new file mode 100644
index 0000000..b9ec7f2
--- /dev/null
+++ b/demos/declarative/flickr/mobile/ListDelegate.qml
@@ -0,0 +1,24 @@
+import Qt 4.6
+
+Component {
+    id: ListDelegate
+    Item {
+        id: Wrapper; width: Wrapper.ListView.view.width; height: 86
+        Item {
+            id: MoveMe
+            Rectangle { color: "black"; opacity: Wrapper.ListView.index % 2 ? 0.2 : 0.3; height: 84; width: Wrapper.width; y: 1 }
+            Rectangle {
+                id: WhiteRect; x: 6; y: 4; width: 77; height: 77; color: "white"; smooth: true
+
+                Image { id: Thumb; source: imagePath; x: 1; y: 1 }
+                Image { source: "images/gloss.png" }
+            }
+            Column {
+                x: 92; width: Wrapper.ListView.view.width - 95; y: 15; spacing: 2
+                Text { text: title; color: "white"; width: parent.width; font.bold: true; elide: "ElideRight"; style: "Raised"; styleColor: "black" }
+                Text { text: photoAuthor; color: "white"; width: parent.width; elide: "ElideLeft"; color: "#cccccc"; style: "Raised"; styleColor: "black" }
+                Text { text: photoDate; color: "white"; width: parent.width; elide: "ElideRight"; color: "#cccccc"; style: "Raised"; styleColor: "black" }
+            }
+        }
+    }
+}
diff --git a/demos/declarative/flickr/mobile/TitleBar.qml b/demos/declarative/flickr/mobile/TitleBar.qml
new file mode 100644
index 0000000..59b8365
--- /dev/null
+++ b/demos/declarative/flickr/mobile/TitleBar.qml
@@ -0,0 +1,74 @@
+import Qt 4.6
+
+Item {
+    id: TitleBar
+
+    BorderImage { source: "images/titlebar2.sci"; width: parent.width; height: parent.height + 14; y: -7 }
+
+    Item {
+        id: Container
+        width: (parent.width * 2) - 55 ; height: parent.height
+
+        Script {
+            function accept() {
+                RssModel.tags = Editor.text
+                TitleBar.state = ""
+            }
+        }
+
+        Text {
+            id: CategoryText
+            anchors.left: parent.left; anchors.right: TagButton.left
+            anchors.leftMargin: 10; anchors.rightMargin: 10
+            anchors.verticalCenter: parent.verticalCenter
+            elide: "ElideLeft"
+            text: (RssModel.tags=="" ? "Uploads from everyone" : "Recent Uploads tagged " + RssModel.tags)
+            font.pointSize: 10; font.bold: true; color: "white"; style: "Raised"; styleColor: "black"
+        }
+
+        Button {
+            id: TagButton; x: TitleBar.width - 50; y: 3; width: 45; height: 32; text: "..."
+            onClicked: if (TitleBar.state == "Tags") accept(); else TitleBar.state = "Tags"
+        }
+
+        Item {
+            id: LineEdit
+            anchors.left: TagButton.right; anchors.leftMargin: 5; y: 4
+            anchors.right: parent.right; anchors.rightMargin: 5; height: parent.height - 9
+            BorderImage { source: "images/lineedit.sci"; anchors.fill: parent }
+
+            TextInput {
+                id: Editor
+                anchors.left: parent.left; anchors.right: parent.right
+                anchors.leftMargin: 10; anchors.rightMargin: 10
+                anchors.verticalCenter: parent.verticalCenter
+                cursorVisible: true; font.bold: true
+                color: "#151515"; highlightColor: "green"
+            }
+            KeyProxy {
+                id: Proxy
+                anchors.fill: parent
+                targets: [(ReturnKey), (Editor)]
+            }
+            Item {
+                id: ReturnKey
+                Keys.onReturnPressed: accept()
+                Keys.onEscapePressed: TitleBar.state = ""
+            }
+        }
+    }
+    states: [
+        State {
+            name: "Tags"
+            PropertyChanges { target: Container; x: -TagButton.x + 5 }
+            PropertyChanges { target: TagButton; text: "OK" }
+            PropertyChanges { target: Proxy; focus: true }
+        }
+    ]
+    transitions: [
+        Transition {
+            from: "*"; to: "*"
+            NumberAnimation { properties: "x"; easing: "easeInOutQuad" }
+        }
+    ]
+}
diff --git a/demos/declarative/flickr/mobile/ToolBar.qml b/demos/declarative/flickr/mobile/ToolBar.qml
new file mode 100644
index 0000000..aa78c52
--- /dev/null
+++ b/demos/declarative/flickr/mobile/ToolBar.qml
@@ -0,0 +1,23 @@
+import Qt 4.6
+
+Item {
+    id: Toolbar
+    property var button2: Button2
+
+    BorderImage { source: "images/titlebar2.sci"; width: parent.width; height: parent.height + 14; y: -7 }
+
+    Button { anchors.left: parent.left; anchors.leftMargin: 5; y: 3; width: 140; height: 32; text: "Update"; onClicked: RssModel.reload() }
+
+    Button {
+        id: Button2
+        anchors.right: parent.right; anchors.rightMargin: 5; y: 3; width: 140; height: 32; text: "View mode"
+        onClicked: {
+            if (Button2.text == "View mode") {
+                if (Screen.inListView == true)
+                Screen.inListView = false;
+                else
+                Screen.inListView = true
+            }
+        }
+    }
+}
diff --git a/demos/declarative/flickr/mobile/images/gloss.png b/demos/declarative/flickr/mobile/images/gloss.png
new file mode 100644
index 0000000..5d370cd
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/gloss.png
diff --git a/demos/declarative/flickr/mobile/images/lineedit.png b/demos/declarative/flickr/mobile/images/lineedit.png
new file mode 100644
index 0000000..2cc38dc
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/lineedit.png
diff --git a/demos/declarative/flickr/mobile/images/lineedit.sci b/demos/declarative/flickr/mobile/images/lineedit.sci
new file mode 100644
index 0000000..7c5ec6c
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/lineedit.sci
@@ -0,0 +1,5 @@
+gridLeft: 10
+gridTop: 10
+gridBottom: 10
+gridRight: 10
+imageFile: lineedit.png
diff --git a/demos/declarative/flickr/mobile/images/stripes.png b/demos/declarative/flickr/mobile/images/stripes.png
new file mode 100644
index 0000000..9f36727
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/stripes.png
diff --git a/demos/declarative/flickr/mobile/images/titlebar2.png b/demos/declarative/flickr/mobile/images/titlebar2.png
new file mode 100644
index 0000000..51c9008
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/titlebar2.png
diff --git a/demos/declarative/flickr/mobile/images/titlebar2.sci b/demos/declarative/flickr/mobile/images/titlebar2.sci
new file mode 100644
index 0000000..e8fc2d1
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/titlebar2.sci
@@ -0,0 +1,5 @@
+gridLeft: 22
+gridTop: 10
+gridBottom: 10
+gridRight: 22
+imageFile: titlebar2.png
diff --git a/demos/declarative/flickr/mobile/images/toolbutton2.png b/demos/declarative/flickr/mobile/images/toolbutton2.png
new file mode 100644
index 0000000..8862898
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/toolbutton2.png
diff --git a/demos/declarative/flickr/mobile/images/toolbutton2.sci b/demos/declarative/flickr/mobile/images/toolbutton2.sci
new file mode 100644
index 0000000..e3118b0
--- /dev/null
+++ b/demos/declarative/flickr/mobile/images/toolbutton2.sci
@@ -0,0 +1,5 @@
+gridLeft: 15
+gridTop: 4
+gridBottom: 4
+gridRight: 15
+imageFile: toolbutton2.png