Repository navigation
Notifications design adjustment #183
Description
The current notifications design could do with some improvements
- Avatars and action icons are fighting for attention
- Big action icons don’t look so nice and are very abstract
- The subject text is misaligned due to the avatar being inside the text at the beginning
This is a quick mockup for a design adjustment:
- Avatars are bigger and the point of focus
- Actions are overlaid, smaller, white and with shadow (standard classes
icon-white icon-shadow) - Text is now flush left because no avatar is inside the text
What do you think @nextcloud/designers @nickvergessen?
Activity
skjnldsv commentedon Oct 1, 2018
I really like it! 😍
It still takes a bit too much height imho.
Facebook have a nice ui on this (action button is on the far right):
nickvergessen commentedon Oct 1, 2018
Well I think it's more important what happened, than who did it.
I'm fine with removing the avatar from the name, if that is what you want. But extracting a potential actor from the notification subject and reuse their avatar as an icon is really a bad idea.
Not all notifications have an "actor". E.g. system notifications (occ notification:generate), update notifications, first-run-wizard notifications, etc.
nickvergessen commentedon Oct 1, 2018
But yeah the misalignment should be fixed. It's caused by
notifications/css/styles.scss
Line 162 in e8eea16
Because otherwise the avatars dont have any space when they are in the middle of the sentence.
pixelipo commentedon Oct 1, 2018
It looks really nice, but I have to agree with @nickvergessen
It very much depends on the context (and the app that send notification) which is more important - person or action/app; for Talk, actor is probably more important, but for Calendar, Tasks, Deck, Admin - it's the action.
For Files it's about 50-50 😄 to complicate things further.
Lastly, I think we should add shadow only for "popover" (floating?) items, such as modals, always-on-top menu icons, sticky headers etc. and try to avoid using them to solve other design problems.
jancborchardt commentedon Oct 2, 2018
Good point, we can adjust it by displaying the dark action icon and maybe considering the layout that @skjnldsv posted. That would also move the time to a more fitting spot.
@nickvergessen The avatar should stay there of course, that’s not what I want. ;) I don’t think it’s a bad idea, and @skjnldsv’s screenshot from Facebook shows that it’s commonly done.
@nickvergessen Then for those notifications we still show the action icons. We simply have 2 different designs:
skjnldsv commentedon Oct 3, 2018
If no avatar let just use the app icon then. And that's it 🤗
bartscheerlinck commentedon Oct 14, 2018
Hi, would it be possible to somehow make the notifications more clear? Several of my users are requesting some sort of pop-up window that appears as soon as a new announcement is made. Apparently, the little red dot doesn't seem to cut it for them.