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 d3f2c6ac42

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>
This commit is contained in:
Shawn Rutledge 2023-03-07 13:21:35 +01:00 committed by Matthias Rauter
parent 2a21efb5f7
commit 9677fcf9aa
1 changed files with 28 additions and 6 deletions

View File

@ -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" }
@ -144,6 +154,18 @@ Item {
text: "right"
}
Text {
text: "exclusive signals:"
}
CheckBox {
id: singleExclusiveCB
text: "single"
}
CheckBox {
id: doubleExclusiveCB
text: "double"
}
Text {
text: "gesture policy:"
horizontalAlignment: Text.AlignRight