handlers example: Add TapHandler single/doubleTapped signal feedback

- reserve the borderBlink feedback for these signals: the flashAnimation
  feedback is enough to show the regular tapped signal
- make the flashing border more obvious: wider on a lighter background
- make the border even wider for a double-tap
- just blink once; the 3-blink animation looked nice, like classic
  macOS, but was a bit disorienting if you are tapping multiple times
  and trying to count which signals got emitted
- stop the animation before starting the double-tap animation, to avoid
  missing it: usually the double-click interval is less than 500ms

Followup to d3f2c6ac4205bbe5a1c7174965dbce6f90972be3

Task-number: QTBUG-65088
Task-number: QTBUG-107264
Pick-to: 6.5
Change-Id: Ia2f78a7d1e758fc717078b6aa44a0f6716afd227
Reviewed-by: Matthias Rauter <matthias.rauter@qt.io>
Reviewed-by: Oliver Eftevaag <oliver.eftevaag@qt.io>

1 files changed, 28 insertions, 6 deletions

diff --git a/examples/quick/pointerhandlers/tapHandler.qml b/examples/quick/pointerhandlers/tapHandler.qml
index 178c067ce0..5891491695 100644
--- a/examples/quick/pointerhandlers/tapHandler.qml
+++ b/examples/quick/pointerhandlers/tapHandler.qml
@@ -6,20 +6,22 @@ import QtQuick.Layouts
 import "components"
 
 Item {
-    width: 800
+    width: 1024
     height: 480
 
     Rectangle {
         id: rect
         anchors.fill: parent; anchors.margins: 40; anchors.topMargin: 60
-        border.width: 3; border.color: "transparent"
-        color: handler.pressed ? "lightsteelblue" : "darkgrey"
+        border.width: 4; border.color: "transparent"
+        color: handler.pressed ? "lightsteelblue" : "aliceblue"
 
         TapHandler {
             id: handler
             acceptedButtons: (leftAllowedCB.checked ? Qt.LeftButton : Qt.NoButton) |
                              (middleAllowedCB.checked ? Qt.MiddleButton : Qt.NoButton) |
                              (rightAllowedCB.checked ? Qt.RightButton : Qt.NoButton)
+            exclusiveSignals: (singleExclusiveCB.checked ? TapHandler.SingleTap : TapHandler.NotExclusive) |
+                             (doubleExclusiveCB.checked ? TapHandler.DoubleTap : TapHandler.NotExclusive)
             gesturePolicy: (policyDragThresholdCB.checked ? TapHandler.DragThreshold :
                             policyWithinBoundsCB.checked ? TapHandler.WithinBounds :
                             policyDragWithinBoundsCB.checked ? TapHandler.DragWithinBounds :
@@ -30,6 +32,16 @@ Item {
                 borderBlink.blinkColor = "red"
                 borderBlink.start()
             }
+            onSingleTapped: function(point, button) {
+                console.log("single-tapped button " + button + " @ " + point.scenePosition)
+                rect.border.width = 4
+                borderBlink.tapFeedback(button)
+            }
+            onDoubleTapped: function(point, button) {
+                console.log("double-tapped button " + button + " @ " + point.scenePosition)
+                rect.border.width = 12
+                borderBlink.tapFeedback(button)
+            }
             onTapped: function(point, button) {
                 console.log("tapped button " + button + " @ " + point.scenePosition +
                             " on device '" + point.device.name + "' with modifiers " + handler.point.modifiers +
@@ -37,8 +49,6 @@ Item {
                 if (tapCount > 1) {
                     tapCountLabel.text = tapCount
                     flashAnimation.start()
-                } else {
-                    borderBlink.tapFeedback(button)
                 }
             }
             onLongPressed: longPressFeedback.createObject(rect,
@@ -97,10 +107,10 @@ Item {
             id: borderBlink
             property color blinkColor: "red"
             function tapFeedback(button) {
+                stop();
                 blinkColor = buttonToBlinkColor(button);
                 start();
             }
-            loops: 3
             ScriptAction { script: rect.border.color = borderBlink.blinkColor }
             PauseAnimation { duration: 100 }
             ScriptAction { script: rect.border.color = "transparent" }
@@ -145,6 +155,18 @@ Item {
         }
 
         Text {
+            text: "exclusive signals:"
+        }
+        CheckBox {
+            id: singleExclusiveCB
+            text: "single"
+        }
+        CheckBox {
+            id: doubleExclusiveCB
+            text: "double"
+        }
+
+        Text {
             text: "gesture policy:"
             horizontalAlignment: Text.AlignRight
             Layout.row: 1