Doc: Update information about using gradients

Describe setting properties for linear, radial, and conical
radients that are supported for Studio Components.

Add screenshots and a gif that illustrates adding and
removing gradient stops.

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

9 files changed, 73 insertions, 8 deletions

diff --git a/doc/qtcreator/images/qtquick-designer-color-picker.png b/doc/qtcreator/images/qtquick-designer-color-picker.png
index d5fe52a64f..d35f62e952 100644
--- a/doc/qtcreator/images/qtquick-designer-color-picker.png
+++ b/doc/qtcreator/images/qtquick-designer-color-picker.png
diff --git a/doc/qtcreator/images/qtquick-designer-gradient-properties-conical.png b/doc/qtcreator/images/qtquick-designer-gradient-properties-conical.png
new file mode 100644
index 0000000000..72dd3b3d26
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-designer-gradient-properties-conical.png
diff --git a/doc/qtcreator/images/qtquick-designer-gradient-properties-linear.png b/doc/qtcreator/images/qtquick-designer-gradient-properties-linear.png
new file mode 100644
index 0000000000..3a94f97b69
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-designer-gradient-properties-linear.png
diff --git a/doc/qtcreator/images/qtquick-designer-gradient-properties-radial.png b/doc/qtcreator/images/qtquick-designer-gradient-properties-radial.png
new file mode 100644
index 0000000000..10daa7fc43
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-designer-gradient-properties-radial.png
diff --git a/doc/qtcreator/images/qtquick-designer-gradient-stops.gif b/doc/qtcreator/images/qtquick-designer-gradient-stops.gif
new file mode 100644
index 0000000000..2153f3b019
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-designer-gradient-stops.gif
diff --git a/doc/qtcreator/images/qtquick-designer-gradient-types.png b/doc/qtcreator/images/qtquick-designer-gradient-types.png
new file mode 100644
index 0000000000..53ab8c9907
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-designer-gradient-types.png
diff --git a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc
index dd7f3cb2a0..5b69fc310e 100644
--- a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc
@@ -138,15 +138,77 @@
     You can use either a solid color (3) or a gradient (4). You can select the
     gradient in the \uicontrol {Gradient Picker} (5).
 
-    The gradient stops (6) specify the color used at a given position in a
-    gradient. Drag them along the slider to set their values.
-
     The \uicontrol Original field displays the original color of the item,
     whereas the \uicontrol New field displays the current color. The
     \uicontrol Recent field displays the colors that you have last selected.
 
     \section1 Picking Gradients
 
+    A gradient is defined by two or more colors, which will be blended
+    seamlessly. The colors are specified as a set of gradient stops,
+    each of which defines a position on the gradient bar from 0.0 to 1.0
+    and a color. Drag the gradient stops along the gradient bar to set their
+    values. Select the arrow below a gradient stop to see its value as
+    a number.
+
+    To add gradient stops, move the cursor over the gradient bar and point at
+    it with the finger-shaped cursor. To remove gradient stops, pull them away
+    from the gradient line.
+
+    \image qtquick-designer-gradient-stops.gif
+
+    Calculating gradients can be computationally expensive compared to the
+    use of solid color fills or images. Consider using gradients only for
+    static items in a UI.
+
+    \if defined(qtdesignstudio)
+    \section2 Setting Gradient Properties
+
+    Select the arrow below the gradient button to set gradient properties
+    for Studio Components.
+
+    \image qtquick-designer-gradient-types.png "Gradients supported by Studio Components"
+
+    \section3 Linear Gradients
+
+    A \e {linear gradient} interpolates colors between start and end points.
+    Outside these points, the gradient is either padded, reflected, or repeated
+    depending on the spread type. Set start and end points for horizontal and
+    vertical interpolation in the \uicontrol X1, \uicontrol X2, \uicontrol Y1,
+    and \uicontrol Y2 fields.
+
+    \image qtquick-designer-gradient-properties-linear.png "Linear gradient properties"
+
+    \section3 Radial Gradients
+
+    A \e {radial gradient} interpolates colors between a focal circle and a
+    center circle. Points outside the cone defined by the two circles will
+    be transparent. Outside the end points, the gradient is either padded,
+    reflected, or repeated depending on the spread type.
+
+    \image qtquick-designer-gradient-properties-radial.png "Radial gradient properties"
+
+    You can set the center and focal radius in the \uicontrol {Center radius}
+    and \uicontrol {Focal radius} fields. For simple radial gradients, set to
+    the focal radius to 0.
+
+    You can set the center and focal points in the \uicontrol CenterX,
+    \uicontrol CenterY, \uicontrol FocalX, and \uicontrol FocalY fields.
+    To specify a simple radial gradient, set the focal X and focal Y to
+    the value of center X and center Y, respectively.
+
+    \section3 Conical Gradients
+
+    A \e {conical gradient} interpolates colors counter-clockwise around a
+    center point. Set the horizontal and vertical center point of the gradient
+    in the \uicontrol CenterX and \uicontrol CenterY fields and the start angle
+    in the \uicontrol Angle field.
+
+    \image qtquick-designer-gradient-properties-conical.png "Conical gradient properties"
+    \endif
+
+    \section2 Selecting Web Gradients
+
     The \uicontrol {Gradient Picker} enables you to specify
     \l{https://webgradients.com/}{WebGradients} for QML types
     that support \l QGradient.
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png b/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png
index 40564fbb14..27c7a34dfd 100644
--- a/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png
+++ b/doc/qtdesignstudio/examples/doc/images/loginui1-background-gradient.png
diff --git a/doc/qtdesignstudio/examples/doc/loginui1.qdoc b/doc/qtdesignstudio/examples/doc/loginui1.qdoc
index 53e76feb66..f3bbd84369 100644
--- a/doc/qtdesignstudio/examples/doc/loginui1.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui1.qdoc
@@ -156,11 +156,14 @@
             properties in \uicontrol Properties.
         \li In the \uicontrol Color field, select the
             \inlineimage icon_color_gradient.png
-            (\uicontrol Gradient) button to add a linear gradient to the
-            screen background. In this example, the color changes from
-            white to green (#41cd52), with a stop point set at position 0.5.
-            You can use your favorite colors or select a predefined gradient
-            in the \uicontrol {Gradient Picker}.
+            (\uicontrol {Linear Gradient}) button to add a linear gradient to
+            the screen background. Click the start point (1) and end point (2)
+            to specify the gradient colors. Drag and drop the points along the
+            gradient bar to specify where the gradient starts and ends. In this
+            tutorial, the color changes from white to green (#41cd52), starting
+            mid-screen, at position 0.5. You can use your favorite colors or
+            select a predefined gradient in the \uicontrol {Gradient Picker}.
+            For more information, see \l{Picking Gradients}.
             \image loginui1-background-gradient.png "Rectangle color properties"
         \li Select \e Text in \uicontrol Navigator to display its properties in
             \uicontrol Properties.