WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 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 4 years ago.
Blue on state comp
menu-bits.gif (1.2 KB) - added by johnonolan 4 years ago.
Replaces file of same name
menu-dark.gif (181 bytes) - added by johnonolan 4 years ago.
Replaces file of same name
13486.diff (3.1 KB) - added by johnonolan 4 years ago.
Full implementation of mockup
13486.2.diff (3.2 KB) - added by johnonolan 4 years ago.
Revision to eliminate bug
13486-betterbubble.patch (3.2 KB) - added by ocean90 4 years ago.
Better bubble handling
wordpress_menu_active_by_rick_nunn.png (30.7 KB) - added by RickNunn 4 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 4 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 4 years ago.
13486-submenububblefix.patch (3.4 KB) - added by ocean90 4 years ago.
gray-admin-lighter-bar.png (39.6 KB) - added by jane 4 years ago.
Gray version as alternate to the blue.
13486.3.diff (2.8 KB) - added by johnonolan 4 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 4 years ago.
Replaces file of same name for grey on-state patch.
13486.4.diff (3.4 KB) - added by johnonolan 4 years ago.
Revised patch, fixes bug.
13486.5.diff (3.4 KB) - added by johnonolan 4 years ago.
Revised patch with ocean90's addition
13486.6.diff (3.6 KB) - added by johnonolan 4 years ago.
Revised patch with darker text
13486.7.diff (3.4 KB) - added by johnonolan 4 years ago.
Same patch as before, but this one isn't broken.
menu-bits-rtl.gif (1.2 KB) - added by johnonolan 4 years ago.
13486.8.diff (5.2 KB) - added by duck_ 4 years ago.
13486.9.diff (503 bytes) - added by johnonolan 4 years ago.
Fixes bug found by ocean90, props duck_

Download all attachments as: .zip

Change History (55)

jane4 years ago

Blue on state comp

comment:1 jane4 years ago

  • Description modified (diff)

comment:2 jane4 years ago

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

comment:3 ocean904 years ago

  • Cc ocean90@… added

comment:4 nacin4 years ago

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

johnonolan4 years ago

Replaces file of same name

johnonolan4 years ago

Replaces file of same name

johnonolan4 years ago

Full implementation of mockup

comment:5 johnonolan4 years ago

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

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

johnonolan4 years ago

Revision to eliminate bug

comment:6 johnonolan4 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 :)

comment:7 jane4 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.

comment:8 ocean904 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.

comment:9 dd324 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.

comment:10 duck_4 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

ocean904 years ago

Better bubble handling

comment:11 ocean904 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?

RickNunn4 years ago

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

RickNunn4 years ago

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

ocean904 years ago

comment:12 ocean904 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

comment:13 jane4 years ago

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

jane4 years ago

Gray version as alternate to the blue.

comment:14 azaozz4 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).

johnonolan4 years ago

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

johnonolan4 years ago

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

johnonolan4 years ago

Revised patch, fixes bug.

comment:16 ocean904 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;
}

comment:17 johnonolan4 years ago

Awesome job! I completely agree

johnonolan4 years ago

Revised patch with ocean90's addition

comment:18 azaozz4 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.

comment:19 ocean904 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. :)

comment:20 nacin4 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.

comment:21 johnonolan4 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.

comment:22 nacin4 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?

comment:23 johnonolan4 years ago

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

comment:24 markjaquith4 years ago

We're waiting on an updated patch from johnonolan.

johnonolan4 years ago

Revised patch with darker text

johnonolan4 years ago

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

johnonolan4 years ago

comment:25 nacin4 years ago

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

comment:26 nacin4 years ago

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

comment:27 nacin4 years ago

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

comment:28 ocean904 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.

comment:29 duck_4 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_4 years ago

comment:30 duck_4 years ago

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

comment:31 follow-up: johnonolan4 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.

comment:32 in reply to: ↑ 31 duck_4 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.

johnonolan4 years ago

Fixes bug found by ocean90, props duck_

comment:33 dd324 years ago

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

comment:34 johnonolan4 years ago

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

Closing as fixed - reopen if anything else comes up

comment:35 dd324 years ago

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

Note: See TracTickets for help on using tickets.