Doc: improve grabToImage snippets

- Change the code that is quoted so that the indenting looks sane
- Make it possible to copy and run the first snippet without
  modification
- Make it easier to copy and run the second snippet without
  modification
- Move itemGrab.qml to item sub-directory
- Generally tidy up

Pick-to: 6.2 6.4 6.5
Change-Id: I608b7a6025b9866c14b84420ae64827965a7519f
Reviewed-by: Paul Wicking <paul.wicking@qt.io>

2 files changed, 39 insertions, 50 deletions

diff --git a/src/quick/doc/snippets/qml/item/itemGrab.qml b/src/quick/doc/snippets/qml/item/itemGrab.qml
new file mode 100644
index 0000000000..ef4430175a
--- /dev/null
+++ b/src/quick/doc/snippets/qml/item/itemGrab.qml
@@ -0,0 +1,39 @@
+// Copyright (C) 2014 Jolla Ltd, author: <gunnar.sletta@jollamobile.com>
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick 2.4
+
+Item {
+    width: 320
+    height: 480
+
+//! [grab-to-file]
+Rectangle {
+    id: sourceRectangle
+    width: 100
+    height: 100
+    gradient: Gradient {
+        GradientStop { position: 0; color: "steelblue" }
+        GradientStop { position: 1; color: "black" }
+    }
+
+    Component.onCompleted: {
+        sourceRectangle.grabToImage(function(result) {
+           result.saveToFile("something.png")
+        })
+    }
+}
+//! [grab-to-file]
+
+//! [grab-to-image]
+Image {
+    id: image
+}
+
+Component.onCompleted: {
+    sourceRectangle.grabToImage(function(result) {
+        image.source = result.url
+    }, Qt.size(50, 50))
+}
+//! [grab-to-image]
+}
diff --git a/src/quick/doc/snippets/qml/itemGrab.qml b/src/quick/doc/snippets/qml/itemGrab.qml
deleted file mode 100644
index dd02661894..0000000000
--- a/src/quick/doc/snippets/qml/itemGrab.qml
+++ /dev/null
@@ -1,50 +0,0 @@
-// Copyright (C) 2014 Jolla Ltd, author: <gunnar.sletta@jollamobile.com>
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
-
-import QtQuick 2.4
-
-Item {
-    width: 320
-    height: 480
-
-//! [grab-source]
-Rectangle {
-    id: source
-    width: 100
-    height: 100
-    gradient: Gradient {
-        GradientStop { position: 0; color: "steelblue" }
-        GradientStop { position: 1; color: "black" }
-    }
-}
-//! [grab-source]
-
-//! [grab-image-target]
-Image {
-    id: image
-}
-//! [grab-image-target]
-    Timer {
-        repeat: false
-        running: true
-        interval: 1000
-        onTriggered: {
-//! [grab-to-file]
-
-    // ...
-    source.grabToImage(function(result) {
-                           result.saveToFile("something.png");
-                       });
-//! [grab-to-file]
-
-//! [grab-to-cache]
-
-    // ...
-    source.grabToImage(function(result) {
-                           image.source = result.url;
-                       },
-                       Qt.size(50, 50));
-//! [grab-to-cache]
-        }
-    }
-}