New "on" state for admin menus

[jane]

When we lightened up the admin header, almost everyone agreed that the on state for the left hand menu now stood out like a sore thumb, but we never got around to experimenting with lighter colors to suit the lighter header. The UI group discussed it yesterday, and today a volunteer did a bunch of mockups. @JohnONolan and I both like the one that is attached, which uses a blue background for the on state that is based on the menu link text color, changes the outline to the same blue, and changes the update notification bubble to white with regular dark text inside. We experimented with various shades of gray, but they tended not to stand out enough until they got to a point where it went back to feeling heavy.

It's definitely a change, so the people who take longer to adjust to change may initially hate it, but I think it does a good job of indicating the active state, and the blue color subtly reinforces that the active menu is a group of links.

So let's hear the feedback/debate, and if we can get a general agreement soonish, we can get it in before RC. Kevin (Conboy, the designer who did the mockup) can refine the graphics as needed and John will write the patch if we're a go.

[jane]

Blue on state comp

[jane]

Note, if pic looks blurry, zoom up a level.

[johnonolan]

Replaces file of same name

[johnonolan]

Replaces file of same name

[johnonolan]

Full implementation of mockup

[johnonolan]

Screenshot of patch: ​http://drp.ly/136tas

[johnonolan]

Revision to eliminate bug

[johnonolan]

New bug - not all menu items get a class of "current" when they're active - I don't know how to make that happen so would love some help :)

[jane]

The orange bubble is out of place. If we do go with this, should probably change the orange bubble to blue, so then when it reverses to white it will make sense. Seeing it in a full screen has me going back and forth over whether it strikes the right balance or stands out just a bit too much, but either way I think it is better than the heavy dark gray we have now.

[ocean90]

Can we use then the same blue color for the .button-primary class? Otherwise, there would be two different shades of blue because the button is a little darker.

[dd32]

so the people who take longer to adjust to change may initially hate it, but I think it does a good job of indicating the active state, and the blue color subtly reinforces that the active menu is a group of links.

Indeed I'm in that group (as usual), But its starting to blur the line between the Grey and Blue themes, This colour being rather close to a standard colour in that theme.

Note: If another colour is chosen, The Fresh colour palette on the users profile pages probably needs updating.

Can you post a link to a few of the other mockups as well? Not everyone who follows trac will be following the UI group's working processes.

[duck_]

There's a problem when using the new patch and having a collapsed admin menu, because the menu-bits image is changed the submenus (shown on hover) get a blue border while the header is still light grey. ​http://i.imgur.com/lXbpC.png

[ocean90]

Better bubble handling

[ocean90]

After chat with johnonolan, here is my patch.
duck_: I changed the border in 13486-betterbubble.patch. Maybe change the header background color too?

[RickNunn]

I had a go at some 'Active' states for the menu. Few different versions.

[RickNunn]

I also did these versions for fear of them not being enough contrast in the previous ones.

[ocean90]

In ​13486-no-orange.patch i could fix the bug with the plugins bubble, no current class needed.
Screenshot with all situations: ​http://grab.by/4w4u

[jane]

Further discussion has us leaning toward sticking with a gray theme and not going with the blue. Comp attached. Discuss. :)

[jane]

Gray version as alternate to the blue.

[azaozz]

Perhaps we should be looking at both "Fresh" and "Classic" admin themes at the same time. Also if changing anything else than colors in the CSS it would need to be tested in IE 6 & 7 (and any fixes added to ie.css).

[johnonolan]

Full patch for grey on-state. Ignore update notification bubble colours, we have a seperate ticket for that.

[johnonolan]

Replaces file of same name for grey on-state patch.

[johnonolan]

Screenshot of patch ​http://drp.ly/13oP1i

[johnonolan]

Revised patch, fixes bug.

[ocean90]

johnonolan: To remove the 1px line from ​http://grab.by/4wF2 I think we should add this:

.wp-has-current-submenu .wp-submenu {
	border-top: none !important;
}

[johnonolan]

Awesome job! I completely agree

[johnonolan]

Revised patch with ocean90's addition

[azaozz]

The !important is "evil" :)

• it doesn't work in IE
• it overrides even inline stiles in the HTML tags and makes it impossible to tweak the particular style from another stylesheet (plugins, alternate colors stylesheet?)

In nearly all cases it is possible to avoid using !important by properly "cascading" the styles.

[ocean90]

it doesn't work in IE

Oh, that is new for me and false. Works for me in 5,6,7,8 and 9. ;)

alternate colors stylesheet

Then color-fresh.css will not be loaded.

If you have a better idea, patch welcome. :)

[nacin]

!important doesn't work in IE in a specific situation, when the same property is referenced in the same block, and the important one is first. It's actually quite useful in some cases, take the min-height hack:

div#wrap {
   min-height: 200px;
   height: auto !important; // IE ignores this, all other browsers listen.
   height: 200px; // IE uses this instead.
}

That said, important is indeed evil and in most cases it does not need to be used with a better selector, as azaozz said.

[johnonolan]

Keep in mind that I'm working with what I've got here - the admin CSS files in their current state are less than coherant and an !important statment is just about the smallest thing wrong with them that you could possibly find. If all the styles were cascaded properly in the first place then the !important would indeed not be necassary, but that's way outside the scope of this ticket..

I'm planning on completely overhauling the CSS files for 3.1 and doing a really big clean-up job, but for now we're most definitely going to have to work with what's available to some extent.

[nacin]

Not to worry, I think azaozz and I are just musing in general, for the most part.

I like the gray much much better. Looks quite sharp. Is this ready?

[johnonolan]

Yep, make it happen and let's kick it around a bit!

[markjaquith]

We're waiting on an updated patch from johnonolan.

[johnonolan]

Revised patch with darker text

[johnonolan]

Same patch as before, but this one isn't broken.

[nacin]

(In [14870]) New 'on' state for admin menus. props JohnONolan, see #13486.

[nacin]

Okay, closing as fixed at this point. Per John, bubbles will be handled in #13474.

[ocean90]

There is a small bug: ​http://grab.by/4yy7

The dark bottom border is missing, I couldn't find the reason, maybe johnonolan will find it.

[duck_]

I believe those styles should fix the comments menu... also slipped in minor text change capital "D" in the middle of a sentence hmmm

[duck_]

Re-uploaded patch with fix for text-shadow on update-plugins count causing blur in the Dashboard submenu.

[johnonolan]

ocean90: I can't reproduce your bug - could you turn off custom-post types and see what happens? That's the only difference I can think of

duck_: As previously mentioned, update-plugins count is not being handled in this ticket.

[duck_]

Replying to johnonolan:

ocean90: I can't reproduce your bug - could you turn off custom-post types and see what happens? That's the only difference I can think of

duck_: As previously mentioned, update-plugins count is not being handled in this ticket.

Yeah the bug is when Comments is not the last menu (my patch should still be good whether or not Comments is the bottom menu). Sorry, didn't think about the bubbles ticket; though all I have done is remove blur when update-core.php is the current page/admin menu item.

[johnonolan]

Fixes bug found by ocean90, props duck_

[dd32]

(In [14873]) Add current menu item bottom-border to menu's without children. Props _duck. See #13486

[johnonolan]

Closing as fixed - reopen if anything else comes up

[dd32]

(In [14877]) More fine-tuning of CSS selectors in r14873. Props _duck. See #13486