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:
parent
2a21efb5f7
commit
9677fcf9aa
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue