doc: TreeView and delegate doc and warning improvements

- a delegate Item is not "root"; that ID could clash with the user's
  root item when copy-pasting code
- choose "▸" triangle  character because it looks better with
  some fonts (such as the default font on Linux in Qt Quick, Assistant
  and even gitk); rotate it when the tree is expanded rather than
  risking a mismatched rotated triangle character
- fix singular form in phrase "only accepts a model of type..."
- Shorten phrase "An example of how a custom delegate could look like"

Pick-to: 6.3
Change-Id: Ic91f07be4b79a88c8532d4e2e49914fbdc529e36
Reviewed-by: Richard Moe Gustavsen <richard.gustavsen@qt.io>

1 files changed, 8 insertions, 6 deletions

diff --git a/src/quick/doc/snippets/qml/treeview/qml-customdelegate.qml b/src/quick/doc/snippets/qml/treeview/qml-customdelegate.qml
index 756815cb76..a43375d2f8 100644
--- a/src/quick/doc/snippets/qml/treeview/qml-customdelegate.qml
+++ b/src/quick/doc/snippets/qml/treeview/qml-customdelegate.qml
@@ -51,7 +51,7 @@ Window {
         // model: yourTreeModel
 
         delegate: Item {
-            id: root
+            id: treeDelegate
 
             implicitWidth: padding + label.x + label.implicitWidth + padding
             implicitHeight: label.implicitHeight * 1.5
@@ -72,15 +72,17 @@ Window {
 
             Text {
                 id: indicator
-                visible: root.isTreeNode && root.hasChildren
-                x: padding + (root.depth * root.indent)
-                text: root.expanded ? "▼" : "▶"
+                visible: treeDelegate.isTreeNode && treeDelegate.hasChildren
+                x: padding + (treeDelegate.depth * treeDelegate.indent)
+                anchors.verticalCenter: label.verticalCenter
+                text: "▸"
+                rotation: treeDelegate.expanded ? 90 : 0
             }
 
             Text {
                 id: label
-                x: padding + (root.isTreeNode ? (root.depth + 1) * root.indent : 0)
-                width: root.width - root.padding - x
+                x: padding + (treeDelegate.isTreeNode ? (treeDelegate.depth + 1) * treeDelegate.indent : 0)
+                width: treeDelegate.width - treeDelegate.padding - x
                 clip: true
                 text: model.display
             }