5 files changed, 63 insertions, 76 deletions
diff --git a/examples/widgets/doc/images/treemodel-structure.svg b/examples/widgets/doc/images/treemodel-structure.svg
index f8bc24803bf..8f86ff33862 100644
--- a/examples/widgets/doc/images/treemodel-structure.svg
+++ b/examples/widgets/doc/images/treemodel-structure.svg
@@ -1,93 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-  preserveAspectRatio="none"
-  width="192"
-  height="350"
-  viewBox="-25 -30 153.6 280"
-  version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
+   viewBox="0 0 165 300"
+   width="165"
+   height="300"
+   version="1.1"
+   id="svg25"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+
+<style>
+  svg .line-style { stroke: black; fill: none }
+  svg .text-style { font: 12px arial; fill: black }
+  svg .bold-style { font: 12px arial; fill: black; font-weight: bold }
+  svg .item-style { font: 16px arial; fill: black }
+
+  [data-theme="dark"] svg .line-style { stroke: #f2f2f2; fill: none }
+  [data-theme="dark"] svg .text-style { font: 12px arial; fill: #f2f2f2 }
+  [data-theme="dark"] svg .bold-style { font: 12px arial; fill: #f2f2f2; font-weight: bold }
+  [data-theme="dark"] svg .item-style { font: 14px arial; fill: #f2f2f2 }
+
+  [data-theme="light"] svg .line-style { stroke: black; fill: none }
+  [data-theme="light"] svg .text-style { font: 12px arial; fill: black }
+  [data-theme="light"] svg .bold-style { font: 12px arial; fill: black; font-weight: bold }
+  [data-theme="light"] svg .item-style { font: 14px arial; fill: black }
+</style>
 
 <!-- Root node -->
-<g transform="translate(0, 0)">
-<path fill="none" stroke="#333" stroke-dasharray="4" d="M -10 -10 l 20 0 l 0 20 l -20 0 z" />
-<text x="15" y="0" font-size="12" font-family="Arial" fill="#333" text-anchor="left" dominant-baseline="central" font-weight="bold">
-      Root item (empty)
-</text>
-</g>
+<text x="50" y="29" class="bold-style">Root item (empty)</text>
+<path d="M 10,10 L 40,10 L 40,40 L 10,40 Z" class="line-style"
+      stroke-dasharray="5 5" />
 
 <!-- Root spine vertical line solid part -->
-<path fill="none" stroke="#333" d="M 0 10 l 0 190" />
-
+<path d="M 25,40 L 25,265" class="line-style" />
 <!-- Root spine vertical line dotted continuation -->
-<path fill="none" stroke="#333" stroke-dasharray="4" d="M 0 200 l 0 30" />
+<path d="M 25,265 L 25,290" class="line-style" stroke-dasharray="3 3" />
 
-<!-- Horizontal lines from Root spine to children A, E, F -->
-<path fill="none" stroke="#333" d="M 0 40 l 20 0" />
-<path fill="none" stroke="#333" d="M 0 160 l 20 0" />
-<path fill="none" stroke="#333" d="M 0 185 l 20 0" />
+<!-- Horizontal lines from Root spine to children A, C, ... -->
+<path d="M 25,65 L 45,65" class="line-style" />
+<path d="M 25,225 L 45,225" class="line-style" />
+<path d="M 25,265 L 45,265" class="line-style" />
 
 <!-- Node A with label [0] -->
-<g transform="translate(30, 40)">
-<path fill="none" stroke="#333" d="M -10 -10 l 20 0 l 0 20 l -20 0 z"/>
-<text x="0" y="0" font-size="12" font-family="Arial" fill="#333" text-anchor="middle" dominant-baseline="central">
-      A
-</text>
-<text x="15" y="0" font-size="12" font-family="Arial" fill="#333" text-anchor="start" dominant-baseline="central">
-      row = 0
-</text>
-</g>
+<path d="M 45,50 L 75,50 L 75,80 L 45,80 Z" class="line-style" />
+<text x="55" y="70" class="item-style">A</text>
+<text x="82" y="69" class="text-style">row = 0</text>
 
 <!-- Vertical line from A to its children -->
-<path fill="none" stroke="#333" d="M 30 50 l 0 80" />
+<path d="M 60,80 L 60,185" class="line-style" />
 
-<!-- Horizontal lines from A's spine to B, C, D -->
-<path fill="none" stroke="#333" d="M 30 70 l 20 0" />
-<path fill="none" stroke="#333" d="M 30 100 l 20 0" />
-<path fill="none" stroke="#333" d="M 30 130 l 20 0" />
+<!-- Horizontal lines from A's spine to ..., B, ... -->
+<path d="M 60,105 L 80,105" class="line-style" />
+<path d="M 60,145 L 80,145" class="line-style" />
+<path d="M 60,185 L 80,185" class="line-style" />
 
-<!-- Node B -->
-<g transform="translate(60, 70)">
-<path fill="none" stroke="#333" d="M -10 -10 l 20 0 l 0 20 l -20 0 z"/>
-<text x="15" y="0" font-size="12" font-family="Arial" fill="#333" text-anchor="start" dominant-baseline="central">
-      row = 0
-</text>
-</g>
+<!-- First unnamed child node of A -->
+<path d="M 80,90 L 110,90 L 110,120 L 80,120 Z" class="line-style" />
+<text x="117" y="109" class="text-style">row = 0</text>
 
-<!-- Node C -->
-<g transform="translate(60, 100)">
-<path fill="none" stroke="#333" d="M -10 -10 l 20 0 l 0 20 l -20 0 z"/>
-<text x="0" y="0" font-size="12" font-family="Arial" fill="#333" text-anchor="middle" dominant-baseline="central">
-      B
-</text>
-<text x="15" y="0" font-size="12" font-family="Arial" fill="#333" text-anchor="start" dominant-baseline="central">
-      row = 1
-</text>
-</g>
-
-<!-- Node D -->
-<g transform="translate(60, 130)">
-<path fill="none" stroke="#333" d="M -10 -10 l 20 0 l 0 20 l -20 0 z"/>
-<text x="15" y="0" font-size="12" font-family="Arial" fill="#333" text-anchor="start" dominant-baseline="central">
-      row = 2
-</text>
-</g>
+<!-- Node B -->
+<path d="M 80,130 L 110,130 L 110,160 L 80,160 Z" class="line-style" />
+<text x="90" y="150" class="item-style">B</text>
+<text x="117" y="149" class="text-style">row = 1</text>
 
-<!-- Node E -->
-<g transform="translate(30, 160)">
-<path fill="none" stroke="#333" d="M -10 -10 l 20 0 l 0 20 l -20 0 z"/>
-<text x="0" y="0" font-size="12" font-family="Arial" fill="#333" text-anchor="middle" dominant-baseline="central">
-      C
-</text>
-<text x="15" y="0" font-size="12" font-family="Arial" fill="#333" text-anchor="start" dominant-baseline="central">
-      row = 1
-</text>
-</g>
+<!-- Last unnamed child node of A -->
+<path d="M 80,170 L 110,170 L 110,200 L 80,200 Z" class="line-style" />
+<text x="117" y="189" class="text-style">row = 2</text>
 
-<!-- Node F -->
-<g transform="translate(30, 185)">
-<path fill="none" stroke="#333" d="M -10 -10 l 20 0 l 0 20 l -20 0 z"/>
-<text x="15" y="0" font-size="12" font-family="Arial" fill="#333" text-anchor="start" dominant-baseline="central">
-      row = 2
-</text>
-</g>
+<!-- Node C -->
+<path d="M 45,210 L 75,210 L 75,240 L 45,240 Z" class="line-style" />
+<text x="55" y="230" class="item-style">C</text>
+<text x="82" y="229" class="text-style">row = 1</text>
 
+<!-- Last visible child node of the root node -->
+<path d="M 45,250 L 75,250 L 75,280 L 45,280 Z" class="line-style" />
+<text x="82" y="269" class="text-style">row = 2</text>
 </svg>
diff --git a/examples/widgets/doc/src/draggableicons.qdoc b/examples/widgets/doc/src/draggableicons.qdoc
index 0f1feacb7fb..3cf9b9b7266 100644
--- a/examples/widgets/doc/src/draggableicons.qdoc
+++ b/examples/widgets/doc/src/draggableicons.qdoc
@@ -4,6 +4,7 @@
 /*!
     \example draganddrop/draggableicons
     \title Draggable Icons Example
+    \ingroup examples-user-input
     \examplecategory {User Interface Components}
 
     \brief The Draggable Icons example shows how to drag and drop image data between widgets
diff --git a/examples/widgets/doc/src/draggabletext.qdoc b/examples/widgets/doc/src/draggabletext.qdoc
index 3609ed5a1a1..f34e166ed89 100644
--- a/examples/widgets/doc/src/draggabletext.qdoc
+++ b/examples/widgets/doc/src/draggabletext.qdoc
@@ -4,6 +4,7 @@
 /*!
     \example draganddrop/draggabletext
     \title Draggable Text Example
+    \ingroup examples-user-input
     \examplecategory {User Interface Components}
     \brief Illustrates how to drag and drop text between widgets.
 
diff --git a/examples/widgets/doc/src/dropsite.qdoc b/examples/widgets/doc/src/dropsite.qdoc
index 4c38ffc50d3..baa7b22fa8a 100644
--- a/examples/widgets/doc/src/dropsite.qdoc
+++ b/examples/widgets/doc/src/dropsite.qdoc
@@ -4,6 +4,7 @@
 /*!
     \example draganddrop/dropsite
     \title Drop Site Example
+    \ingroup examples-user-input
     \examplecategory {User Interface Components}
 
     \brief The example shows how to distinguish the various MIME formats available
diff --git a/examples/widgets/doc/src/tablet.qdoc b/examples/widgets/doc/src/tablet.qdoc
index a18eb3249e7..f1238238df9 100644
--- a/examples/widgets/doc/src/tablet.qdoc
+++ b/examples/widgets/doc/src/tablet.qdoc
@@ -5,7 +5,7 @@
     \example widgets/tablet
     \title Tablet Example
     \examplecategory {User Interface Components}
-    \ingroup examples-widgets
+    \ingroup examples-user-input
     \brief This example shows how to use a Wacom tablet in Qt applications.
 
     \image tabletexample.png {Application displaying a drawing area}