GNOME Bugzilla – Bug 688506
Notifications are mis-aligned
Last modified: 2012-12-21 14:55:36 UTC
Created attachment 229204 [details]
Please check out the 'before' and 'after' shots.
Created attachment 229205 [details]
Not sure if the "X" button to close should be inside of the field. See also the design in the open apps overview.
Created attachment 229235 [details]
Why not? :)
In the 'Overview' case the close button only appears on hover, while it's part of the with notification here; so why not integrate it better?
Also, looking at the 'lg' dialog, I can guess(could be wrong) that the close button hasn't been given much thought, otherwise putting the same SVG there too is both not good(design-wise) and lazy(CSS-wise).
So, we ended up with the same SVG which has three uses:
- Appears on hover. (Passable)
- Part of the window. (Ugly)
- Part of the window, but sticking up. (Not that pretty, but makes things imbalanced and doesn't behave like the one on the 'Overview').
Please reconsider. :)
The close button on the notification should only appear on hover as well.
Hey Reda. Thanks for this, you point out some valid issues. Problems I can see with the screenshot you've posted:
* Not enough padding between the buttons and the right-hand edge of the notification
* Icon looks too big
* Too much vertical padding between the heading and the message body
* Not enough vertical padding between the message body and the buttons
* Button labels look too big
I've done a bit of investigating into some these issues. Unfortunately, it is rather hard to understand this section of the CSS. The use of "spacing" and "spacing-rows" isn't clear, and the buttons seem to get pushed off the bottom of the screen if I try to add more padding to the top of the notification-body. Marina, can you shed any light here?
The icon size is also tricky. We use 24x24px icons, which looks OK for "normal" icons. Symbolics end up looking much bigger at this size though, since they don't have any internal padding of their own.
The behavior is different though. The close button stays after the cursor leaves the notification box. :)
Note that there should be an additional button asking to empty the trash. Didn't know about it until after I made the mockup. :)
Also, What do you think about the whole me trying to convince everyone to fix the close button? :)
Created attachment 230213 [details] [review]
This needs more testing, but it's better for me so far.
Created attachment 230215 [details]
before and after screenshots
Here's a comparison of the current state and then with the patch applied.
I actually cheated with the last one - I added padding-right to get the body and buttons away from the edge of the notification. I'm pretty sure this is broken, but adding right padding to the notification itself doesn't seem to have any effect.
Created attachment 230658 [details] [review]
This seems to work OK.
Created attachment 230662 [details] [review]
let's attach the right patch this time
Review of attachment 230662 [details] [review]:
I think that the committed patch addresses most of the issues raised in the bug report. The two outstanding issues are:
1. Icons look too big
2. Close button position
1 is probably a generic issue with symbolic icons. I don't agree with 2; having the close button hang off the edge seems good to me.
A separate report for the first issue would be welcome. Thanks for the report, Reda!