Comments (14)
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.
Related Issues (20)
- Tag Us String HOT 1
- JS dom structure error
- about page build error HOT 1
- Map UI/UX
- Admin Dashboard Overflow
- Add a backend HOT 1
- Create essential unit tests
- Add tests suite to CI pipeline
- Add tailwind-css HOT 1
- Title should use <h1> tag HOT 5
- Improve News section css
- Tailwind migration: Migrate Navbar CSS
- Tailwind migration: Migrate Cancellations Page CSS
- Tailwind migration: Migrate Admin page CSS
- Tailwind Migration: migration from vuetify css breakpoints to tailwind breakpoints
- Create a new Homepage HOT 1
- Create new find a doc search page HOT 1
- Create new admin dashboard for clinics HOT 1
- Rework our translations HOT 1
- Create data fetching service, js library, whatever HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from findadoc-frontend.