After an evaluation, GNOME has moved from Bugzilla to GitLab. Learn more about GitLab.
No new issues can be reported in GNOME Bugzilla anymore.
To report an issue in a GNOME project, go to GNOME GitLab.
Do not go to GNOME Gitlab for: Bluefish, Doxygen, GnuCash, GStreamer, java-gnome, LDTP, NetworkManager, Tomboy.
Bug 688506 - Notifications are mis-aligned
Notifications are mis-aligned
Product: gnome-shell
Classification: Core
Component: message-tray
Other Linux
: Normal enhancement
: ---
Assigned To: gnome-shell-maint
Depends on:
Reported: 2012-11-17 01:03 UTC by Reda Lazri
Modified: 2012-12-21 14:55 UTC
See Also:
GNOME target: ---
GNOME version: ---

Before (115.52 KB, image/png)
2012-11-17 01:03 UTC, Reda Lazri
After (143.80 KB, image/png)
2012-11-17 01:04 UTC, Reda Lazri
lg_close. (9.97 KB, image/png)
2012-11-17 13:22 UTC, Reda Lazri
initial patch (1.55 KB, patch)
2012-11-29 16:48 UTC, Allan Day
none Details | Review
before and after screenshots (91.84 KB, image/png)
2012-11-29 17:05 UTC, Allan Day
updated patch (1.55 KB, patch)
2012-12-04 13:56 UTC, Allan Day
none Details | Review
let's attach the right patch this time (1.55 KB, patch)
2012-12-04 13:59 UTC, Allan Day
committed Details | Review

Description Reda Lazri 2012-11-17 01:03:20 UTC
Created attachment 229204 [details]

Please check out the 'before' and 'after' shots.
Comment 1 Reda Lazri 2012-11-17 01:04:07 UTC
Created attachment 229205 [details]
Comment 2 André Klapper 2012-11-17 12:56:18 UTC
Not sure if the "X" button to close should be inside of the field. See also the design in the open apps overview.
Comment 3 Reda Lazri 2012-11-17 13:22:48 UTC
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. :)
Comment 4 Jasper St. Pierre (not reading bugmail) 2012-11-17 17:05:46 UTC
The close button on the notification should only appear on hover as well.
Comment 5 Allan Day 2012-11-17 19:52:55 UTC
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.
Comment 6 Reda Lazri 2012-11-17 20:20:54 UTC

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? :)
Comment 7 Allan Day 2012-11-29 16:48:52 UTC
Created attachment 230213 [details] [review]
initial patch

This needs more testing, but it's better for me so far.
Comment 8 Allan Day 2012-11-29 17:05:47 UTC
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.
Comment 9 Allan Day 2012-12-04 13:56:44 UTC
Created attachment 230658 [details] [review]
updated patch

This seems to work OK.
Comment 10 Allan Day 2012-12-04 13:59:48 UTC
Created attachment 230662 [details] [review]
let's attach the right patch this time

Comment 11 Jasper St. Pierre (not reading bugmail) 2012-12-21 11:34:42 UTC
Review of attachment 230662 [details] [review]:

Comment 12 Allan Day 2012-12-21 14:55:36 UTC
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!