Doc: Update info about QML types supported by Qt Quick Designer

Update screenshots.

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

doc/qtcreator/src/qtquick/qtquick-components.qdoc

@@ -51,14 +51,15 @@
 
     \image qmldesigner-qml-components.png "QML Components"
 
-    The \uicontrol {QML Types} tab displays the QML types grouped by category:
+    The \uicontrol {QML Types} tab displays the QML types grouped by category,
-    your own QML components, basic types, layouts, positioner types, and views.
+    such as your own QML components, basic types, layouts, positioner types, and
+    views.
 
     Sets of UI components with the look and feel of a particular mobile device
     platform have been defined for Qt Quick 1. Since Qt 5.1, ready-made Qt
     Quick Controls, Dialogs, and Layouts are available for creating user
     interfaces using Qt Quick 2. The components and controls are based on
-    standard QML types. To view the components and controls in the
+    standard QML types. To view the components and controls in
     \uicontrol {Library}, import the component sets in \uicontrol {QML Imports}.
 
     The \uicontrol {Qt Quick Application} wizards for a particular platform add
@@ -70,21 +71,23 @@
 
     \section1 Adding Components to Designs
 
-    \image studio-design-mode.png "Design mode"
+    \image qmldesigner-editing-components.png "Editing QML components in Design mode"
 
     \list 1
-        \li Drag and drop components from the \uicontrol Library (2) to the
+        \li Drag and drop components from \uicontrol Library (1) to
-            \uicontrol Navigator (3) or \uicontrol {Form Editor} (1).
+            \uicontrol Navigator (2) or \uicontrol {Form Editor} (3).
-        \li Select components in the \uicontrol Navigator to edit their
+        \li Select components in \uicontrol Navigator to edit their
-            properties in the \uicontrol Properties view (4). For more
+            properties in \uicontrol Properties.
-            information, see \l {Specifying Item Properties}.
+            \image qmldesigner-properties-view.png "Properties view"
+            For more information, see \l {Specifying Item Properties}.
         \li Connect components to signals or create bindings between components
-            in the \uicontrol Connections view (5). For more information, see
+            in the \uicontrol Connections view.
-            \l{Adding Connections}.
+            \image qmldesigner-bindings.png "Connections view Bindings tab"
+            For more information, see \l{Adding Connections}.
         \li Add states to apply sets of changes to the properties of one or
-            several components in the \uicontrol States view (6). For more
+            several components in the \uicontrol States view.
-            information, see \l{Adding States}.
+            For more information, see \l{Adding States}.
-        \li Animate component properties in the \uicontrol Timeline view (7).
+        \li Animate component properties in the \uicontrol Timeline view.
             For more information, see \l{Creating Animations}.
     \endlist
 
@@ -136,12 +139,12 @@
     When you add a \l{GridView}{Grid View}, \l{ListView}{List View}, or
     \l{PathView}{Path View}, the ListModel and the delegate component that
     creates an instance for each item in the model are added automatically.
-    You can edit item properties in the \uicontrol Properties view or
+    You can edit item properties in \uicontrol Properties or in
-    in the \uicontrol {Text Editor}. You can also replace the default model and
+    \uicontrol {Text Editor}. You can also replace the default model and
-    delegate with other, more complex models and delegates in the
+    delegate with other, more complex models and delegates in
     \uicontrol {Text Editor}. \l{ItemDelegate}{Item Delegate} and
     \l{SwipeDelegate}{Swipe Delegate} delegate components are also available
-    in the \uicontrol Library.
+    in \uicontrol Library.
 
     \section1 Positioning Items in UIs
 
@@ -179,7 +182,7 @@
 
     \image qmldesigner-set-expression.png "Type properties context menu"
 
-    In the \uicontrol {Binding Editor}, select an item and a property from
+    In \uicontrol {Binding Editor}, select an item and a property from
     lists of available items and their properties.
 
     \image qmldesigner-binding-editor.png "Binding Editor"
@@ -192,7 +195,7 @@
 
     When a binding is set, the \uicontrol Actions menu icon changes to
     \inlineimage icons/action-icon-binding
-    . To remove bindings, select \uicontrol Reset in the \uicontrol Actions menu.
+    . To remove bindings, select \uicontrol Actions > \uicontrol Reset.
 
     You can set bindings also in the \uicontrol Connections view. For more
     information, see \l {Adding Bindings Between Properties}.
@@ -227,7 +230,7 @@
     (\uicontrol {Reset Anchors}) button to reset the anchors to their saved
     state.
 
-    You can specify the baseline anchor in the \uicontrol {Text Editor} in the
+    You can specify the baseline anchor in \uicontrol {Text Editor} in the
     Design mode.
 
     For performance reasons, you can only anchor an item to its siblings
@@ -340,8 +343,9 @@
     \endlist
 
     To position several items in a \uicontrol Column, \uicontrol Row,
-    \uicontrol Grid, or \uicontrol Flow, select the items on the canvas, and
+    \uicontrol Grid, or \uicontrol Flow, select the items in
-    then select \uicontrol Position in the context menu.
+    \uicontrol {Form Editor}, and then select \uicontrol Position in
+    the context menu.
 
     \section2 Using Layouts
 
@@ -353,8 +357,6 @@
     You can use the following layout types to arrange items in UIs:
 
     \list
-        \li \l{Layout} provides attached properties for items pushed onto a
-            column, row, or grid layout.
         \li \l{ColumnLayout}{Column Layout} provides a grid layout with only
             one column.
         \li \l{RowLayout}{Row Layout} provides a grid layout with only one row.
@@ -365,7 +367,7 @@
     \endlist
 
     To lay out several items in a column, row, grid, or
-    \uicontrol {Stack Layout}, select the items in the \uicontrol {Form Editor},
+    \uicontrol {Stack Layout}, select the items in \uicontrol {Form Editor},
     and then select \uicontrol Layout in the context menu.
 
     You can also click the \inlineimage column.png
@@ -374,9 +376,9 @@
     (\uicontrol {Grid Layout}) toolbar buttons to apply
     layouts to the selected items.
 
-    To make an item within a layout as wide as possible while respecting
+    To make an item within a layout as wide as possible while respecting the
-    the given constraints, select the item on the canvas and then select
+    given constraints, select the item in \uicontrol {Form Editor}, and then
-    \uicontrol Layout > \uicontrol {Fill Width} in the context menu. To
+    select \uicontrol Layout > \uicontrol {Fill Width} in the context menu. To
     make the item as high as possible, select \uicontrol {Fill Height}.
 
     \section2 Editing Stack Layouts
@@ -385,7 +387,7 @@
 
     To add items to a \uicontrol {Stack Layout}, select the
     \inlineimage plus.png
-    button next to the type name in the \uicontrol {Form Editor}. To move
+    button next to the type name in \uicontrol {Form Editor}. To move
     between items, select the \inlineimage prev.png
     (\uicontrol Previous) and \inlineimage next.png
     (\uicontrol Next) buttons.
@@ -550,22 +552,22 @@
             \endif
             \uicontrol Choose to create a new .qml file.
 
-            \note Components are listed in the \uicontrol {QML Components} section of
+            \note Components are listed in the \uicontrol {My QML Components}
-            the \uicontrol Library only if the filename begins with a capital
+            tab in the \uicontrol Library view only if the filename begins with
-            letter.
+            a capital letter.
 
         \li Click \uicontrol Design to open the .qml file in the Design mode.
 
-        \li Drag and drop a QML type from the \uicontrol Library to the
+        \li Drag and drop a QML type from \uicontrol Library to
             \uicontrol Navigator or \uicontrol {Form Editor}.
 
-        \li Edit its properties in the \uicontrol Properties view.
+        \li Edit its properties in \uicontrol Properties.
 
             The available properties depend on the QML type.
 
     \endlist
 
-    The following sections contain more information about how to use the
+    The following sections contain more information about how to use
     \uicontrol {Form Editor} to edit 2D content, as well as examples of
     how to create some common components using basic QML types:
 
@@ -582,10 +584,11 @@
     \section1 Moving Within Components
 
     Components can consist of several other components. To view the component
-    hierarchy as a bread crumb path when you edit a component on the canvas,
+    hierarchy as a bread crumb path when you edit a component in
-    select \uicontrol {Go into Component} or press \key F2. Click the component
+    \uicontrol {Form Editor}, select \uicontrol {Go into Component} or press
-    names in the path to navigate to them. You can easily navigate back to the
+    \key F2. Click the component names in the path to navigate to them. You
-    top level when you are done editing the component.
+    can easily navigate back to the top level when you are done editing the
+    component.
 
     \image qmldesigner-breadcrumbs.png "Go into Component command"
 */

doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc

@@ -44,7 +44,7 @@
             independently of each other.
         \li \l Flipable provides a surface that can be flipped.
         \li \l Group provides an item with the size property.
-        \li \l Iso adds a container for an ISO 7000 icon.
+        \li \l {Iso}{Iso Icon} adds a container for an ISO 7000 icon.
         \li \l Pie adds a pie slice or a pie with a slice missing from it.
         \li \l Rectangle adds a rectangle with corners that you can shape
             independently of each other.
@@ -60,7 +60,8 @@
 
     You can use the project wizard to create a starting point for a custom
     \l [QtQuickControls2] {Button}, \l [QtQuickControls2] {Pane},
-    \l [QtQuickControls2] {StackView}{Stack View}, or
+    \l [QtQuickControls2] {StackLayout}{Stacked Layout},
+    \l [QtQuickControls2] {SwipeView}{Swipe View}, or
     \l [QtQuickControls2] {Switch}.
 
     \list 1
@@ -68,8 +69,8 @@
             \uicontrol {Files and Classes} > \uicontrol {Qt Quick Controls}.
         \li Select the control to create, and then select \uicontrol Choose.
 
-            \note Components are listed in the \uicontrol {QML Components}
+            \note Components are listed in the \uicontrol {My QML Components}
-            section of the \uicontrol Library only if the filename begins
+            tab of the \uicontrol Library only if the filename begins
             with a capital letter.
         \li Edit component properties in the \uicontrol Properties view.