Add label to explain how to exit QML demos

Some people didn't figure it out intuitively, so extra help is now
provided.

Task-number: QTBUG-11868
(cherry picked from commit 8668f245b69da455ac7fe1d0a599226c1d6b9580)

1 files changed, 33 insertions, 5 deletions

diff --git a/demos/qtdemo/qmlShell.qml b/demos/qtdemo/qmlShell.qml
index e15d33c..e9d8d56 100644
--- a/demos/qtdemo/qmlShell.qml
+++ b/demos/qtdemo/qmlShell.qml
@@ -52,6 +52,7 @@ Item {
     //below properties are sometimes set from C++
     property url qmlFile: ''
     property bool show: false
+    /*
     Image{
         id: bg
         opacity: 0
@@ -60,6 +61,7 @@ Item {
         pixmap: bgAppPixmap
         effect: Blur { id: blurEffect; enabled: useBlur; blurRadius: 8;}
     }
+    */
 
     Item{ id:embeddedViewer
         width: parent.width
@@ -136,6 +138,32 @@ Item {
             onLinkActivated: Qt.openUrlExternally(link);
         }
     }
+    Rectangle{
+        id: helpLabel
+        property bool timedOut: false
+        z: 9
+        //Positioned in the top left corner
+        x: 8 
+        y: 8
+        color: "white"
+        border.color: "black"
+        border.width: 1
+        width: helpText.width + 16
+        height: helpText.height + 8
+        Text{
+            id: helpText
+            color: "black"
+            anchors.centerIn: parent
+            text: "Click outside the example to exit it."
+        }
+        opacity: 0
+        Behavior on opacity{ NumberAnimation{duration:500} }
+        Timer{
+            id: helpTimer
+            interval: 5000
+            onTriggered: {helpLabel.timedOut=true}
+        }
+    }
     Rectangle{ id: blackout //Maybe use a colorize effect instead?
         z: 8
         anchors.fill: parent
@@ -160,8 +188,8 @@ Item {
                 opacity: 1
             }
             PropertyChanges {
-                target: bg
-                opacity: 1
+                target: helpLabel
+                opacity: helpLabel.timedOut?0:1
             }
             PropertyChanges {
                 target: blackout
@@ -171,9 +199,9 @@ Item {
     ]
     transitions: [//Should not be too long, because the component has already started running
         Transition { from: ''; to: "show"; reversible: true
-            SequentialAnimation{
-                PropertyAction { target: bg; property: useBlur?"y":"opacity";}//fade in blurred background only if blurred
-                NumberAnimation{ properties: "opacity"; easing.type: Easing.InQuad; duration: 500}
+            ParallelAnimation{
+                ScriptAction{ script: {helpLabel.timedOut = false; helpTimer.restart();} }
+                NumberAnimation{ exclude: helpLabel; properties: "opacity"; easing.type: Easing.InQuad; duration: 500}
                 PropertyAction { target: loader; property: "focus"; value: true}//Might be needed to ensure the focus stays with us
             }
         }