Doc: Describe color and gradient pickers

Change-Id: I18f95377f29cabed5be309a04efcdd955e46ddd0
Reviewed-by: Brook Cronin <brook.cronin@qt.io>
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>

12 files changed, 34 insertions, 4 deletions

diff --git a/doc/images/qmldesigner-boolean-false-blue.png b/doc/images/qmldesigner-boolean-false-blue.png
index dd607f12b7..d894a530b2 100644
--- a/doc/images/qmldesigner-boolean-false-blue.png
+++ b/doc/images/qmldesigner-boolean-false-blue.png
diff --git a/doc/images/qmldesigner-boolean-false.png b/doc/images/qmldesigner-boolean-false.png
index 2210d905ff..57c05404ad 100644
--- a/doc/images/qmldesigner-boolean-false.png
+++ b/doc/images/qmldesigner-boolean-false.png
diff --git a/doc/images/qmldesigner-boolean-true-blue.png b/doc/images/qmldesigner-boolean-true-blue.png
index 7cf1cad420..69a4e38d7f 100644
--- a/doc/images/qmldesigner-boolean-true-blue.png
+++ b/doc/images/qmldesigner-boolean-true-blue.png
diff --git a/doc/images/qmldesigner-boolean-true.png b/doc/images/qmldesigner-boolean-true.png
index 8b5c4ddb01..5a29203db7 100644
--- a/doc/images/qmldesigner-boolean-true.png
+++ b/doc/images/qmldesigner-boolean-true.png
diff --git a/doc/images/qmldesigner-element-properties.png b/doc/images/qmldesigner-element-properties.png
index 76b4ca25ce..66f0fa2dd2 100644
--- a/doc/images/qmldesigner-element-properties.png
+++ b/doc/images/qmldesigner-element-properties.png
diff --git a/doc/images/qmldesigner-inline-editing.png b/doc/images/qmldesigner-inline-editing.png
index 79ca646077..e85c43c66f 100644
--- a/doc/images/qmldesigner-inline-editing.png
+++ b/doc/images/qmldesigner-inline-editing.png
diff --git a/doc/images/qmldesigner-properties-explicit-base.png b/doc/images/qmldesigner-properties-explicit-base.png
index e8f845dd22..9c4ce9eb62 100644
--- a/doc/images/qmldesigner-properties-explicit-base.png
+++ b/doc/images/qmldesigner-properties-explicit-base.png
diff --git a/doc/images/qmldesigner-properties-explicit-state1.png b/doc/images/qmldesigner-properties-explicit-state1.png
index 152c94297f..0137b7fdf9 100644
--- a/doc/images/qmldesigner-properties-explicit-state1.png
+++ b/doc/images/qmldesigner-properties-explicit-state1.png
diff --git a/doc/images/qmldesigner-text-property-tr.png b/doc/images/qmldesigner-text-property-tr.png
index 525dd0dc3b..4a80992c4f 100644
--- a/doc/images/qmldesigner-text-property-tr.png
+++ b/doc/images/qmldesigner-text-property-tr.png
diff --git a/doc/images/qtquick-designer-color-picker.png b/doc/images/qtquick-designer-color-picker.png
new file mode 100644
index 0000000000..d1b3b292f0
--- /dev/null
+++ b/doc/images/qtquick-designer-color-picker.png
diff --git a/doc/images/qtquick-designer-gradient-picker.png b/doc/images/qtquick-designer-gradient-picker.png
new file mode 100644
index 0000000000..56cadc4ecd
--- /dev/null
+++ b/doc/images/qtquick-designer-gradient-picker.png
diff --git a/doc/src/qtquick/qtquick-properties.qdoc b/doc/src/qtquick/qtquick-properties.qdoc
index 09191e7041..4218edb04a 100644
--- a/doc/src/qtquick/qtquick-properties.qdoc
+++ b/doc/src/qtquick/qtquick-properties.qdoc
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2018 The Qt Company Ltd.
+** Copyright (C) 2019 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Qt Creator documentation.
@@ -69,9 +69,6 @@
     To set the visibility of the item, select \uicontrol Edit >
     \uicontrol Visibility in the context menu.
 
-    To specify the color of the selected item in the \uicontrol {Select Color}
-    dialog, select \uicontrol {Edit Color} in the context menu.
-
     For more information on the properties available for an item, press
     \key {F1}.
 
@@ -126,6 +123,39 @@
             \li The type is explicitly set to hidden.
     \endtable
 
+    \section1 Picking Colors
+
+    To specify the color of the selected item in the color picker view (1),
+    select the color picker icon (2) in the \uicontrol Properties pane.
+
+    \image qtquick-designer-color-picker.png "Color Picker view"
+
+    You can use either a solid color (3) or a gradient (4). You can select the
+    gradient in the \uicontrol {Gradient Picker} (5).
+
+    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
+
+    The \uicontrol {Gradient Picker} enables you to specify
+    \l{https://webgradients.com/}{WebGradients} for QML types
+    that support \l QGradient.
+
+    To open the \uicontrol {Gradient Picker}, select the
+    \uicontrol {Gradient Picker Dialog} icon in the \uicontrol Properties view.
+
+    \image qtquick-designer-gradient-picker.png "Gradient Picker dialog"
+
+    To apply a gradient on the selected item, select \uicontrol Apply.
+
+    To save a gradient in the \uicontrol {User Presets} tab, select
+    \uicontrol Save.
+
+    By default, a linear gradient (4) is used, but you can select another
+    supported gradient type in the \uicontrol Properties view.
+
     \section1 Marking Text Items for Translation
 
     To support translators, mark each text item that should be translated.