doc: Add snippets and animations illustrating TapHandler.GesturePolicy

People are constantly confused by GesturePolicy and its default value,
so we really need a "glanceable" reference in the docs to show the
differences between use cases.

Also clarify the pitfalls with the default DragThreshold value.

We switch from the \value tag to a 2-column \table because the \image
would otherwise break the table, and also because it saves space and
acts as a meaningful reminder to have the animation right under the
enum value that is being documented.

Pick-to: 6.5 6.4 6.2
Task-number: QTBUG-70397
Task-number: QTBUG-73262
Task-number: QTBUG-100534
Task-number: QTBUG-107239
Task-number: QTBUG-111310
Change-Id: I1ff45f58a8a8edf55f4a8696d881aa9e0bedcfe3
Reviewed-by: Oliver Eftevaag <oliver.eftevaag@qt.io>

4 files changed, 225 insertions, 0 deletions

diff --git a/src/quick/doc/snippets/pointerHandlers/dragReleaseMenu.qml b/src/quick/doc/snippets/pointerHandlers/dragReleaseMenu.qml
new file mode 100644
index 0000000000..e6d2266408
--- /dev/null
+++ b/src/quick/doc/snippets/pointerHandlers/dragReleaseMenu.qml
@@ -0,0 +1,72 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+//![0]
+import QtQuick
+
+Rectangle {
+    id: rect
+    width: 140; height: 100
+
+    //![1]
+    TapHandler {
+        id: menuPopupHandler
+        gesturePolicy: TapHandler.DragWithinBounds
+        onPressedChanged:
+            if (pressed) {
+                menu.x = point.position.x - menu.width / 2
+                menu.y = point.position.y - menu.height / 2
+            } else {
+                feedback.text = menu.highlightedMenuItem
+                selectFlash.start()
+            }
+        onCanceled: feedback.text = "canceled"
+    }
+    //![1]
+
+    Column {
+        id: menu
+        visible: menuPopupHandler.pressed
+        opacity: Math.min(1, menuPopupHandler.timeHeld)
+        property string highlightedMenuItem: ""
+        Repeater {
+            model: [ "top", "middle", "bottom" ]
+            delegate: Rectangle {
+                property bool highlighted: menuPopupHandler.pressed &&
+                                           contains(mapFromItem(rect, menuPopupHandler.point.position))
+                onHighlightedChanged: {
+                    if (highlighted)
+                        menu.highlightedMenuItem = menuItemText.text
+                    else if (menu.highlightedMenuItem === menuItemText.text)
+                        menu.highlightedMenuItem = ""
+                }
+                width: 100
+                height: 20
+                color: highlighted ? "lightsteelblue" : "aliceblue"
+                Text {
+                    id: menuItemText
+                    anchors.centerIn: parent
+                    text: modelData
+                }
+            }
+        }
+    }
+
+    Text {
+        id: feedback
+        y: 6; anchors.horizontalCenter: parent.horizontalCenter
+        textFormat: Text.MarkdownText
+        text: "hold for context menu"
+
+        SequentialAnimation on font.weight {
+            id: selectFlash
+            running: false
+            loops: 3
+            PropertyAction { value: Font.Black }
+            PauseAnimation { duration: 100 }
+            PropertyAction { value: Font.Normal }
+            PauseAnimation { duration: 100 }
+        }
+    }
+}
+//![0]
diff --git a/src/quick/doc/snippets/pointerHandlers/tapHandlerButtonReleaseWithinBounds.qml b/src/quick/doc/snippets/pointerHandlers/tapHandlerButtonReleaseWithinBounds.qml
new file mode 100644
index 0000000000..3e8634a605
--- /dev/null
+++ b/src/quick/doc/snippets/pointerHandlers/tapHandlerButtonReleaseWithinBounds.qml
@@ -0,0 +1,51 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+//![0]
+import QtQuick
+
+Item {
+    width: 120; height: 80
+
+    component Button : Rectangle {
+        id: button
+        signal clicked
+        property alias text: buttonLabel.text
+
+        width: 80
+        height: 40
+        radius: 3
+        property color dark: Qt.darker(palette.button, 1.3)
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: tapHandler.pressed ? dark : palette.button }
+            GradientStop { position: 1.0; color: dark }
+        }
+
+        SequentialAnimation on border.width {
+            id: tapFlash
+            running: false
+            loops: 3
+            PropertyAction { value: 2 }
+            PauseAnimation { duration: 100 }
+            PropertyAction { value: 0 }
+            PauseAnimation { duration: 100 }
+        }
+
+        //![1]
+        TapHandler {
+            id: tapHandler
+            gesturePolicy: TapHandler.ReleaseWithinBounds
+            onTapped: tapFlash.start()
+        }
+        //![1]
+
+        Text {
+            id: buttonLabel
+            text: "Click Me"
+            color: palette.buttonText
+            anchors.centerIn: parent
+        }
+    }
+
+    Button { x: 10; y: 10 }
+}
+//![0]
diff --git a/src/quick/doc/snippets/pointerHandlers/tapHandlerButtonWithinBounds.qml b/src/quick/doc/snippets/pointerHandlers/tapHandlerButtonWithinBounds.qml
new file mode 100644
index 0000000000..4563b44014
--- /dev/null
+++ b/src/quick/doc/snippets/pointerHandlers/tapHandlerButtonWithinBounds.qml
@@ -0,0 +1,51 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+//![0]
+import QtQuick
+
+Item {
+    width: 120; height: 80
+
+    component Button : Rectangle {
+        id: button
+        signal clicked
+        property alias text: buttonLabel.text
+
+        width: 80
+        height: 40
+        radius: 3
+        property color dark: Qt.darker(palette.button, 1.3)
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: tapHandler.pressed ? dark : palette.button }
+            GradientStop { position: 1.0; color: dark }
+        }
+
+        SequentialAnimation on border.width {
+            id: tapFlash
+            running: false
+            loops: 3
+            PropertyAction { value: 2 }
+            PauseAnimation { duration: 100 }
+            PropertyAction { value: 0 }
+            PauseAnimation { duration: 100 }
+        }
+
+        //![1]
+        TapHandler {
+            id: tapHandler
+            gesturePolicy: TapHandler.WithinBounds
+            onTapped: tapFlash.start()
+        }
+        //![1]
+
+        Text {
+            id: buttonLabel
+            text: "Click Me"
+            color: palette.buttonText
+            anchors.centerIn: parent
+        }
+    }
+
+    Button { x: 10; y: 10 }
+}
+//![0]
diff --git a/src/quick/doc/snippets/pointerHandlers/tapHandlerOverlappingButtons.qml b/src/quick/doc/snippets/pointerHandlers/tapHandlerOverlappingButtons.qml
new file mode 100644
index 0000000000..917c863e53
--- /dev/null
+++ b/src/quick/doc/snippets/pointerHandlers/tapHandlerOverlappingButtons.qml
@@ -0,0 +1,51 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+//![0]
+import QtQuick
+
+Item {
+    width: 120; height: 80
+
+    component Button : Rectangle {
+        signal clicked
+        property alias text: buttonLabel.text
+
+        width: 80
+        height: 40
+        radius: 3
+        property color dark: Qt.darker(palette.button, 1.3)
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: tapHandler.pressed ? dark : palette.button }
+            GradientStop { position: 1.0; color: dark }
+        }
+
+        SequentialAnimation on border.width {
+            id: tapFlash
+            running: false
+            loops: 3
+            PropertyAction { value: 2 }
+            PauseAnimation { duration: 100 }
+            PropertyAction { value: 0 }
+            PauseAnimation { duration: 100 }
+        }
+
+        //![1]
+        TapHandler {
+            id: tapHandler
+            gesturePolicy: TapHandler.DragThreshold // the default
+            onTapped: tapFlash.start()
+        }
+        //![1]
+
+        Text {
+            id: buttonLabel
+            text: "Click Me"
+            color: palette.buttonText
+            anchors.centerIn: parent
+        }
+    }
+
+    Button { x: 10; y: 10 }
+    Button { x: 30; y: 30 }
+}
+//![0]