Doc: Update properties related to positioning components

Add a table that summarizes the buttons in the Alignment section
in Properties.

Task-number: QDS-4561
Change-Id: Ieeae56206cc5126eb519297fbe4d0e9043775a7d
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: Brook Cronin <brook.cronin@qt.io>
Reviewed-by: Johanna Vanhatapio <johanna.vanhatapio@qt.io>

38 files changed, 114 insertions, 38 deletions

diff --git a/doc/qtcreator/images/icons/align-bottom.png b/doc/qtcreator/images/icons/align-bottom.png
new file mode 100644
index 0000000000..07277d74a9
--- /dev/null
+++ b/doc/qtcreator/images/icons/align-bottom.png
diff --git a/doc/qtcreator/images/icons/align-center-horizontal.png b/doc/qtcreator/images/icons/align-center-horizontal.png
new file mode 100644
index 0000000000..d0af695e8d
--- /dev/null
+++ b/doc/qtcreator/images/icons/align-center-horizontal.png
diff --git a/doc/qtcreator/images/icons/align-center-vertical.png b/doc/qtcreator/images/icons/align-center-vertical.png
new file mode 100644
index 0000000000..8d42373351
--- /dev/null
+++ b/doc/qtcreator/images/icons/align-center-vertical.png
diff --git a/doc/qtcreator/images/icons/align-left.png b/doc/qtcreator/images/icons/align-left.png
new file mode 100644
index 0000000000..3552235feb
--- /dev/null
+++ b/doc/qtcreator/images/icons/align-left.png
diff --git a/doc/qtcreator/images/icons/align-right.png b/doc/qtcreator/images/icons/align-right.png
new file mode 100644
index 0000000000..68d8ac7d3b
--- /dev/null
+++ b/doc/qtcreator/images/icons/align-right.png
diff --git a/doc/qtcreator/images/icons/align-top.png b/doc/qtcreator/images/icons/align-top.png
new file mode 100644
index 0000000000..00568f5680
--- /dev/null
+++ b/doc/qtcreator/images/icons/align-top.png
diff --git a/doc/qtcreator/images/icons/anchor-bottom.png b/doc/qtcreator/images/icons/anchor-bottom.png
index 9ef1e5b364..e6ab30a9ec 100644
--- a/doc/qtcreator/images/icons/anchor-bottom.png
+++ b/doc/qtcreator/images/icons/anchor-bottom.png
diff --git a/doc/qtcreator/images/icons/anchor-fill.png b/doc/qtcreator/images/icons/anchor-fill.png
index da8b6bf92b..64a2793932 100644
--- a/doc/qtcreator/images/icons/anchor-fill.png
+++ b/doc/qtcreator/images/icons/anchor-fill.png
diff --git a/doc/qtcreator/images/icons/anchor-left.png b/doc/qtcreator/images/icons/anchor-left.png
index 78c3c90b25..f3ebeab500 100644
--- a/doc/qtcreator/images/icons/anchor-left.png
+++ b/doc/qtcreator/images/icons/anchor-left.png
diff --git a/doc/qtcreator/images/icons/anchor-right.png b/doc/qtcreator/images/icons/anchor-right.png
index 042dc830b7..43609aa397 100644
--- a/doc/qtcreator/images/icons/anchor-right.png
+++ b/doc/qtcreator/images/icons/anchor-right.png
diff --git a/doc/qtcreator/images/icons/anchor-top.png b/doc/qtcreator/images/icons/anchor-top.png
index 4136ca624f..896930eb64 100644
--- a/doc/qtcreator/images/icons/anchor-top.png
+++ b/doc/qtcreator/images/icons/anchor-top.png
diff --git a/doc/qtcreator/images/icons/center-horizontal.png b/doc/qtcreator/images/icons/center-horizontal.png
new file mode 100644
index 0000000000..cdea461bd3
--- /dev/null
+++ b/doc/qtcreator/images/icons/center-horizontal.png
diff --git a/doc/qtcreator/images/icons/center-vertical.png b/doc/qtcreator/images/icons/center-vertical.png
new file mode 100644
index 0000000000..b3be303723
--- /dev/null
+++ b/doc/qtcreator/images/icons/center-vertical.png
diff --git a/doc/qtcreator/images/icons/distribute-bottom.png b/doc/qtcreator/images/icons/distribute-bottom.png
new file mode 100644
index 0000000000..dccb5b535a
--- /dev/null
+++ b/doc/qtcreator/images/icons/distribute-bottom.png
diff --git a/doc/qtcreator/images/icons/distribute-center-horizontal.png b/doc/qtcreator/images/icons/distribute-center-horizontal.png
new file mode 100644
index 0000000000..5ad6d0dff9
--- /dev/null
+++ b/doc/qtcreator/images/icons/distribute-center-horizontal.png
diff --git a/doc/qtcreator/images/icons/distribute-center-vertical.png b/doc/qtcreator/images/icons/distribute-center-vertical.png
new file mode 100644
index 0000000000..1b6cc09588
--- /dev/null
+++ b/doc/qtcreator/images/icons/distribute-center-vertical.png
diff --git a/doc/qtcreator/images/icons/distribute-left.png b/doc/qtcreator/images/icons/distribute-left.png
new file mode 100644
index 0000000000..92ce603cac
--- /dev/null
+++ b/doc/qtcreator/images/icons/distribute-left.png
diff --git a/doc/qtcreator/images/icons/distribute-origin-bottom-right.png b/doc/qtcreator/images/icons/distribute-origin-bottom-right.png
new file mode 100644
index 0000000000..ed67922959
--- /dev/null
+++ b/doc/qtcreator/images/icons/distribute-origin-bottom-right.png
diff --git a/doc/qtcreator/images/icons/distribute-origin-center.png b/doc/qtcreator/images/icons/distribute-origin-center.png
new file mode 100644
index 0000000000..391d3d640f
--- /dev/null
+++ b/doc/qtcreator/images/icons/distribute-origin-center.png
diff --git a/doc/qtcreator/images/icons/distribute-origin-none.png b/doc/qtcreator/images/icons/distribute-origin-none.png
index 349f40ca26..c496655961 100644
--- a/doc/qtcreator/images/icons/distribute-origin-none.png
+++ b/doc/qtcreator/images/icons/distribute-origin-none.png
diff --git a/doc/qtcreator/images/icons/distribute-origin-top-left.png b/doc/qtcreator/images/icons/distribute-origin-top-left.png
new file mode 100644
index 0000000000..3f20b449b5
--- /dev/null
+++ b/doc/qtcreator/images/icons/distribute-origin-top-left.png
diff --git a/doc/qtcreator/images/icons/distribute-right.png b/doc/qtcreator/images/icons/distribute-right.png
new file mode 100644
index 0000000000..5452794740
--- /dev/null
+++ b/doc/qtcreator/images/icons/distribute-right.png
diff --git a/doc/qtcreator/images/icons/distribute-spacing-horizontal.png b/doc/qtcreator/images/icons/distribute-spacing-horizontal.png
new file mode 100644
index 0000000000..a416a9f8d2
--- /dev/null
+++ b/doc/qtcreator/images/icons/distribute-spacing-horizontal.png
diff --git a/doc/qtcreator/images/icons/distribute-spacing-vertical.png b/doc/qtcreator/images/icons/distribute-spacing-vertical.png
new file mode 100644
index 0000000000..bd1fb1a21e
--- /dev/null
+++ b/doc/qtcreator/images/icons/distribute-spacing-vertical.png
diff --git a/doc/qtcreator/images/icons/distribute-top.png b/doc/qtcreator/images/icons/distribute-top.png
new file mode 100644
index 0000000000..7f2e574907
--- /dev/null
+++ b/doc/qtcreator/images/icons/distribute-top.png
diff --git a/doc/qtcreator/images/qmldesigner-alignment.png b/doc/qtcreator/images/qmldesigner-alignment.png
index e6c6468a98..70ad846850 100644
--- a/doc/qtcreator/images/qmldesigner-alignment.png
+++ b/doc/qtcreator/images/qmldesigner-alignment.png
diff --git a/doc/qtcreator/images/qmldesigner-anchor-buttons.png b/doc/qtcreator/images/qmldesigner-anchor-buttons.png
index 4e7e8a2fed..28d23271d4 100644
--- a/doc/qtcreator/images/qmldesigner-anchor-buttons.png
+++ b/doc/qtcreator/images/qmldesigner-anchor-buttons.png
diff --git a/doc/qtcreator/images/qmldesigner-anchors.png b/doc/qtcreator/images/qmldesigner-anchors.png
index 6d33d22252..3b4d7d632d 100644
--- a/doc/qtcreator/images/qmldesigner-anchors.png
+++ b/doc/qtcreator/images/qmldesigner-anchors.png
diff --git a/doc/qtcreator/images/qmldesigner-binding-editor.png b/doc/qtcreator/images/qmldesigner-binding-editor.png
index 0ffb326628..35bcb93b13 100644
--- a/doc/qtcreator/images/qmldesigner-binding-editor.png
+++ b/doc/qtcreator/images/qmldesigner-binding-editor.png
diff --git a/doc/qtcreator/images/qmldesigner-distribute-objects.png b/doc/qtcreator/images/qmldesigner-distribute-objects.png
deleted file mode 100644
index b7e036ba4b..0000000000
--- a/doc/qtcreator/images/qmldesigner-distribute-objects.png
+++ /dev/null
diff --git a/doc/qtcreator/images/qmldesigner-distribute-spacing-evenly.png b/doc/qtcreator/images/qmldesigner-distribute-spacing-evenly.png
deleted file mode 100644
index 937d77f679..0000000000
--- a/doc/qtcreator/images/qmldesigner-distribute-spacing-evenly.png
+++ /dev/null
diff --git a/doc/qtcreator/images/qmldesigner-distribute-spacing-pixels.png b/doc/qtcreator/images/qmldesigner-distribute-spacing-pixels.png
deleted file mode 100644
index d6f690affe..0000000000
--- a/doc/qtcreator/images/qmldesigner-distribute-spacing-pixels.png
+++ /dev/null
diff --git a/doc/qtcreator/images/qmldesigner-set-expression.png b/doc/qtcreator/images/qmldesigner-set-expression.png
index bdf0f24af9..a6a507a6f1 100644
--- a/doc/qtcreator/images/qmldesigner-set-expression.png
+++ b/doc/qtcreator/images/qmldesigner-set-expression.png
diff --git a/doc/qtcreator/images/qtquick-layout-grid-properties.png b/doc/qtcreator/images/qtquick-layout-grid-properties.png
index e6f85801d2..2a6d744f73 100644
--- a/doc/qtcreator/images/qtquick-layout-grid-properties.png
+++ b/doc/qtcreator/images/qtquick-layout-grid-properties.png
diff --git a/doc/qtcreator/images/qtquick-positioner-column-properties.png b/doc/qtcreator/images/qtquick-positioner-column-properties.png
index 2e9872a5dd..b025b5fe58 100644
--- a/doc/qtcreator/images/qtquick-positioner-column-properties.png
+++ b/doc/qtcreator/images/qtquick-positioner-column-properties.png
diff --git a/doc/qtcreator/images/qtquick-positioner-flow-properties.png b/doc/qtcreator/images/qtquick-positioner-flow-properties.png
index f1cc10552b..c027a81817 100644
--- a/doc/qtcreator/images/qtquick-positioner-flow-properties.png
+++ b/doc/qtcreator/images/qtquick-positioner-flow-properties.png
diff --git a/doc/qtcreator/images/qtquick-positioner-grid-properties.png b/doc/qtcreator/images/qtquick-positioner-grid-properties.png
index 4427a11ccc..4588e39a23 100644
--- a/doc/qtcreator/images/qtquick-positioner-grid-properties.png
+++ b/doc/qtcreator/images/qtquick-positioner-grid-properties.png
diff --git a/doc/qtcreator/src/qtquick/qtquick-positioning.qdoc b/doc/qtcreator/src/qtquick/qtquick-positioning.qdoc
index ad593ec587..3dc0d3cbe6 100644
--- a/doc/qtcreator/src/qtquick/qtquick-positioning.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-positioning.qdoc
@@ -81,7 +81,8 @@
     string and press \key Ctrl+Space to display a list of properties, IDs, and
     code snippets. When you enter a period (.) after a property name, a list of
     available values is displayed. Press \key Enter to accept the first
-    suggestion in the list and to complete the code.
+    suggestion in the list and to complete the code. For more information, see
+    \l{Completing Code}.
 
     When a binding is set, the \uicontrol Actions menu icon changes to
     \inlineimage icons/action-icon-binding
@@ -135,21 +136,21 @@
     \c {anchor.left: sibling.right}. This allows you to keep sibling components
     together.
 
-    In the following image, \uicontrol{Rectangle 2} is anchored to
-    \uicontrol {Rectangle 1} on its left and to the bottom of its parent.
+    In the following image, the left edge of \e rectangle1 is anchored to the
+    right edge of the sibling on its left side, \e rectangle, while its top
+    edge is anchored to the top of its parent.
 
     \image qmldesigner-anchors.png "Anchoring sibling components"
 
-    The anchors for \uicontrol{Rectangle 2} are specified as follows in code:
+    The anchors are specified as follows in code:
 
     \qml
     Rectangle {
-        id: rectangle2
-        anchors.left: rectangle1.right
-        anchors.leftMargin: 78
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 200
-        //
+        id: rectangle1
+        anchors.left: rectangle.right
+        anchors.top: parent.top
+        anchors.leftMargin: 5
+        anchors.topMargin: 30
     }
     \endqml
 
@@ -167,11 +168,11 @@
 
     \image qmldesigner-alignment.png "Aligning sibling components"
 
-    Select the buttons in the \uicontrol Align group to align the top/bottom
-    or left/right edges of the components in the group to the one farthest away
+    Select the buttons in the \uicontrol Alignment field to align the top/bottom
+    or left/right edges of a group of components to the one farthest away
     from the center of the group. For example, when left-aligning, the
     components are aligned to the leftmost component. You can also align the
-    horizontal/vertical centers of components, or both, as in the image above.
+    horizontal/vertical centers of components, or both.
 
     In the \uicontrol {Align to} field, select whether to align the components
     in respect to the selection, the root component, or a \e {key component}
@@ -185,33 +186,105 @@
     values possible or tweak your design so that the components and spacing
     can be distributed perfectly.
 
-    When distributing components, you can select whether the distance between
-    them is calculated from their top/bottom or left/right edges or their
-    horizontal/vertical center.
+    When distributing components, select the buttons in the
+    \uicontrol {Distribute objects} field to determine whether the
+    distance between components is calculated from their top/bottom
+    or left/right edges or their horizontal/vertical center.
 
-    \image qmldesigner-distribute-objects.png "Distribute components buttons"
-
-    You can distribute spacing either evenly within a target area or at
+    When distributing spacing, select the buttons in the
+    \uicontrol {Distribute spacing} field to determine whether
+    it is distributed evenly within a target area or at
     specified distances, calculated from a starting point.
 
     You can select the orientation in which the components are distributed
     evenly within the target area: horizontally along the x axis or vertically
     along the y axis.
 
-    \image qmldesigner-distribute-spacing-evenly.png "Distribute spacing evenly"
-
     Alternatively, you can distribute spacing in pixels by selecting one of the
-    starting point buttons: left/right or top/bottom edge of the target area,
-    or its horizontal/vertical center. Note that some components might end up
-    outside the target area.
+    starting point buttons: top-left or bottom-right edge of the target area,
+    or its center. Note that some components might end up outside the target
+    area.
 
-    \image qmldesigner-distribute-spacing-pixels.png "Distribute spacing in pixels"
-
-    You can set the space between components in pixels. You can
-    disable the distribution of spacing in pixels by clicking
-    the \inlineimage icons/distribute-origin-none.png
+    In the \uicontrol {Pixel spacing} field, you can set the space between
+    components in pixels. You can disable the distribution of spacing in
+    pixels by clicking the \inlineimage icons/distribute-origin-none.png
     button.
 
+    \section3 Summary of Aligment Buttons
+
+    The following table summarizes the buttons available in the
+    \uicontrol Alignment section.
+
+    \table
+    \header
+        \li Icon
+        \li Purpose
+    \row
+        \li \inlineimage icons/align-left.png
+        \li Aligns the left edges of the selected components to the one
+            farthest away from the center of the group.
+    \row
+        \li \inlineimage icons/align-center-horizontal.png
+        \li Aligns the horizontal centers of the selected components.
+    \row
+        \li \inlineimage icons/align-right.png
+        \li Aligns the right edges of the selected components.
+    \row
+        \li \inlineimage icons/align-top.png
+        \li Aligns the top edges of the selected components.
+    \row
+        \li \inlineimage icons/align-center-vertical.png
+        \li Aligns the verical centers of the selected components.
+    \row
+        \li \inlineimage icons/align-bottom.png
+        \li Aligns the bottom edges of the selected components.
+    \row
+        \li \inlineimage icons/distribute-left.png
+        \li Distributes the selected components and calculates the distance
+            between them from their left edges.
+    \row
+        \li \inlineimage icons/distribute-center-horizontal.png
+        \li Distributes the selected components and calculates the distance
+            between them from their horizontal centers.
+    \row
+        \li \inlineimage icons/distribute-right.png
+        \li Distributes the selected components and calculates the distance
+            between them from their right edges.
+    \row
+        \li \inlineimage icons/distribute-top.png
+        \li Distributes the selected components and calculates the distance
+            between them from their top edges.
+    \row
+        \li \inlineimage icons/distribute-center-vertical.png
+        \li Distributes the selected components and calculates the distance
+            between them from their vertical centers.
+    \row
+        \li \inlineimage icons/distribute-bottom.png
+        \li Distributes the selected components and calculates the distance
+            between them from their bottom edges.
+    \row
+        \li \inlineimage icons/distribute-spacing-horizontal.png
+        \li Distributes spacing between the selected components horizontally.
+    \row
+        \li \inlineimage icons/distribute-spacing-vertical.png
+        \li Distributes spacing between the selected components vertically.
+    \row
+        \li \inlineimage icons/distribute-origin-none.png
+        \li Disables the distribution of spacing in pixels.
+    \row
+        \li \inlineimage icons/distribute-origin-top-left.png
+        \li Sets the top-left corner of the target area as the starting point
+            for distributing spacing in pixels.
+    \row
+        \li \inlineimage icons/distribute-origin-center.png
+        \li Sets the center of the target area as the starting point
+            for distributing spacing in pixels.
+    \row
+        \li \inlineimage icons/distribute-origin-bottom-right.png
+        \li Sets the bottom-right corner of the target area as the starting
+            point for distributing spacing in pixels.
+    \endtable
+
     \section2 Using Positioners
 
     Positioner components are containers that manage the positions of their
@@ -239,7 +312,7 @@
 
     In addition, you can specify the vertical and horizontal padding between
     content and the left, right, top, and bottom edges of components as values
-    of the fields in the \uicontrol Padding group.
+    of the fields in the \l Padding section.
 
     \section3 Row and Flow Positioners
 
@@ -256,7 +329,8 @@
     either left-to-right or top-to-bottom in the \uicontrol Flow field.
     Components are positioned next to to each other according to the value you
     set in the \uicontrol {Layout direction} field until the width or height of
-    the Flow component is exceeded, then wrapped to the next row or column.
+    the \uicontrol Flow component is exceeded, then wrapped to the next row or
+    column.
 
     You can set the layout direction to either \uicontrol LeftToRight or
     \uicontrol RightToLeft in the \uicontrol {Layout direction} field. If
@@ -284,7 +358,7 @@
 
     To mirror the layout, set the layout direction to \uicontrol RightToLeft.
     To also mirror the horizontal alignment of components, select
-    \uicontrol AlignRight in the \uicontrol {Horizontal item alignment} field.
+    \uicontrol AlignRight in the \uicontrol {Alignment H} field.
 
     \section3 Summary of Positioners
 
@@ -328,8 +402,8 @@
     Unlike positioners, layouts manage both the positions and sizes of their
     child components, and are therefore well suited for dynamic and resizable
     UIs. However, this means that you should not specify fixed positions and
-    sizes for the child components in the \l{2D Geometry}{Geometry} group in
-    \l Properties, unless their implicit sizes are not satisfactory.
+    sizes for the child components in the \l{2D Geometry}{Geometry - 2D} section
+    in \l Properties, unless their implicit sizes are not satisfactory.
 
     You can use anchors or the width and height properties of the layout itself
     to specify its size in respect to its non-layout parent component. However,
@@ -367,14 +441,16 @@
     The child components of grid layout components are arranged according to the
     \uicontrol Flow property. When the direction of a flow is set to
     \uicontrol LeftToRight, child components are positioned next to to each
-    other until the the number of \uicontrol Columns is reached. Then,
+    other until the the number of columns specified in the
+    \uicontrol {Columns & Rows} field is reached. Then,
     the auto-positioning wraps back to the beginning of the next row.
 
     \image qtquick-layout-grid-properties.png "Grid Layout properties"
 
     If you set the direction of the flow to \uicontrol TopToBottom, child
-    components are auto-positioned vertically using the value of the
-    \uicontrol Rows field to determine the maximum number of rows.
+    components are auto-positioned vertically using the number of rows set
+    in the \uicontrol {Columns & Rows} field to determine the maximum number
+    of rows.
 
     You can set the layout direction to either \uicontrol LeftToRight or
     \uicontrol RightToLeft in the \uicontrol {Layout direction} field.
@@ -382,7 +458,7 @@
     will be mirrored.
 
     You can specify the spacing between rows and columns in the
-    \uicontrol {Row spacing} and \uicontrol {Column spacing} fields.
+    \uicontrol Spacing field.
 
     \section3 Stack Layout