Notification: auto-dismiss while visible #375
Conversation
It detects if the tab is opened and trigger a timeout for 5 seconds. After that time, the notification is hidden. Eventually, we could use some nice effect, like fade out and stop the timer while the pointer is over the notification -- but that't outside the scope of this initial work. Closes #366
agjohnson
left a comment
agjohnson
left a comment
There was a problem hiding this comment.
This looks good! I think we should aim to support hover/focus with this change, which shouldn't be much more more work. We'd need to add the events to the templates and call this same logic from those events.
|
I'll try something tomorrow. I'd like to not reset the time, but pause it. I may need to save the countdown time for that... Not sure how yet |
|
Either works, but resetting seems fine and doesn't require more state tracking. To make a notification that can be paused you could turn the timer into a 1s timer and accumulate a count of seconds unpaused instead. |
| _handleMouseEnter = (e) => { | ||
| // Stop the timer when notification is hovered (mouseenter event) | ||
| clearTimeout(this.timerID); | ||
| this.timerID = null; | ||
| }; | ||
|
|
||
| _handleMouseLeave = (e) => { | ||
| // Start the timer when the notification is hovered away (mouseleave) | ||
| this.triggerAutoDismissTimer(); | ||
| }; |
There was a problem hiding this comment.
@humitos Note, this doesn't handles the focusin/focusout events I mentioned. These are required for keyboard and screen reader support, which won't fire mouse events.
It detects if the tab is opened and trigger a timeout for 5 seconds. After that time, the notification is hidden.
Eventually, we could use some nice effect, like fade out and stop the timer while the pointer is over the notification -- but that't outside the scope of this initial work.
Closes #366