Add an Android TimePickerDialog how-to

This is a highly requested control, yet its implementation varies
greatly between devices and platforms. Rather than try to implement
an API and UI that fits every use case (and implement whatever
infrastructure may be required for offering separate mobile and
desktop controls), offer a specialized example: an Android time picker.

The goal is to provide a set of QML files that users can simply copy
into their projects.

The screenshots were taken of the whole window on a MacBook whose
display DPR is 2, and then adapted with the following commands:

    convert uncropped-light.png -crop 870x1030+280+220 how-to-time-picker-light.png
    convert uncropped-dark.png -crop 870x1030+280+220 how-to-time-picker-dark.png
    mogrify -resize 50% how-to-time-picker-*.png
    find . -name "how-to-time-picker-*.png" -exec optipng -o 7 -strip all {} \;

Task-number: QTBUG-51167
Task-number: QTBUG-109634
Pick-to: 6.5
Change-Id: Ie11913ba4a83673d7c2467066d9cfef772055c1d
Reviewed-by: Jan Arve Sæther <jan-arve.saether@qt.io>

3 files changed, 19 insertions, 0 deletions

diff --git a/src/quick/doc/images/how-to-time-picker-dark.png b/src/quick/doc/images/how-to-time-picker-dark.png
new file mode 100644
index 0000000000..87fa6bd2cd
--- /dev/null
+++ b/src/quick/doc/images/how-to-time-picker-dark.png
diff --git a/src/quick/doc/images/how-to-time-picker-light.png b/src/quick/doc/images/how-to-time-picker-light.png
new file mode 100644
index 0000000000..6eb1aba2ef
--- /dev/null
+++ b/src/quick/doc/images/how-to-time-picker-light.png
diff --git a/src/quick/doc/src/qtquick-how-tos.qdoc b/src/quick/doc/src/qtquick-how-tos.qdoc
index cbf0de2287..ced360de6a 100644
--- a/src/quick/doc/src/qtquick-how-tos.qdoc
+++ b/src/quick/doc/src/qtquick-how-tos.qdoc
@@ -16,6 +16,7 @@
     \list
     \li \l {Call a C++ function from QML when a Button is clicked}
     \li \l {See which item has active focus}
+    \li \l {Create a time picker like Android's TimePickerDialog}
     \endlist
 
 
@@ -54,4 +55,22 @@
     This will print the item which currently has active focus to the console.
     To ensure that the output is useful, give each item a descriptive
     \l {QtObject::}{objectName}.
+
+
+    \section1 Create a time picker like Android's TimePickerDialog
+
+    We've prepared an example that consists of a few
+    \l {https://code.qt.io/cgit/qt/qtdeclarative.git/tree/tests/auto/quick/doc/how-tos/how-to-qml/time-picker/TimeComponentLabel.qml?h=\QtMajorVersion.\QtMinorVersion}
+    {QML files} which demonstrate how to do this. They can be used
+    in your application in the following manner:
+
+    \snippet how-tos/how-to-qml/time-picker/TimePickerMain.qml file
+
+    \table
+        \row
+            \li \image how-to-time-picker-light.png
+                \caption TimePickerDialog in its light theme.
+            \li \image how-to-time-picker-dark.png
+                \caption TimePickerDialog in its dark theme.
+    \endtable
 */