Fixed frame focusing on touch devices

Also fixed the \quotefromfile commands in the doc to
display the changed code correctly.

Task-number: QTBUG-38779
Change-Id: I37d37139459cb9cdee7ec9beaffeab26a1cb4aaf
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@digia.com>
Reviewed-by: Topi Reiniö <topi.reinio@digia.com>

2 files changed, 18 insertions, 17 deletions

diff --git a/examples/quick/demos/photosurface/doc/src/photosurface.qdoc b/examples/quick/demos/photosurface/doc/src/photosurface.qdoc
index b66143368e..49f864b4d9 100644
--- a/examples/quick/demos/photosurface/doc/src/photosurface.qdoc
+++ b/examples/quick/demos/photosurface/doc/src/photosurface.qdoc
@@ -53,7 +53,7 @@
 
     \quotefromfile demos/photosurface/photosurface.qml
     \skipto Window {
-    \printuntil defaultSize
+    \printuntil currentFrame
 
     To use the \l{Window} type, we must import it:
 
@@ -123,9 +123,7 @@
     We use a PinchArea that contains a MouseArea in the photo frames to handle
     dragging, rotation and pinch zooming of the frame:
 
-    \quotefromfile demos/photosurface/photosurface.qml
-    \skipto PinchArea
-    \printuntil onPinchFinished
+    \printuntil onPinchStarted
 
     We use the \c pinch group property to control how the photo frames react to
     pinch gestures. The \c pinch.target sets \c photoFrame as the item to
@@ -136,18 +134,14 @@
     In the MouseArea's \c onPressed signal handler, we raise the selected photo
     frame to the top by increasing the value of its \c z property. The root item
     stores the z value of the top-most frame. The border color of the photo
-    frame is controlled in the \c onEntered and \c onExited signal handlers to
-    highlight the selected image.
+    frame is controlled in the \c onEntered signal handler to highlight the
+    selected image:
 
-    \quotefromfile demos/photosurface/photosurface.qml
-    \skipto MouseArea
-    \printuntil onExited
+    \printuntil onEntered
 
     To enable you to test the example on the desktop, we use the MouseArea's
     \c onWheel signal handler to simulate pinch gestures by using a mouse:
 
-    \quotefromfile demos/photosurface/photosurface.qml
-    \skipto onWheel
     \printuntil photoFrame.y
     \printuntil }
     \printuntil }
@@ -157,7 +151,5 @@
     Use the vertical wheel to zoom and Ctrl and the vertical wheel to rotate
     frames. If the mouse has a horizontal wheel, use it to rotate frames.
 
-    \section1 List of Files
-
     \sa {QML Applications}
 */
diff --git a/examples/quick/demos/photosurface/photosurface.qml b/examples/quick/demos/photosurface/photosurface.qml
index 9d081de1e3..c269018426 100644
--- a/examples/quick/demos/photosurface/photosurface.qml
+++ b/examples/quick/demos/photosurface/photosurface.qml
@@ -49,6 +49,7 @@ Window {
     color: "black"
     property int highestZ: 0
     property real defaultSize: 200
+    property var currentFrame: undefined
 
     FileDialog {
         id: fileDialog
@@ -90,15 +91,17 @@ Window {
                 pinch.maximumRotation: 360
                 pinch.minimumScale: 0.1
                 pinch.maximumScale: 10
-                onPinchFinished: photoFrame.border.color = "black";
+                onPinchStarted: setFrameColor();
                 MouseArea {
                     id: dragArea
                     hoverEnabled: true
                     anchors.fill: parent
                     drag.target: photoFrame
-                    onPressed: photoFrame.z = ++root.highestZ;
-                    onEntered: photoFrame.border.color = "red";
-                    onExited: photoFrame.border.color = "black";
+                    onPressed: {
+                        photoFrame.z = ++root.highestZ;
+                        parent.setFrameColor();
+                    }
+                    onEntered: parent.setFrameColor();
                     onWheel: {
                         if (wheel.modifiers & Qt.ControlModifier) {
                             photoFrame.rotation += wheel.angleDelta.y / 120 * 5;
@@ -115,6 +118,12 @@ Window {
                         }
                     }
                 }
+                function setFrameColor() {
+                    if (currentFrame)
+                        currentFrame.border.color = "black";
+                    currentFrame = photoFrame;
+                    currentFrame.border.color = "red";
+                }
             }
         }
     }