Doc: reorganize the style images

Task-number: QTBUG-60995
Change-Id: I3083a7a2bb39d242f31a9c5d0bfed66dbdb88202
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

16 files changed, 40 insertions, 71 deletions

diff --git a/src/imports/controls/doc/images/qtquickcontrols2-default-thumbnail.png b/src/imports/controls/doc/images/qtquickcontrols2-default-thumbnail.png
new file mode 100644
index 00000000..5afcb6d7
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols2-default-thumbnail.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols2-material-dark.png b/src/imports/controls/doc/images/qtquickcontrols2-material-dark.png
index 8afb2cd6..eb0350dd 100644
--- a/src/imports/controls/doc/images/qtquickcontrols2-material-dark.png
+++ b/src/imports/controls/doc/images/qtquickcontrols2-material-dark.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols2-material-light.png b/src/imports/controls/doc/images/qtquickcontrols2-material-light.png
new file mode 100644
index 00000000..2635de68
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols2-material-light.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols2-material-purple.png b/src/imports/controls/doc/images/qtquickcontrols2-material-purple.png
new file mode 100644
index 00000000..8afb2cd6
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols2-material-purple.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols2-material-thumbnail.png b/src/imports/controls/doc/images/qtquickcontrols2-material-thumbnail.png
new file mode 100644
index 00000000..c1084673
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols2-material-thumbnail.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols2-material.png b/src/imports/controls/doc/images/qtquickcontrols2-material.png
deleted file mode 100644
index 4caef89e..00000000
--- a/src/imports/controls/doc/images/qtquickcontrols2-material.png
+++ /dev/null
diff --git a/src/imports/controls/doc/images/qtquickcontrols2-styles.png b/src/imports/controls/doc/images/qtquickcontrols2-styles.png
new file mode 100644
index 00000000..aae046fd
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols2-styles.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols2-universal-dark.png b/src/imports/controls/doc/images/qtquickcontrols2-universal-dark.png
index ec459457..2d6937c7 100644
--- a/src/imports/controls/doc/images/qtquickcontrols2-universal-dark.png
+++ b/src/imports/controls/doc/images/qtquickcontrols2-universal-dark.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols2-universal-light.png b/src/imports/controls/doc/images/qtquickcontrols2-universal-light.png
new file mode 100644
index 00000000..a6da6f7f
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols2-universal-light.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols2-universal-thumbnail.png b/src/imports/controls/doc/images/qtquickcontrols2-universal-thumbnail.png
new file mode 100644
index 00000000..a189ed72
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols2-universal-thumbnail.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols2-universal-violet.png b/src/imports/controls/doc/images/qtquickcontrols2-universal-violet.png
new file mode 100644
index 00000000..ec459457
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols2-universal-violet.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols2-universal.png b/src/imports/controls/doc/images/qtquickcontrols2-universal.png
deleted file mode 100644
index b50d9cca..00000000
--- a/src/imports/controls/doc/images/qtquickcontrols2-universal.png
+++ /dev/null
diff --git a/src/imports/controls/doc/src/qtquickcontrols2-index.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-index.qdoc
index 868e77e0..51d672f3 100644
--- a/src/imports/controls/doc/src/qtquickcontrols2-index.qdoc
+++ b/src/imports/controls/doc/src/qtquickcontrols2-index.qdoc
@@ -35,36 +35,11 @@
     to build complete interfaces in Qt Quick. The module was introduced
     in Qt 5.7.
 
+    \image qtquickcontrols2-styles.png
+
     Qt Quick Controls 2 comes with a selection customizable styles.
     See \l {Styling Qt Quick Controls 2} for more details.
 
-    \raw HTML
-    <table style="background:transparent; border:0px" width="66%">
-      <tr>
-        <td style="border:0px; padding-right:25px;">
-          <a href="qtquickcontrols2-default.html">
-            <img src="images/qtquickcontrols2-default.png" alt="Default" width="100%"/>
-          </a>
-        </td>
-        <td style="border:0px; padding-right:25px;">
-          <a href="qtquickcontrols2-material.html">
-            <img src="images/qtquickcontrols2-material.png" alt="Material" width="100%"/>
-          </a>
-        </td>
-        <td style="border:0px;">
-          <a href="qtquickcontrols2-universal.html">
-            <img src="images/qtquickcontrols2-universal.png" alt="Universal" width="100%"/>
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td style="border:0px">Default</td>
-        <td style="border:0px">Material</td>
-        <td style="border:0px">Universal</td>
-      </tr>
-    </table>
-    \endraw
-
     \section1 Prerequisites
 
     The \l{Qt Quick Controls 2 QML Types}{QML types} can be imported into your
diff --git a/src/imports/controls/doc/src/qtquickcontrols2-material.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-material.qdoc
index 065f3fe9..0b3175d7 100644
--- a/src/imports/controls/doc/src/qtquickcontrols2-material.qdoc
+++ b/src/imports/controls/doc/src/qtquickcontrols2-material.qdoc
@@ -58,8 +58,13 @@
     {Google Material Design Guidelines}. It allows for a unified experience
     across platforms and device sizes.
 
-    \image qtquickcontrols2-material.png
-    \caption The Material style in light and dark themes
+    \table
+        \row
+            \li \image qtquickcontrols2-material-light.png
+                \caption The Material style in light theme
+            \li \image qtquickcontrols2-material-dark.png
+                \caption The Material style in dark theme
+    \endtable
 
     To run an application with the Material style, see
     \l {Using Styles in Qt Quick Controls 2}.
@@ -108,7 +113,7 @@
                 }
                 \endqml
             \li
-                \image qtquickcontrols2-material-dark.png
+                \image qtquickcontrols2-material-purple.png
     \endtable
 
     In addition to specifying the attributes in QML, it is also possible to
diff --git a/src/imports/controls/doc/src/qtquickcontrols2-styles.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-styles.qdoc
index 42d8bc62..f2df16ce 100644
--- a/src/imports/controls/doc/src/qtquickcontrols2-styles.qdoc
+++ b/src/imports/controls/doc/src/qtquickcontrols2-styles.qdoc
@@ -29,46 +29,30 @@
     \page qtquickcontrols2-styles.html
     \title Styling Qt Quick Controls 2
 
+    \section1 Available Styles
+
     Qt Quick Controls 2 comes with a selection of styles.
 
-    \raw HTML
-    <table style="background:transparent; border:0px">
-      <tr>
-        <td style="border:0px">
-          <a href="qtquickcontrols2-default.html">
-            <img src="images/qtquickcontrols2-default.png" width="45%"/>
-          </a>
-        </td>
-        <td style="border:0px">
-          <a href="qtquickcontrols2-material.html">
-            <img src="images/qtquickcontrols2-material.png" width="75%"/>
-          </a>
-        </td>
-        <td style="border:0px">
-          <a href="qtquickcontrols2-universal.html">
-            <img src="images/qtquickcontrols2-universal.png" width="75%"/>
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td style="border:0px">
-          The <a href="qtquickcontrols2-default.html">Default</a> style is
-          a simple and light-weight all-round style that offers the maximum
-          performance for Qt Quick Controls 2.
-        </td>
-        <td style="border:0px">
-          The <a href="qtquickcontrols2-material.html">Material</a> style offers an appealing design
-          based on the <a href="https://www.google.com/design/spec/material-design/introduction.html">
-          Google Material Design Guidelines</a>, but requires more system resources than the Default style.
-        </td>
-        <td style="border:0px">
-          The <a href="qtquickcontrols2-universal.html">Universal</a> style offers an appealing design
-          based on the <a href="https://dev.windows.com/design">Microsoft Universal Design Guidelines</a>,
-          but requires more system resources than the Default style.
-        </td>
-      </tr>
-    </table>
-    \endraw
+    \section2 Default Style
+
+    \image qtquickcontrols2-default-thumbnail.png
+    The \l {Default Style} is a simple and light-weight all-round style that offers
+    the maximum performance for Qt Quick Controls 2.
+
+    \section2 Material Style
+
+    \image qtquickcontrols2-material-thumbnail.png
+    The \l {Material Style} offers an appealing design based on the
+    \l {https://www.google.com/design/spec/material-design/introduction.html}
+    {Google Material Design Guidelines}, but requires more system resources than
+    the Default style.
+
+    \section2 Universal Style
+
+    \image qtquickcontrols2-universal-thumbnail.png
+    The \l {Universal Style} offers an appealing design based on the
+    \l {https://dev.windows.com/design}{Microsoft Universal Design Guidelines},
+    but requires more system resources than the Default style.
 
     \section1 Using Styles in Qt Quick Controls 2
 
diff --git a/src/imports/controls/doc/src/qtquickcontrols2-universal.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-universal.qdoc
index 8f3d2330..4b5a2de2 100644
--- a/src/imports/controls/doc/src/qtquickcontrols2-universal.qdoc
+++ b/src/imports/controls/doc/src/qtquickcontrols2-universal.qdoc
@@ -57,8 +57,13 @@
     The Universal style has been designed to look good on all devices, from
     phones and tablets to PCs.
 
-    \image qtquickcontrols2-universal.png
-    \caption The Universal style in light and dark themes
+    \table
+        \row
+            \li \image qtquickcontrols2-universal-light.png
+                \caption The Universal style in light theme
+            \li \image qtquickcontrols2-universal-dark.png
+                \caption The Universal style in dark theme
+    \endtable
 
     To run an application with the Universal style, see
     \l {Using Styles in Qt Quick Controls 2}.
@@ -107,7 +112,7 @@
                 }
                 \endqml
             \li
-                \image qtquickcontrols2-universal-dark.png
+                \image qtquickcontrols2-universal-violet.png
     \endtable
 
     In addition to specifying the attributes in QML, it is also possible to