Fix hover logic on touchables #104

esavkin · 2023-11-07T12:51:30+08:00

esavkin commented

2023-11-07 12:51:30 +08:00

fix cards removal
fix cards progress bar overlay
fix cards warning overlay

Closes #84

* fix cards removal * fix cards progress bar overlay * fix cards warning overlay Closes #84

sb10q commented

2023-11-07 13:19:47 +08:00

What do each of these "fixes" consist in exactly?

As I said before dragging the card out of the crate to remove it is fine behavior IMO. What did you replace it with?

What do each of these "fixes" consist in exactly? As I said before dragging the card out of the crate to remove it is fine behavior IMO. What did you replace it with?

esavkin commented

2023-11-07 13:50:24 +08:00

What did you replace it with?

No replace, just buttons and warnings are now showing when clicked (on touch devices only), in similar way when hovered

As I said before dragging the card out of the crate to remove it is fine behavior IMO

Click is far easier and more accessible than drag. Also deleting by drag is hard to discover, and not really common way of doing this, meaning users will get stuck for a while, is not a good UX. In most cases (iOS, OneUI, AOSP launchers, Telegram Stories) I see there is at least an alternative way, in some cases it is not even an option (Microsoft ToDo, TaoBao). The only one I could find that forces to drag-only is Instagram stories.
No reason not to show a same button as on hover but on click so far.

> What did you replace it with? No replace, just buttons and warnings are now showing when clicked (on touch devices only), in similar way when hovered > As I said before dragging the card out of the crate to remove it is fine behavior IMO Click is far easier and more accessible than drag. Also deleting by drag is hard to discover, and not really common way of doing this, meaning users will get stuck for a while, is not a good UX. In most cases (iOS, OneUI, AOSP launchers, Telegram Stories) I see there is at least an alternative way, in some cases it is not even an option (Microsoft ToDo, TaoBao). The only one I could find that forces to drag-only is Instagram stories. No reason not to show a same button as on hover but on click so far.

sb10q commented

2023-11-07 13:52:24 +08:00

What about the other questions?

esavkin force-pushed 84-touch-ux-fix from 34572c4ec6 to a5b217c183

2023-11-07 15:04:08 +08:00

Compare

esavkin commented

2023-11-07 15:22:06 +08:00

What do each of these "fixes" consist in exactly?

The removal button appears on card image being tapped for up to 2 seconds, dissapears once same or another card is being tapped.
Cards progress bar and warning alert were replaced by OverlayTrigger, which can be triggered by both hover and tap, and can be closed by tapping outside and inside or leaving a mouse. OverlayTrigger is used in cards options anyway, and working better than in-house solution - it knows where the screen ends and repositions itself when needed, so the content is fully visible. The overlay itself is basically the same except position.

> What do each of these "fixes" consist in exactly? 1. The removal button appears on card image being tapped for up to 2 seconds, dissapears once same or another card is being tapped. 2. Cards progress bar and warning alert were replaced by `OverlayTrigger`, which can be triggered by both hover and tap, and can be closed by tapping outside and inside or leaving a mouse. `OverlayTrigger` is used in cards options anyway, and working better than in-house solution - it knows where the screen ends and repositions itself when needed, so the content is fully visible. The overlay itself is basically the same except position.

Screenshot from 2023-11-07 15-20-28.png

35 KiB

Screenshot from 2023-11-07 15-20-53.png

18 KiB