improve flickr-mobile detailed view

3 files changed, 138 insertions, 7 deletions

diff --git a/demos/declarative/flickr/flickr-mobile.qml b/demos/declarative/flickr/flickr-mobile.qml
index c497e4e..9d2a3fb 100644
--- a/demos/declarative/flickr/flickr-mobile.qml
+++ b/demos/declarative/flickr/flickr-mobile.qml
@@ -23,12 +23,12 @@ Item {
             Mobile.GridDelegate { id: GridDelegate }
             GridView {
                 id: PhotoGridView; model: RssModel; delegate: GridDelegate; cacheBuffer: 100
-                cellWidth: 79; cellHeight: 79; width: parent.width; height: parent.height - 1
+                cellWidth: 79; cellHeight: 79; width: parent.width; height: parent.height - 1; z: 6
             }
 
             Mobile.ListDelegate { id: ListDelegate }
             ListView {
-                id: PhotoListView; model: RssModel; delegate: ListDelegate
+                id: PhotoListView; model: RssModel; delegate: ListDelegate; z: 6
                 width: parent.width; height: parent.height; x: -(parent.width * 1.5); cacheBuffer: 100;
             }
             states: State {
@@ -42,11 +42,11 @@ Item {
             }
         }
 
-        Common.ImageDetails { id: ImageDetails; width: parent.width; anchors.left: Views.right; height: parent.height }
-        Mobile.TitleBar { id: TitleBar; width: parent.width; height: 40; opacity: 0.9 }
+        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.ToolBar {
-            id: ToolBar
+            id: ToolBar; z: 5
             height: 40; anchors.bottom: parent.bottom; width: parent.width; opacity: 0.9
             button1Label: "Update"; button2Label: "View mode"
             onButton1Clicked: RssModel.reload()
@@ -56,6 +56,8 @@ Item {
         states: State {
             name: "DetailedView"
             PropertyChanges { target: Views; x: -parent.width }
+            PropertyChanges { target: ToolBar; button1Label: "More..." }
+            PropertyChanges { target: ToolBar; onButton1Clicked: { } }
             PropertyChanges { target: ToolBar; button2Label: "Back" }
             PropertyChanges { target: ToolBar; onButton2Clicked: { } }
         }
diff --git a/demos/declarative/flickr/mobile/GridDelegate.qml b/demos/declarative/flickr/mobile/GridDelegate.qml
index 91e7c8d..890e020 100644
--- a/demos/declarative/flickr/mobile/GridDelegate.qml
+++ b/demos/declarative/flickr/mobile/GridDelegate.qml
@@ -8,7 +8,6 @@
          Script {
              function photoClicked() {
                  ImageDetails.photoTitle = title;
-                 ImageDetails.photoDescription = description;
                  ImageDetails.photoTags = tags;
                  ImageDetails.photoWidth = photoWidth;
                  ImageDetails.photoHeight = photoHeight;
@@ -46,8 +45,9 @@
                  },
                  State {
                      name: "Details"; extend: "Show"
+                     //PropertyChanges { target: ImageDetails; z: 2 }
                      ParentChange { target: Wrapper; parent: ImageDetails.frontContainer }
-                     PropertyChanges { target: Wrapper; x: 20; y: 60 }
+                     PropertyChanges { target: Wrapper; x: 20; y: 60; z: 1000 }
                      PropertyChanges { target: Background; state: "DetailedView" }
                  }
              ]
diff --git a/demos/declarative/flickr/mobile/ImageDetails.qml b/demos/declarative/flickr/mobile/ImageDetails.qml
new file mode 100644
index 0000000..5f16a24
--- /dev/null
+++ b/demos/declarative/flickr/mobile/ImageDetails.qml
@@ -0,0 +1,129 @@
+import Qt 4.6
+import "../common" as Common
+
+Flipable {
+    id: Container
+
+    property var frontContainer: ContainerFront
+    property string photoTitle: ""
+    property string photoTags: ""
+    property int photoWidth
+    property int photoHeight
+    property string photoType
+    property string photoAuthor
+    property string photoDate
+    property string photoUrl
+    property int rating: 2
+    property var prevScale: 1.0
+
+    signal closed
+
+    transform: Rotation {
+        id: Rotation
+        origin.x: Container.width / 2;
+        axis.y: 1; axis.z: 0
+    }
+
+    front: Item {
+        id: ContainerFront; anchors.fill: Container
+
+        Rectangle {
+            anchors.fill: parent
+            color: "black"; opacity: 0.4
+        }
+
+        Connection {
+            sender: ToolBar; signal: "button1Clicked()"
+            script: if (Container.state=='') Container.state='Back'; else Container.state=''
+        }
+
+        Column {
+            spacing: 10
+            anchors {
+                left: parent.left; leftMargin: 20
+                right: parent.right; rightMargin: 20
+                top: parent.top; topMargin: 180
+            }
+            Text { id: TitleText; font.bold: true; color: "white"; elide: "ElideRight"; text: Container.photoTitle }
+            Text { id: Size; color: "white"; elide: "ElideRight"; text: "<b>Size:</b> " + Container.photoWidth + 'x' + Container.photoHeight }
+            Text { id: Type; color: "white"; elide: "ElideRight"; text: "<b>Type:</b> " + Container.photoType }
+            Text { id: Author; color: "white"; elide: "ElideRight"; text: "<b>Author:</b> " + Container.photoAuthor }
+            Text { id: Date; color: "white"; elide: "ElideRight"; text: "<b>Published:</b> " + Container.photoDate }
+            Text { id: TagsLabel; color: "white"; elide: "ElideRight"; text: Container.photoTags == "" ? "" : "<b>Tags:</b> " }
+            Text { id: Tags; color: "white"; elide: "ElideRight"; elide: "ElideRight"; text: Container.photoTags }
+        }
+    }
+
+    back: Item {
+        anchors.fill: Container
+
+        Rectangle { anchors.fill: parent; color: "black"; opacity: 0.4 }
+
+        Common.Progress { anchors.centerIn: parent; width: 200; height: 18; progress: BigImage.progress; visible: BigImage.status!=1 }
+        Flickable {
+            id: Flick; anchors.fill: parent; clip: true
+            viewportWidth: ImageContainer.width; viewportHeight: ImageContainer.height
+
+            Item {
+                id: ImageContainer
+                width: Math.max(BigImage.width * BigImage.scale, Flick.width);
+                height: Math.max(BigImage.height * BigImage.scale, Flick.height);
+
+                Image {
+                    id: BigImage; source: Container.photoUrl; scale: Slider.value
+                    // Center image if it is smaller than the flickable area.
+                    x: ImageContainer.width > width*scale ? (ImageContainer.width - width*scale) / 2 : 0
+                    y: ImageContainer.height > height*scale ? (ImageContainer.height - height*scale) / 2 : 0
+                    smooth: !Flick.moving
+                    onStatusChanged : {
+                        // Default scale shows the entire image.
+                        if (status == 1 && width != 0) {
+                            Slider.minimum = Math.min(Flick.width / width, Flick.height / height);
+                            prevScale = Math.min(Slider.minimum, 1);
+                            Slider.value = prevScale;
+                        }
+                    }
+                }
+            }
+        }
+
+        Text {
+            text: "Image Unavailable"
+            visible: BigImage.status == 'Error'
+            anchors.centerIn: parent; color: "white"; font.bold: true
+        }
+
+        Common.Slider {
+            id: Slider; visible: { BigImage.status == 1 && maximum > minimum }
+            anchors {
+                bottom: parent.bottom; bottomMargin: 65
+                left: parent.left; leftMargin: 25
+                right: parent.right; rightMargin: 25
+            }
+            onValueChanged: {
+                if (BigImage.width * value > Flick.width) {
+                    var xoff = (Flick.width/2 + Flick.viewportX) * value / prevScale;
+                    Flick.viewportX = xoff - Flick.width/2;
+                }
+                if (BigImage.height * value > Flick.height) {
+                    var yoff = (Flick.height/2 + Flick.viewportY) * value / prevScale;
+                    Flick.viewportY = yoff - Flick.height/2;
+                }
+                prevScale = value;
+            }
+        }
+    }
+
+    states: State {
+        name: "Back"
+        PropertyChanges { target: Rotation; angle: 180 }
+    }
+
+    transitions: Transition {
+        SequentialAnimation {
+            PropertyAction { target: BigImage; property: "smooth"; value: false }
+            NumberAnimation { easing: "easeInOutQuad"; properties: "angle"; duration: 500 }
+            PropertyAction { target: BigImage; property: "smooth"; value: !Flick.moving }
+        }
+    }
+}