Framework: Notification messages should stack

[vaadin-bot]

Originally by @emarc

---

When multiple tray notification messages are shown within a short period of time, they are shown at the same position (over each other), which makes the messages unreadable. Instead, they should be stacked.

See example screenshot.

[vaadin-bot]

Originally by @jojule

---

Attachment added: growl.png (336.5 KiB)

https://trac-attachments.vaadin.com/trac/2685/growl.png

[vaadin-bot]

Originally by @emarc

---

Modified summary and desc - pertains to all notifications, not just tray notifications.
(Known issue, I actually thought there was a ticket for this already, but apparently not - could not find it anyway.)

[vaadin-bot]

Originally by @Peppe

---

Vote for upping the priority of this.

[vaadin-bot]

Originally by @hannuvaadin

---

+1 bump

[vaadin-bot]

Originally by _ardiel_

---

Gerrit link https://dev.vaadin.com/review/#/c/12361/

[vaadin-bot]

Originally by _daniel-schreiber_

---

+1 (Is there a reason, why this is/was not merged?)

[vaadin-bot]

Originally by @Legioth

---

Replying to daniel-schreiber:

+1 (Is there a reason, why this is/was not merged?)

The reason is that the reviewer pointed out a couple of issues in the suggested implementation and nobody has addressed those issues since then.

From the review comment:

Some usability issues and bugs we saw with this implementation:

• if you e.g. add a notification top-center and then another one bottom-right, the position of the top one changes
• the notifications overlap e.g. with the Valo theme (size measurement does not take the shadow etc. into account) - this is in the borderline between themeing and this code change, but there should at least be some way for the theme to define the gap
• closing a notification leaves a gap - it should probably condense the empty space

Furthermore, our usability expert has the impression it might be better not to move existing notifications when opening a new one but rather stack new ones in new positions, but this might require some UX testing. Ideally, it would be nice to have an easy option (a hard-coded boolean on the client side is fine) so that we can test the two alternatives (new one moves vs. old one moves) in various use cases.

[heruan]

This is vital in my opinion: if N notifications are sent at the same time, N-1 notifications get lost. Was this ever addressed? @Legioth was this ever addressed? It's not easy to track this imported issues.

[hesara]

This has not been addressed in the framework, but there are various add-ons available that support such notification stacking (Toastr, Notifique and more at https://vaadin.com/directory#!browse/search=notification ).

[stale[bot]]

A lot of tickets have been left hanging in the issue tracker through the years. Some of them are still relevant, some of them have been fixed a long time ago and some are no longer valid. To get a better look on what is important and still relevant, we are closing old tickets which have not been touched in a long time. No further work will be done on this ticket. If the ticket seems to be still actual, please verify the problem existence over latest framework version and then open a new ticket in vaadin/framework with all the suitable information.

[TatuLund]

This has been taken into account in the new Notification component in Vaadin 14 https://vaadin.com/components/vaadin-notification