Make scaling in flickr demo sensible.

3 files changed, 29 insertions, 16 deletions

diff --git a/demos/declarative/flickr/content/ImageDetails.qml b/demos/declarative/flickr/content/ImageDetails.qml
index 5c2d885..d575be9 100644
--- a/demos/declarative/flickr/content/ImageDetails.qml
+++ b/demos/declarative/flickr/content/ImageDetails.qml
@@ -2,8 +2,6 @@ Flipable {
     id: Container
 
     property var frontContainer: ContainerFront
-    property var flickableArea: Flickable
-    property var slider: Slider
     property string photoTitle: ""
     property string photoDescription: ""
     property string photoTags: ""
@@ -77,13 +75,28 @@ Flipable {
         Progress { anchors.centeredIn: parent; width: 200; height: 18; progress: BigImage.progress; visible: BigImage.status }
         Flickable {
             id: Flick; width: Container.width - 10; height: Container.height - 10
-            x: 5; y: 5; clip: true; viewportWidth: (BigImage.width * BigImage.scale) + BigImage.x;
-            viewportHeight: BigImage.height * BigImage.scale
-
-            Image {
-                id: BigImage; source: Container.photoUrl; scale: Slider.value
-                x:Math.max(0, ((Flick.width/2)-(width * scale / 2)));
-                y:Math.max(0, (Flick.height/2)-(height * scale / 2));
+            x: 5; y: 5; 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
+                    anchors.centeredIn: parent
+                    onStatusChanged : {
+                        // Default scale shows the entire image.
+                        if (status == 0 && width != 0) {
+                            Slider.minimum = Math.min(Flick.width / width, Flick.height / height);
+                            Slider.value = Math.min(Slider.minimum, 1);
+                        }
+                    }
+                }
             }
         }
 
@@ -96,7 +109,7 @@ Flipable {
             anchors.centeredIn: parent; color: "white"; font.bold: true
         }
 
-        Slider { id: Slider; x: 25; y: 374; visible: BigImage.status == 0; imageWidth: Container.photoWidth; imageHeight: Container.photoHeight }
+        Slider { id: Slider; x: 25; y: 374; visible: { BigImage.status == 0 && maximum > minimum } }
     }
 
     states: [
diff --git a/demos/declarative/flickr/content/Slider.qml b/demos/declarative/flickr/content/Slider.qml
index c6a3e5e..92f4993 100644
--- a/demos/declarative/flickr/content/Slider.qml
+++ b/demos/declarative/flickr/content/Slider.qml
@@ -1,11 +1,12 @@
 Item {
     id: Slider; width: 400; height: 16
 
-    property var value: Handle.x / Slider.xMax
+    // value is read/write.
+    property real value
+    onValueChanged: { Handle.x = (value - minimum) * Slider.xMax / (maximum - minimum); }
+    property real maximum: 1
+    property real minimum: 1
     property int xMax: Slider.width - Handle.width - 2
-    property var handle: Handle
-    property int imageWidth
-    property int imageHeight
 
     Rect {
         id: Container; anchors.fill: parent; gradientColor: "#66000000";
@@ -20,6 +21,7 @@ Item {
         MouseRegion {
             anchors.fill: parent; drag.target: parent
             drag.axis: "x"; drag.xmin: 2; drag.xmax: Slider.xMax
+            onPositionChanged: { value = (maximum - minimum) * Handle.x / Slider.xMax + minimum; }
         }
     }
 }
diff --git a/demos/declarative/flickr/flickr.qml b/demos/declarative/flickr/flickr.qml
index fa3bc35..f35120a 100644
--- a/demos/declarative/flickr/flickr.qml
+++ b/demos/declarative/flickr/flickr.qml
@@ -48,7 +48,6 @@ Item {
             Script {
                function photoClicked() {
                    ImageDetails.photoTitle = title;
-                   ImageDetails.flickableArea.yPosition = 0;
                    ImageDetails.photoDescription = description;
                    ImageDetails.photoTags = tags;
                    ImageDetails.photoWidth = photoWidth;
@@ -58,7 +57,6 @@ Item {
                    ImageDetails.photoDate = photoDate;
                    ImageDetails.photoUrl = url;
                    ImageDetails.rating = 0;
-                   ImageDetails.slider.handle.x = ImageDetails.slider.xMax;
                    Wrapper.state = "Details";
                }
             }