Doc: Add GIF images of custom controls generated by QDS wizards

Fix the location of the controls in Library.

Fixes: QDS-4379
Change-Id: I998950722d1068fd5eadc974664bf8f8d759f8f6
Reviewed-by: Johanna Vanhatapio <johanna.vanhatapio@qt.io>

doc/qtcreator/src/qtquick/library/qtquick-controls.qdoc

@@ -33,7 +33,7 @@
     You can create instances of preset UI controls to inform users about
     the progress of the application or to gather input from users. They are
     available in \l Library > \uicontrol Components >
-    \uicontrol {Qt Quick Controls}.
+    \uicontrol {Qt Quick Controls} > \uicontrol Controls.
 
     \image qtquick-designer-qtquickcontrols-types.png "Qt Quick Controls components in Library"
 
@@ -111,9 +111,19 @@
 
     \section2 Button
 
-    \image qtquickcontrols2-button.gif "Button"
+    You can create an instance of \l Library > \uicontrol Components >
+    \uicontrol {Qt Quick Controls} > \uicontrol Controls > \uicontrol Button:
 
-    \uicontrol Button can be pushed or clicked by users. Typically, buttons
+    \image qtquickcontrols2-button.gif "Qt Quick Controls - Button"
+
+    \if defined(qtdesignstudio)
+    Alternatively, you can use a wizard to create a \l{Creating Custom Controls}
+    {custom button}:
+
+    \image studio-custom-button.gif "Custom button"
+    \endif
+
+    A button can be pushed or clicked by users. Typically, buttons
     are used to perform an action or to answer a question. For example, \e OK,
     \e Apply, \e Cancel, \e Close, \e Yes, \e No, and \e Help.
 
@@ -155,9 +165,20 @@
 
     \section2 Check Box
 
-    \image qtquickcontrols2-checkbox.gif "Check box"
+    You can create instances of \l Library > \uicontrol Components >
+    \uicontrol {Qt Quick Controls} > \uicontrol Controls >
+    \uicontrol {Check Box}:
 
-    \uicontrol {Check Box} presents an option button that can be toggled on
+    \image qtquickcontrols2-checkbox.gif "Check boxes"
+
+    \if defined(qtdesignstudio)
+    Alternatively, you can use a wizard to create \l{Creating Custom Controls}
+    {custom check boxes}:
+
+    \image studio-custom-check-box.gif "Custom check boxes"
+    \endif
+
+    A check box presents an option button that can be toggled on
     (checked) or off (unchecked). Check boxes are typically used to select
     one or more options from a set of options. For larger sets of options,
     such as those in a list, consider using \uicontrol {Check Delegate} instead.
@@ -225,9 +246,19 @@
 
     \section2 Switch
 
+    You can create an instance of \l Library > \uicontrol Components >
+    \uicontrol {Qt Quick Controls} > \uicontrol Controls > \uicontrol Switch:
+
     \image qtquickcontrols2-switch.gif "Switch"
 
-    \uicontrol Switch is an option button that can be dragged or toggled on
+    \if defined(qtdesignstudio)
+    Alternatively, you can use a wizard to create a \l{Creating Custom Controls}
+    {custom switch}:
+
+    \image studio-custom-switch.gif "Custom switch"
+    \endif
+
+    A switch is an option button that can be dragged or toggled on
     (checked) or off (unchecked). Switches are typically used to select between
     two states: \e on or \e off. For larger sets of options, such as those in a
     list, consider using \uicontrol {Switch Delegate} instead.
@@ -370,9 +401,19 @@
     \target slider-control
     \section2 Slider and Dial
 
+    You can create an instance of \l Library > \uicontrol Components >
+    \uicontrol {Qt Quick Controls} > \uicontrol Controls > \uicontrol Slider:
+
     \image qtquickcontrols2-slider.gif "Slider"
 
-    \uicontrol Slider is used to select a value by sliding a handle along a
+    \if defined(qtdesignstudio)
+    Alternatively, you can use a wizard to create a \l{Creating Custom Controls}
+    {custom slider}:
+
+    \image studio-custom-slider.gif "Custom slider"
+    \endif
+
+    A slider is used to select a value by sliding a handle along a
     track, whereas \uicontrol {Range Slider} is used to select a range
     specified by two values, by sliding each handle along a track.
 
@@ -382,8 +423,18 @@
     devices such as stereos or industrial equipment. It allows users to
     specify a value within a range.
 
+    You can create an instance of \l Library > \uicontrol Components >
+    \uicontrol {Qt Quick Controls} > \uicontrol Controls > \uicontrol Dial:
+
     \image qtquickcontrols2-dial-no-wrap.gif "Dial"
 
+    \if defined(qtdesignstudio)
+    Alternatively, you can use a wizard to create a \l{Creating Custom Controls}
+    {custom dial}:
+
+    \image studio-custom-dial.gif "Custom dial"
+    \endif
+
     In the \uicontrol From and \uicontrol To fields, set the range of the
     slider or dial. Set the value of the slide handle or dial in the
     \uicontrol Value field. For a range slider, set the initial positions
@@ -424,9 +475,20 @@
 
     \section2 Spin Box
 
+    You can create an instance of \l Library > \uicontrol Components >
+    \uicontrol {Qt Quick Controls} > \uicontrol Controls >
+    \uicontrol {Spin Box}:
+
     \image qtquickcontrols2-spinbox.png "Spin Box"
 
-    \uicontrol {Spin box} enables users to choose an integer value by clicking
+    \if defined(qtdesignstudio)
+    Alternatively, you can use a wizard to create a \l{Creating Custom Controls}
+    {custom spin box}:
+
+    \image studio-custom-spinbox.gif "Custom spin box"
+    \endif
+
+    A spin box enables users to choose an integer value by clicking
     the up or down indicator buttons, or by pressing up or down on the keyboard.
     Select the \uicontrol Editable check box to enable users to enter a text
     value in the input field.
@@ -549,7 +611,7 @@
 
     \section1 Styling Controls
 
-    The UI controls can be \l {Styling Qt Quick Controls}{styled}.
+    The preset UI controls can be \l {Styling Qt Quick Controls}{styled}.
     \uicontrol {Form Editor} reads the preferred style from a
     configuration file (\c qtquickcontrols2.conf). To change the
     style, select another style from the list on the main toolbar. This
@@ -593,8 +655,8 @@
 
     The following table lists preset UI controls with links to their developer
     documentation. They are available in \l Library > \uicontrol Components >
-    \uicontrol {Qt Quick Controls}. The \e MCU column indicates which controls
+    \uicontrol {Qt Quick Controls} > \uicontrol Controls. The \e MCU column
-    are supported on MCUs.
+    indicates which controls are supported on MCUs.
 
     \table
     \header

doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc

@@ -30,22 +30,29 @@
     You can use project wizard templates to create stylable UI controls based
     on the components in the Qt Quick Controls module:
 
-    \list
+    \table
+    \row
         \li \l Button
         \li \l {Check Box}
         \li \l {Slider and Dial}{Dial}
+    \row
+        \li \inlineimage studio-custom-button.gif
+        \li \inlineimage studio-custom-check-box.gif
+        \li \inlineimage studio-custom-dial.gif
+    \row
         \li \l {Slider and Dial}{Slider}
         \li \l {Spin Box}
         \li \l Switch
-        \li \l [QtQuickControls2] {Pane}
+    \row
-        \li \l {Stack Layout}
+        \li \inlineimage studio-custom-slider.gif
-        \li \l [QtQuickControls2] {SwipeView}{Swipe View}
+        \li \inlineimage studio-custom-spinbox.gif
-    \endlist
+        \li \inlineimage studio-custom-switch.gif
+    \endtable
 
     You can edit the properties of the controls in all the preset
     \l{Adding States}{states} to apply your own style to them.
 
-    \image studio-dial.png "A stylable Dial component"
+    \image studio-dial.png "A stylable Dial component in Form Editor"
 
     To create stylable UI controls:
 
@@ -68,5 +75,13 @@
     and styling it, see \l{Creating a Push Button} in the \l{Log In UI - Part 1}
     tutorial.
 
+    In addition, you can create starting points for different types of screens:
+
+    \list
+        \li \l [QtQuickControls2] {Pane}
+        \li \l {Stack Layout}
+        \li \l [QtQuickControls2] {SwipeView}{Swipe View}
+    \endlist
+
 //! [creating studio components]
 */