[Discuss] New notification system
popojargo opened this issue · comments
Expected Behavior
Notifications should provide useful information to the user without affecting their usability.
Current Behavior
The current notification box hide the app bar and slow the user experience. For example, when we log in, we can't search for a database name because the login notification overflows the search component.
Possible Solution
Use notification components that show "toasts" that are not as invasive as the current notification box.
Something like this: https://www.npmjs.com/package/react-notifications
With the current application layout, I think the best position would be bottom right but I'm no UI expert.
Context
I just want to see what's the opinion of the community so we can plan things correctly. Let me know what you think :)
Your Environment
- Version used: 2.3.1
- Browser Name and version: Chrome
- Operating System and version (desktop or mobile): Windows
@popojargo is this a duplicate of #1253 ?
I just wanted to make a more formal issue about the suggestion. This other issue was more focusing on the speed of the notification box.
Better place is top right, not bottom. Placing container to bottom one should be ready to deal with a lot of positioning issues esp when container overflows.
Btw icons are excessive as well as titles.
I'm trying a few things with react-toastify.
Here's a demo: https://share.getcloudapp.com/E0ubz8BL
I used the top-right as @ermouth suggested and I added top-margin equal to the top header. Any comments?
@popojargo as you probably noticed, react-notifications lib, as well as a lib used in Photon, use inverse color scheme, that has rather saturated backgrounds and white text. Moreover, backgrounds are semi-transparent.
Inverse scheme is selected for a reason: notifications must be noticeable, by definition. With pale backgrounds, even having slight jitter animation applied on slide in, they are not so visible. Pale notifications are good for non-important popups (like informing a user that doc was saved), but are too shy for important notices.
As for semi-transparent backgrounds: they allow underlying controls to stay half-visible, which is also important to avoid confusion.
Also, both in react-notifications and Photon there is no ✕ control, its presence has no value if messages are small and stay at screen within 3–5 seconds.
Hi ermouth,
I've also noticed that the colors are very pale. I see now that I was using the original Bootstrap colors instead of the overridden theme of Fauxton. I'll change that and add the background transparency. It makes a lot of sense!
Little update: https://share.getcloudapp.com/v1uDewKY
- Opacity: 0.9 On hover: 1
- Updated the colors to used the ones of the previous notifications. I would like to either use a new color scheme or at least update the current one. The "blue" used for the info alerts is weird.
- Removed the X button but you can still click on the toast to remove it.
I will also add the "ESC" keyboard shortcut to clear notifications as it was defined previously.
@wohali @garrensmith @Antonio-Maranhao Any restrictions on the color scheme?
@popojargo I would either:
- Match the colours as they exist in the current system, or
- It would be ideal if the colours were colour-blind safe. https://davidmathlogic.com/colorblind/#%23D81B60-%231E88E5-%23FFC107-%23004D40 https://venngage.com/blog/color-blind-friendly-palette/
Match the colours as they exist in the current system
It would be ok.
It would be ideal if the colours were colour-blind safe
Unlikely. Most colorblind-safe palettes are very unpleasing, confusing for non-colorblinds, and add no clear value for highly specialized UIs like this. Clean and concise text on controls and infoboxes (I mean instead of just icons and color coding) has much more pronounced impact on UI perceived comfort for color blind ppl.
IMO, the best solution for color-blind is to have a "color-blind" mode. If all the styling is well templated, it's easy to add a dark-mode or color-blind friendly mode.
As a first step, I will only propose a PR that changes the notification system format. Then I will look to provide another PR for colors.
Mostly I am reacting to the fact that the red in the popup alert isn't the same as the red in the sidebar. It clashes.