Stackable paper-toast

[raffaeu]

At the moment if we want to display multiple toasts we simply have to swap the content of the current one. Example, I have a page with the following paper-toast in it:

<!-- Mini Message center -->
<paper-toast id="toast" class="fit-bottom" duration="0">
    <paper-button id="toastButton" onclick="toast.toggle()">Close</paper-button>
</paper-toast>

And this is the code to display a Message:

var toast = document.querySelector('#toast');
toast.show({ text: data.detail.message });

Now, if I call again this method while the Toast is already open, it simply displays a new message. My intent is to have multiple stackable toasts, each one dismissable, like this example:

I thought to use a sort of <template is="dom-repeat"> and repeat an entire<paper-toast> element for each one of my messages and stack them one on top of each other. Is this the correct approach?

[red15]

@raffaeu note that the Google material design philosophy says to not show stacks of them but show them sequentially:

They should not be persistent or be stacked, as they are above other elements on screen.

[chrisgiffy]

I need to do something exactly like this, however, my messages are unpredictable and if I receive another message before the first one disappears I need to stack them up.

[red15]

Consider bumping a new notification (which will replace the current notification) with a "multiple unread notifications" message, then link that notification to an "inbox" view which allows you to simply use a list to show the unread notifications (think like github's own notification view )

This should save you from having to code against the paper-toast design and would still give you proper indication to the user of what's going on.

[raffaeu]

Agree, actually it should be like a message broadcasting service where messages are collected in a queue, including for example errors and warnings and then could be easily browsed in a different sidebar, like windows 10 notification center does.

On Jul 5, 2017 17:38, "Niels Huylebroeck" notifications@github.com wrote:

Consider bumping a new notification (which will replace the current notification) with a "multiple unread notifications" message, then link that notification to an "inbox" view which allows you to simply use a list to show the unread notifications (think like github's own notification view https://github.com/notifications )

This should save you from having to code against the paper-toast design and would still give you proper indication to the user of what's going on.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Polymer/paper-toast/issues/25#issuecomment-313141120, or mute the thread https://github.com/notifications/unsubscribe-auth/ABPooNon60R2rHQU6Ll65HjTwse96xE8ks5sK639gaJpZM4IS0Rs .