Ensure slider is updated when screen size changes.

Task-number: QT-3718

2 files changed, 38 insertions, 6 deletions

diff --git a/demos/declarative/flickr/common/Slider.qml b/demos/declarative/flickr/common/Slider.qml
index 4353f8d..faa2e5f 100644
--- a/demos/declarative/flickr/common/Slider.qml
+++ b/demos/declarative/flickr/common/Slider.qml
@@ -45,11 +45,24 @@ Item {
     id: slider; width: 400; height: 16
 
     // value is read/write.
-    property real value
-    onValueChanged: { handle.x = 2 + (value - minimum) * slider.xMax / (maximum - minimum); }
+    property real value: 1
+    onValueChanged: updatePos();
     property real maximum: 1
     property real minimum: 1
-    property int xMax: slider.width - handle.width - 4
+    property int xMax: width - handle.width - 4
+    onXMaxChanged: updatePos();
+    onMinimumChanged: updatePos();
+
+    function updatePos() {
+        if (maximum > minimum) {
+            var pos = 2 + (value - minimum) * slider.xMax / (maximum - minimum);
+            pos = Math.min(pos, width - handle.width - 2);
+            pos = Math.max(pos, 2);
+            handle.x = pos;
+        } else {
+            handle.x = 2;
+        }
+    }
 
     Rectangle {
         anchors.fill: parent
@@ -62,13 +75,14 @@ Item {
 
     Rectangle {
         id: handle; smooth: true
-        x: slider.width / 2 - handle.width / 2; y: 2; width: 30; height: slider.height-4; radius: 6
+        y: 2; width: 30; height: slider.height-4; radius: 6
         gradient: Gradient {
             GradientStop { position: 0.0; color: "lightgray" }
             GradientStop { position: 1.0; color: "gray" }
         }
 
         MouseArea {
+            id: mouse
             anchors.fill: parent; drag.target: parent
             drag.axis: Drag.XAxis; drag.minimumX: 2; drag.maximumX: slider.xMax+2
             onPositionChanged: { value = (maximum - minimum) * (handle.x-2) / slider.xMax + minimum; }
diff --git a/demos/declarative/flickr/mobile/ImageDetails.qml b/demos/declarative/flickr/mobile/ImageDetails.qml
index ff902ce..7441ecc 100644
--- a/demos/declarative/flickr/mobile/ImageDetails.qml
+++ b/demos/declarative/flickr/mobile/ImageDetails.qml
@@ -104,6 +104,24 @@ Flipable {
             id: flickable; anchors.fill: parent; clip: true
             contentWidth: imageContainer.width; contentHeight: imageContainer.height
 
+            function updateMinimumScale() {
+                if (bigImage.status == Image.Ready && bigImage.width != 0) {
+                    slider.minimum = Math.min(flickable.width / bigImage.width, flickable.height / bigImage.height);
+                    if (bigImage.width * slider.value > flickable.width) {
+                        var xoff = (flickable.width/2 + flickable.contentX) * slider.value / prevScale;
+                        flickable.contentX = xoff - flickable.width/2;
+                    }
+                    if (bigImage.height * slider.value > flickable.height) {
+                        var yoff = (flickable.height/2 + flickable.contentY) * slider.value / prevScale;
+                        flickable.contentY = yoff - flickable.height/2;
+                    }
+                    prevScale = slider.value;
+                }
+            }
+
+            onWidthChanged: updateMinimumScale()
+            onHeightChanged: updateMinimumScale()
+
             Item {
                 id: imageContainer
                 width: Math.max(bigImage.width * bigImage.scale, flickable.width);
@@ -114,8 +132,8 @@ Flipable {
                     anchors.centerIn: parent; smooth: !flickable.movingVertically
                     onStatusChanged : {
                         // Default scale shows the entire image.
-                        if (status == Image.Ready && width != 0) {
-                            slider.minimum = Math.min(flickable.width / width, flickable.height / height);
+                        if (bigImage.status == Image.Ready && bigImage.width != 0) {
+                            slider.minimum = Math.min(flickable.width / bigImage.width, flickable.height / bigImage.height);
                             prevScale = Math.min(slider.minimum, 1);
                             slider.value = prevScale;
                         }