GNOME Bugzilla – Bug 706037
system status: submenu issues
Last modified: 2013-08-22 14:39:03 UTC
The submenu triangles that are used in the new system status menu look uncomfortably small to me. Also, they are too far away from the edge of the menu for my taste. When opening a submenu, the menu gets very 'stripey' - we end up with stripes in 3 different shades of gray - the parent item remains in the selection color, the submenu has a different gray yet again. If you keynav into the submenu, you end up with a 'double-high selection, because the parent menuitem and the first submenu item use the same selection gray, which looks wierd.
CC'ing Allan for design review on this.
(In reply to comment #0) > The submenu triangles that are used in the new system status menu look > uncomfortably small to me. I agree. They look like they're about 4x3px right now. I have them as 9x5px in the mockups. > Also, they are too far away from the edge of the > menu for my taste. The only way to do that would be to reduce the outer padding around all the menus, though... > When opening a submenu, the menu gets very 'stripey' - we end up with stripes > in 3 different shades of gray - the parent item remains in the selection color, > the submenu has a different gray yet again. > > If you keynav into the submenu, you end up with a 'double-high selection, > because the parent menuitem and the first submenu item use the same selection > gray, which looks wierd. I somewhat agree, but this is really a question for a visual designer.
Created attachment 251750 [details] modified screenshot I think we need to tweak the layout a little bit. Right now it seems to lack a bit of cohesion. The attachment has a few small tweaks that I think help: * Make the menu wider by 18px * Remove 6px padding between the labels and the icons * Remove 6px padding between the sub-text (eg. wi-fi network name) and the triangle * Increase the size of the triangles to 5x9px * Decrease the size of the slider handles to 13x13px (not shown on the image)
Please ignore comment 3: I've reported it as bug 706134.
Created attachment 252738 [details] [review] theme: don't do harsh gradients for submenus - use a more flat gradient for submenus. nothing is as curved and it doesn't help legibility.
Created attachment 252742 [details] [review] theme: darken open submenu items - avoid the clash of adjacent open and selected items
There is one additional issue with the submenus - when transitioning, the metrics change and the item moves up and then back during the transition. This is most likely caused by the animated expander arrow glyph. This is also poses a problem when changing its size as it changes the metrics of the containing menuitem: .popup-submenu-menu-item-triangle { font-size: 160%; } will grow the menuitem in height :(
Created attachment 252749 [details] [review] theme: don't do harsh gradients for submenus - use a more flat gradient for submenus. nothing is as curved and it doesn't help legibility.
Clutter does not consider transformations when calculating the width/height of anything, so the rotation animation shouldn't be the one causing the bouncing. (Also, theme patches don't require review, so feel free to push)
Attachment 252742 [details] pushed as c18a6a6 - theme: darken open submenu items Attachment 252749 [details] pushed as b45bbb7 - theme: don't do harsh gradients for submenus