GNOME Bugzilla – Bug 677213
Restyle the message tray
Last modified: 2013-01-16 16:37:39 UTC
The updated message tray design [1] calls for a new layout and visual style. * Use 48x48px icons for message tray items (with no text label [2]) * Give the tray a new background - this should be a solid colour with a texture and inset shadow on the upper-inside edge Just let me know if you need assets for the background colour and texture. See: http://git.gnome.org/browse/gnome-shell-design/plain/mockups/static/notifications-chat-tray.png [1] https://live.gnome.org/GnomeShell/Design/Guidelines/MessageTray/#A3.6_Refresh_Proposal [2] The one exception to this might be contacts that don't have a picture associated with them. We need to provide further design guidance here.
[I want aday to set a proper "Version" field!]
It looks like that all windows and the wallpaper is pushed up, under the panel? This would probably cause a lot of people motion sickness, and I'm curious how this is supposed to interact inside the overview. Do we have motion mockups?
As discussed on IRC, it's only the message bar that pushed the content up. Banners will continue being overlays.
In terms of assets, the tile texture for the message tray background is http://git.gnome.org/browse/gnome-shell-design/plain/assets/noise-texture.png and the color itself is #2e3436
Created attachment 219919 [details] [review] messageTray: restyle the message tray The patch implements the new visual style for the message tray, that is now larger and has textured background. The icons are also larger and the title of the source is no longer shown.
Review of attachment 219919 [details] [review]: I'd split this up into two commits: one to remove the labels, and one to do the overall restyle. ::: js/ui/messageTray.js @@ +1120,3 @@ Name: 'MessageTraySource', + SOURCE_ICON_SIZE: 48, Why the rename? @@ +1772,3 @@ _onSummaryItemHoverChanged: function(summaryItem) { if (summaryItem.actor.hover) + summaryItem.actor.add_style_pseudo_class('hovered'); This is unneceessary; StWidget already adds a 'hover' class out of the box. @@ +2179,3 @@ }; if (!this._notification.expanded) + // ana Welp. @@ +2180,3 @@ if (!this._notification.expanded) + // ana + tweenParams.y = - this.actor.height/2; Style issues: tweenParams.y = -this.actor.height / 2; (yes, the space before the unary - is already wrong in the existing code)
Review of attachment 219919 [details] [review]: ::: data/theme/gnome-shell.css @@ +1147,3 @@ /* Message Tray */ #message-tray { + background: #2e3436 url(noise-texture.png) repeat 0 0; I didn't add support for the background-repeat shorthand in my patch, so you're going to have to add background-repeat manually: background: #2e3436 url(noise-texture.png); background-repeat: repeat;
Just a note, I created fixes for almost all of these last night and pushed them to the wip/message-tray branch. You should just be able to squash these commits in.
background-repeat has landed in master.
Created attachment 220707 [details] [review] Patch: removing the labels
Created attachment 220708 [details] [review] Patch: restyle the message tray I split the patch in two separate ones with Jasper's fixes squashed in. Thank you, Jasper!
Created attachment 220709 [details] [review] Patch: restyle the message tray
Review of attachment 220709 [details] [review]: ::: data/Makefile.am @@ +38,3 @@ theme/logged-in-indicator.svg \ + theme/message-tray-background.png \ + theme/noise-texture.png \ Bad rebase? noise-texture.png is already in here. ::: js/ui/messageTray.js @@ -1782,3 @@ - _onSummaryItemHoverChanged: function(summaryItem) { - if (summaryItem.actor.hover) - summaryItem.actor.add_style_pseudo_class('hovered'); This seems like a bad rebase. The original is: _onSummaryItemHoverChanged: function(summaryItem) { if (summaryItem.actor.hover) this._setExpandedSummaryItem(summaryItem); }, @@ +2224,3 @@ }; if (!this._notification.expanded) + tweenParams.y = -this.actor.height / 2; This is still wrong.
Review of attachment 220707 [details] [review]: Commit message needs work; it shouldn't say (fixup), and it should start with a verb, not a gerund: messageTray: Remove the labels of items in the message tray. Looks good, otherwise. ::: data/theme/gnome-shell.css @@ -1394,3 @@ - * icons, because then the summary would be 0x0 when there were no - * icons in it, and so you wouldn't be able to hover over it to - * activate it. Heh, this has long been incorrect.
Created attachment 220904 [details] [review] Patch: removing the labels
Created attachment 220905 [details] [review] Patch: restyle the message tray Thanks for the feedback!
Review of attachment 220905 [details] [review]: ::: js/ui/messageTray.js @@ +1415,3 @@ Name: 'MessageTray', + TWEEN_PARAMETER_Y: 36, No. Calculate the banner height appropriately. See if this._notificationBin.height works, @@ -2188,3 @@ // - // We tween any notification showing in the banner mode to banner height - // (this._notificationBin.y = -this.actor.height). This is a useful comment. Don't remove it.
Review of attachment 220904 [details] [review]: Sure.
Review of attachment 220905 [details] [review]: One other thing I noticed: let notificationExpanded = this._notificationBin.y < - this.actor.height; I'm going to change that to track it properly.
Created attachment 221028 [details] [review] Patch: restyle the message tray
Review of attachment 221028 [details] [review]: Looks good!
Thank you for creating a crafty, smarter, revamped message-tray for Gnome3.6 for the in time for Ubuntu 12.10 release, but I was in love with the cleverly contrasted shadow design the previous tray had. I noticed my entire screen lifts up when checking on my indicators which was a shock at first. I understand that some want a design similar to another OS's tray, but I thought that the simple, shadow design that contrasted with the top panel, had an amazing effect on Gnome, as well as the entire shell's outlook with the Dash. If there is anyway possible, to revert or change the current chunky, screen-moving message tray back to it's previous shadowy design, please let me know. Again, I appreciate all of your hard work with your free time, but again, a lot of us had fallen in love with the shadow.