Doc: Add anchor button images and use them in the docs

Also needed in the Qt Design Studio tutorials.

Change-Id: I3efe391660480b02d010327afd583070b1fa1a33
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

11 files changed, 28 insertions, 21 deletions

diff --git a/doc/images/anchor-bottom.png b/doc/images/anchor-bottom.png
new file mode 100644
index 0000000000..3a96c98107
--- /dev/null
+++ b/doc/images/anchor-bottom.png
diff --git a/doc/images/anchor-fill.png b/doc/images/anchor-fill.png
new file mode 100644
index 0000000000..a065729bee
--- /dev/null
+++ b/doc/images/anchor-fill.png
diff --git a/doc/images/anchor-horizontal-center.png b/doc/images/anchor-horizontal-center.png
new file mode 100644
index 0000000000..984fa0eb68
--- /dev/null
+++ b/doc/images/anchor-horizontal-center.png
diff --git a/doc/images/anchor-left.png b/doc/images/anchor-left.png
new file mode 100644
index 0000000000..9263750235
--- /dev/null
+++ b/doc/images/anchor-left.png
diff --git a/doc/images/anchor-right.png b/doc/images/anchor-right.png
new file mode 100644
index 0000000000..7fa48d4f75
--- /dev/null
+++ b/doc/images/anchor-right.png
diff --git a/doc/images/anchor-top.png b/doc/images/anchor-top.png
new file mode 100644
index 0000000000..12dd0ff3e1
--- /dev/null
+++ b/doc/images/anchor-top.png
diff --git a/doc/images/anchor-vertical-center.png b/doc/images/anchor-vertical-center.png
new file mode 100644
index 0000000000..a82090c1ed
--- /dev/null
+++ b/doc/images/anchor-vertical-center.png
diff --git a/doc/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc b/doc/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc
index 380192d9dd..6f8b571bf8 100644
--- a/doc/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc
+++ b/doc/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc
@@ -100,7 +100,7 @@
                     to reference the rectangle from other places.
 
                 \li Select the \uicontrol Layout tab, and then click
-                    the \inlineimage anchor_fill.png
+                    the \inlineimage anchor-fill.png
                     (\uicontrol {Fill to Parent}) button to anchor the rectangle
                     to the item.
 
diff --git a/doc/src/qtquick/creator-only/qtquick-app-tutorial.qdoc b/doc/src/qtquick/creator-only/qtquick-app-tutorial.qdoc
index 0ac4cc85d0..55fe9f421c 100644
--- a/doc/src/qtquick/creator-only/qtquick-app-tutorial.qdoc
+++ b/doc/src/qtquick/creator-only/qtquick-app-tutorial.qdoc
@@ -117,22 +117,24 @@
             \li In the \uicontrol {Border color} field, set the border color to
                 \e #808080.
 
-            \li Click \uicontrol {Layout}, and then click the top and left
-                anchor buttons to anchor the rectangle to the top left corner of
-                the page.
-
-                \image qmldesigner-tutorial-topleftrect-layout.png "Layout tab"
+            \li Click \uicontrol {Layout}, and then click the
+                \inlineimage anchor-top.png
+                (\uicontrol Top) and \inlineimage anchor-left.png
+                (\uicontrol Left) anchor buttons to anchor the
+                rectangle to the top left corner of the page.
 
             \li In the \uicontrol Margin field, select \e 20 for the top anchor
                 and \e 10 for the left anchor.
 
+                \image qmldesigner-tutorial-topleftrect-layout.png "Anchor margins"
+
         \endlist
 
         \li Drag and drop a \uicontrol {Mouse Area} type from the
             \uicontrol Library to \e topLeftRect in the navigator.
 
         \li Click \uicontrol {Layout}, and then click the
-            \inlineimage anchor_fill.png
+            \inlineimage anchor-fill.png
             (\uicontrol {Fill to Parent}) button to anchor the mouse area to the
             rectangle.
 
@@ -147,9 +149,12 @@
 
             \li In the \uicontrol Id field, enter \e middleRightRect.
 
-            \li In \uicontrol {Layout}, select the vertical center anchor button and
-                then the right anchor button to
-                anchor the rectangle to the middle right margin of its parent.
+            \li In \uicontrol {Layout}, select the
+                \inlineimage anchor-vertical-center.png
+                (\uicontrol {Vertical Center} anchor button and then the
+                \inlineimage anchor-right.png
+                (\uicontrol Right) anchor button to anchor the rectangle
+                to the middle right margin of its parent.
 
             \li In the \uicontrol Margin field, select \e 10 for the right
                 anchor and \e 0 for the vertical center anchor.
@@ -162,8 +167,11 @@
 
             \li In the \uicontrol Id field, enter \e bottomLeftRect.
 
-            \li In \uicontrol {Layout}, select the bottom and left anchor buttons to
-                anchor the rectangle to the bottom left margin of its parent.
+            \li In \uicontrol {Layout}, select the
+                \inlineimage anchor-bottom.png
+                (\uicontrol Bottom) and \inlineimage anchor-left.png
+                (\uicontrol Left) anchor buttons to anchor the rectangle
+                to the bottom left margin of its parent.
 
             \li In the \uicontrol Margin field, select \e 20 for the bottom
                 anchor and \e 10 for the left anchor.
diff --git a/doc/src/qtquick/qtquick-buttons.qdoc b/doc/src/qtquick/qtquick-buttons.qdoc
index 0f7c5f5235..104605a7b8 100644
--- a/doc/src/qtquick/qtquick-buttons.qdoc
+++ b/doc/src/qtquick/qtquick-buttons.qdoc
@@ -76,7 +76,7 @@
                 the rectangle and produce rounded corners for the button.
 
             \li Select \uicontrol {Layout}, and then select the
-                \inlineimage anchor_fill.png
+                \inlineimage anchor-fill.png
                 (\uicontrol {Fill to Parent}) button to anchor the rectangle to
                 the item.
 
@@ -208,7 +208,7 @@
                 for example button_up.png.
 
             \li  Click \uicontrol {Layout}, and then click the
-                \inlineimage anchor_fill.png
+                \inlineimage anchor-fill.png
                 (\uicontrol {Fill to Parent}) button to anchor the border image to the
                 \uicontrol Item.
 
@@ -258,12 +258,11 @@
                 \endlist
 
             \li Click \uicontrol {Layout}, and then click the
-                \inlineimage anchor_vertical.png
-                (\uicontrol {Set Vertical Anchor}) and
-                \inlineimage anchor_horizontal.png
-                (\uicontrol {Set Horizontal Anchor})
-                buttons to inherit the vertical and horizontal centering from
-                the parent.
+                \inlineimage anchor-vertical-center.png
+                (\uicontrol {Vertical Center}) and
+                \inlineimage anchor-horizontal-center.png
+                (\uicontrol {Horizontal Center}) buttons to inherit the
+                vertical and horizontal centering from the parent.
 
         \endlist
 
diff --git a/doc/src/qtquick/qtquick-components.qdoc b/doc/src/qtquick/qtquick-components.qdoc
index 5eea22926c..36190f8106 100644
--- a/doc/src/qtquick/qtquick-components.qdoc
+++ b/doc/src/qtquick/qtquick-components.qdoc
@@ -212,7 +212,7 @@
 
     \image qmldesigner-anchor-buttons.png "Anchor buttons"
 
-    For convenience, you can click the \inlineimage anchor_fill.png
+    For convenience, you can click the \inlineimage anchor-fill.png
     (\uicontrol {Fill to Parent}) toolbar button to apply fill anchors to an
     item and the \inlineimage qtcreator-anchors-reset-icon.png
     (\uicontrol {Reset Anchors}) button to reset the anchors to their saved