Set up toast notifications about findadoc-frontend HOT 14 CLOSED

Can you elaborate on what these notifications will be used for? Perhaps a user story?

As you may know, the Vuetify library has a snackbar / toast component that could work. Were you looking to extend it somehow?

I'd recommend sticking with Vuetify and Material design for consistency.

from findadoc-frontend.

I think its better to use Vuetify's toast component than to use a separate library for it.

from findadoc-frontend.

I'd like to stick with Vuetify as much as possible and make use of the components it has.

from findadoc-frontend.

Oh, I didn't actually notice the Vuetify native component!

In terms of purpose, I think the main example is notifications that your submission completed successfully, but it could extend to pretty much any time there's a console.log, like for the admin login screen.

from findadoc-frontend.

@ann-kilzer yes I would...
I'll work on it today and issue a pull request soon...

from findadoc-frontend.

I think using another library outside of Vuetify makes sense. This issue is focused around deciding HOW we're planning to do toasts. (Sorry I didn't give a better description 😞 )

• same color for all messages including errors?
• close button?
• timeout length
• What position on page?
• Are we using the vuetify toast
• We might want to put some of these style choices in constants, or wrap this with our styling so it's consistently used.

from findadoc-frontend.

https://github.com/nuxt-community/community-modules/tree/master/packages/toast

This is probably the "default" option for a nuxt project

from findadoc-frontend.

Can you elaborate on what these notifications will be used for? Perhaps a user story?

As you may know, the Vuetify library has a snackbar / toast component that could work. Were you looking to extend it somehow?

I'd recommend sticking with Vuetify and Material design for consistency.

Since we're already using Vuetify, that would be my preference as well! @theyokohamalife do you have a specific toast library preference?

from findadoc-frontend.

Yes, letting a user know that their submission was sent #73 is a great feature to add.

Another reason to stick with Vuetify is it keeps the build size smaller.

If we agree to use Vuetify for 🍞 🔥 , can we close this?

but it could extend to pretty much any time there's a console.log, like for the admin login screen.

Not sure if I follow... If we want an alert, just make one.

We developers can open the console whenever we need to know what's happening there. Currently the logs are pretty cluttered but it should improve when we address #82

from findadoc-frontend.

I'd like to work on adding toast messages in relevant places if thats ok ?

from findadoc-frontend.

Not sure if I follow... If we want an alert, just make one.

For messages meant for devs, it probably is enough to just use alerts or console logs (although that does require always having the console preemptively open). I don't know all the places with console logging off the top of my head, but I'm mainly thinking that most of the time it'd be nice to have an easy to see notification. User facing stuff could include alerts for when a report goes through or just common errors like a network error.

from findadoc-frontend.

@amar-prabhu-29 Would you like to try #73 using https://v15.vuetifyjs.com/en/components/snackbars?

from findadoc-frontend.

We visited and it's now clear that these toast libraries can provide things beyond Vuetify. So let's proceed.

Please stick with Material styling and icons 🙇🏻‍♀️

from findadoc-frontend.

I think using Vuetify's native toast component is better as it keeps the overall style in accordance to Vue Material.
I have almost finished work on the snackbar and some of things i implemented are,

Close Button : "Ok!" for both success and error,
Timeout Length : Defaults to 5s,
Position on the page: I think bottom looks good (feedback is welcome)

And using different colors for error and success is a good idea. (Suggestion/feedback on color hex is welcome)

cc: @ermish

from findadoc-frontend.