WordPress.org

Make WordPress Core

Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#13486 closed task (blessed) (fixed)

New "on" state for admin menus

Reported by: jane Owned by: JohnONolan
Milestone: 3.0 Priority: low
Severity: minor Version: 3.0
Component: UI Keywords: admin-menu ui-feedback
Focuses: Cc:

Description (last modified by 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.

Attachments (20)

Untitled-4.png (29.7 KB) - added by jane 11 years ago.
Blue on state comp
menu-bits.gif (1.2 KB) - added by johnonolan 11 years ago.
Replaces file of same name
menu-dark.gif (181 bytes) - added by johnonolan 11 years ago.
Replaces file of same name
13486.diff (3.1 KB) - added by johnonolan 11 years ago.
Full implementation of mockup
13486.2.diff (3.2 KB) - added by johnonolan 11 years ago.
Revision to eliminate bug
13486-betterbubble.patch (3.2 KB) - added by ocean90 11 years ago.
Better bubble handling
wordpress_menu_active_by_rick_nunn.png (30.7 KB) - added by RickNunn 11 years ago.
I had a go at some 'Active' states for the menu. Few different versions.
wordpress_menu_active_more_contrast_by_rick_nunn.png (30.9 KB) - added by RickNunn 11 years ago.
I also did these versions for fear of them not being enough contrast in the previous ones.
13486-no-orange.patch (3.8 KB) - added by ocean90 11 years ago.
13486-submenububblefix.patch (3.4 KB) - added by ocean90 11 years ago.
gray-admin-lighter-bar.png (39.6 KB) - added by jane 11 years ago.
Gray version as alternate to the blue.
13486.3.diff (2.8 KB) - added by johnonolan 11 years ago.
Full patch for grey on-state. Ignore update notification bubble colours, we have a seperate ticket for that.
menu-bits.2.gif (1.1 KB) - added by johnonolan 11 years ago.
Replaces file of same name for grey on-state patch.
13486.4.diff (3.4 KB) - added by johnonolan 11 years ago.
Revised patch, fixes bug.
13486.5.diff (3.4 KB) - added by johnonolan 11 years ago.
Revised patch with ocean90's addition
13486.6.diff (3.6 KB) - added by johnonolan 11 years ago.
Revised patch with darker text
13486.7.diff (3.4 KB) - added by johnonolan 11 years ago.
Same patch as before, but this one isn't broken.
menu-bits-rtl.gif (1.2 KB) - added by johnonolan 11 years ago.
13486.8.diff (5.2 KB) - added by duck_ 11 years ago.
13486.9.diff (503 bytes) - added by johnonolan 11 years ago.
Fixes bug found by ocean90, props duck_

Download all attachments as: .zip

Change History (55)

@jane
11 years ago

Blue on state comp

#1 @jane
11 years ago

  • Description modified (diff)

#2 @jane
11 years ago

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

#3 @ocean90
11 years ago

  • Cc ocean90@… added

#4 @nacin
11 years ago

  • Owner set to JohnONolan
  • Status changed from new to assigned

@johnonolan
11 years ago

Replaces file of same name

@johnonolan
11 years ago

Replaces file of same name

@johnonolan
11 years ago

Full implementation of mockup

#5 @johnonolan
11 years ago

  • Component changed from Graphic Design to UI
  • Keywords ui-feedback added

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

@johnonolan
11 years ago

Revision to eliminate bug

#6 @johnonolan
11 years ago

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 :)

#7 @jane
11 years ago

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.

#8 @ocean90
11 years ago

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.

#9 @dd32
11 years ago

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.

#10 @duck_
11 years ago

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
11 years ago

Better bubble handling

#11 @ocean90
11 years ago

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
11 years ago

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

@RickNunn
11 years ago

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

#12 @ocean90
11 years ago

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

#13 @jane
11 years ago

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

@jane
11 years ago

Gray version as alternate to the blue.

#14 @azaozz
11 years ago

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
11 years ago

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

@johnonolan
11 years ago

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

@johnonolan
11 years ago

Revised patch, fixes bug.

#16 @ocean90
11 years ago

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;
}

#17 @johnonolan
11 years ago

Awesome job! I completely agree

@johnonolan
11 years ago

Revised patch with ocean90's addition

#18 @azaozz
11 years ago

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.

#19 @ocean90
11 years ago


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. :)

#20 @nacin
11 years ago

!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.

#21 @johnonolan
11 years ago

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.

#22 @nacin
11 years ago

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?

#23 @johnonolan
11 years ago

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

#24 @markjaquith
11 years ago

We're waiting on an updated patch from johnonolan.

@johnonolan
11 years ago

Revised patch with darker text

@johnonolan
11 years ago

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

#25 @nacin
11 years ago

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

#26 @nacin
11 years ago

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

#27 @nacin
11 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

#28 @ocean90
11 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

#29 @duck_
11 years ago

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_
11 years ago

#30 @duck_
11 years ago

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

#31 follow-up: @johnonolan
11 years ago

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.

#32 in reply to: ↑ 31 @duck_
11 years ago

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
11 years ago

Fixes bug found by ocean90, props duck_

#33 @dd32
11 years ago

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

#34 @johnonolan
11 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

Closing as fixed - reopen if anything else comes up

#35 @dd32
11 years ago

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

Note: See TracTickets for help on using tickets.