Convert admin menu dropdowns to flyouts

[koopersmith]

For better menu management and user experience, let's take a page from the compact menu's book and use flyout menus.

Patch is a first pass, and needs cleanup. Some gradients are not consistent, colors/design are not final. 3.2 animations (which are now used in both menus) could use some cleanup. Yay.

Screenshot: How it will look.

Let's freshen up and clean up this, and get it in. Consider the UI to be placeholder. We can iterate.

In [18621]:

Switch admin menus to flyouts from dropdowns. First pass, see #18382.

Feedback welcome. Please keep in mind that the UI and animations still need tweaking.

I like this a lot. My nits were with UI and or animation so I'll keep my mouth shut. Nice work.

One thing that occurs to me is that it would be nice to carry over the flyout effect to the "Howdy, [user]" menu too. That may be another ticket and another time, though.

Love the idea of getting to almost any admin page with a single click.

Are RTL patches welcome now too, or will it be taken care of later in the cycle?

Replying to DrewAPicture:

I like this a lot. My nits were with UI and or animation so I'll keep my mouth shut. Nice work.

Thanks! My comment was not meant to deter people from sharing suggestions, just to inform them that the UI and animations are ripe for improvement. Suggest away!

Well, one thing that throws me a little is something I'm not sure has a solution. For instance, if you're using the collapsed-menu flyouts, they have the section header with the gray background--which sets the flyout off the background better than straight white with a shadow. But the problem is that with the default menu flyouts, section headers are completely moot. You need a way to accomplish the same effect without duplicating the flyout headers.

I also detected a bit of a delay between flyouts that was noticeable but so slight as to not make much of a difference.

Replying to SergeyBiryukov:

Are RTL patches welcome now too, or will it be taken care of later in the cycle?

RTL patches are more than welcome. :)

There will be additional changes, but keeping RTL in sync is a good thing as far as I'm concerned.

This is what I'm comparing (note the white flyout on white background):

Border gap

I think the gap is being caused by the indicator arrow overlapping the border. It happens when you hover over one item and then move up to the item above it.

Related #18198

Replying to koopersmith:

RTL patches are more than welcome. :)

18382.rtl.patch​ contains RTL fixes for current flyouts implementation.

Replying to koopersmith:

Feedback welcome. Please keep in mind that the UI and animations still need tweaking.

Personally, I think this change is taking a step back in usability. The cons far outweigh the pros here. ​Fitts' law comes to mind.

Most of my complaints can be ​summed up here, but the gist is that I think hovers will make the admin less usable and less friendly.

Seeing two glitches:

• when the menu is folded the active submenu doesn't show,
• adding and removing the 'folded' css class to the body tag doesn't toggle the menu completely. The active submenu remains visible despite the 'folded' class.

when the menu is folded the active submenu doesn't show.

Duplicate: #18580

when the menu is folded the active submenu doesn't show

See 18382.fix-glitch.diff. Firefox doesn't seem to like have two mouseout/mouseover events caused by always calling fold. If my comment does not reflect the intention of always calling fold then ignore the patch :)

I'm wondering if there should be more contrast between the flyout and what's below it. Perhaps adding a light gray background to the flyout or fading #wpbody when you're hovering over #admin menu would make sense.

Just an experiment. Attached a patch for fading #wpbody.

Replying to azaozz:

• when the menu is folded the active submenu doesn't show,

This glitch is only present when the page is loaded folded. Opening and collapsing the menu clears it up also. Something on how the js is initialized, but I can't find it.

duck_'s patch works and seems to make sense :)

Replying to WraithKenny:

The way the fold/unfold (used to) work is only in css depending on the class 'folded' on the body. This is broken now. Also when no js, the submenus are completely hidden with no way to reach them.

@duck_'s patch works but I don't see the point in having two handlers that do exactly the same thing in the first place. The fly-out 'headers' can be shown/hidden with css depending on the menu being folded or not. In short, this needs more work :)

Apparently I got accustomed to flyouts. If we could review/commit 18382.rtl.patch​, it would make patching RTL tickets a bit easier :) Currently flyouts are displayed outside of the screen there.

XPost from #18198 (Responsive Admin)

This may be a candidate for another ticket another time, but how will the (new flyouts) menu be treated when the dashboard is resized with this new responsive admin? Will the hover still exist but just be moot in terms of touch screens? Will the menus expand down automatically at a certain screen width? Or maybe a tap to open animation without a page refresh? My motivation for asking is this: If the purpose of the flyouts was to make any menu accessible via one-click access, how will you match that for devices that don't inherently support hover events?

Something to think about.

Uploaded screenshot of responsive admin issues with the new flyouts (as well as the regular submenu). See #18198 for responsive admin.

Flyouts and the blue/classic theme currently don't mix. See 18382.classic.diff for first half of a patch -- missing the two blocks for .expanded ... :hover colours which would need to be decided on.

I believe this introduced a bug when the menu is collapsed:

If you're on wp-admin/edit.php, you can't access Posts -> Add New or any other submenu of Posts.

If you expand the menu and then collapse it again, it will work, but only until the next page load.

In [18754]:

Remove expanded class from flyout menus. see #18382.

In [18761]:

Use admin menu API when responsively collapsing the menu. CSS fixes. see #18382.

Opened a separate ticket for the bug I mentioned before: #18763

I tried running patch -p0 < 18382.diff on a fresh install of v3.2.1. The patch ran fine but the resulting admin page has no flyouts. Am I doing something wrong??

I tried running patch -p0 < 18382.diff on a fresh install of v3.2.1.

You'll find that there's more than just that patch in the current flyouts, You're far better off just installing a test install of trunk (3.3) to test the features out.

Refreshed 18382.rtl.patch in view of [18754].

In [18881]:

Greased Lightning Flyouts! Flyouts are now snappy and work without JS. see #18382.

In [18901]:

Fix menu hover when loaded folded, simplify menu JS and auto-folding, see #18382

Weird overlaps from the timing changes need to be adjusted, style will be updated during beta one.

​http://cl.ly/Anfr This happens if you change the height of the browser window so that you can only see the settings menu. Make it active and then hover it. Happens in Chrome.

Replying to ocean90:

​http://cl.ly/Anfr This happens if you change the height of the browser window so that you can only see the settings menu. Make it active and then hover it. Happens in Chrome.

This was broken in [18901]. Portions of that changeset will need to be reverted.

[18901] also caused the submenu overlap reported in #18902. Due to the nature of the arrows, this will require a craftier solution.

In [18940]:

Don't move current open submenus, see #18382

Replying to ocean90:

[18940] should fix this.

Replying to koopersmith:

Once the visual styling for the flyouts is finalized we can make the "fat arrow" image match the menu color and have the background transparent. Also these images would be better in a sprite.

Replying to azaozz:

[18940] should fix this.

Yes.

In [18942]:

Create admin menu arrows using CSS3 transforms. props chexee. see #18382, fixes #18902.

In [18944]:

Fix admin menu arrow positioning when menu is collapsed plus minor positioning tweaks. see #18382.

In [18946]:

Prevent admin menu sub-items from crowding the arrows when the menu is expanded. see #18382.

In [18947]:

Improve padding on admin menu submenus. see #18382.

Here is a lengthy discussion on why this "feature" is a pretty terrible idea:
​http://wordpress.org/support/topic/admin-menu-doesnt-expandcollapse-in-33-beta-1-why

The flyouts are unusable on IE7. Transparent backgrounds, bad layering

​http://wordpress.org/support/topic/ie7-flyout-menus-are-transparent-layered-wrong-unuseable?replies=5

Replying to RVoodoo:

The flyouts are unusable on IE7.

Yeah, I was supposed to open another ticket for that, but my day got crazy. Do you think you could put that same info in a new ticket and link to it from here?

Replying to aaroncampbell:

Replying to RVoodoo:

The flyouts are unusable on IE7.

Yeah, I was supposed to open another ticket for that, but my day got crazy. Do you think you could put that same info in a new ticket and link to it from here?

Sure thing boss, can be found here:
http://core.trac.wordpress.org/ticket/18924

In [18958]:

IE7 fixes for the admin menu, see #18382

Replying to Dunhamzzz:

Here is a lengthy discussion on why this "feature" is a pretty terrible idea:
​http://wordpress.org/support/topic/admin-menu-doesnt-expandcollapse-in-33-beta-1-why

The ticket description doesn't actually give any concrete reasons for this change.

I don't care either way, but it would be nice to have a clear reasoning written, which we can point users to.

koop? jane?

Related: #18906 - Admin fly-out menu are not working in RTL (hebrew and arabic).

Add blue style to admin menu

18382.colors-classic.patch​ will fix the admin menu with blue theme.

In [18983]:

Fix the admin menu in the blue theme. props ocean90. see #18382.

Closing as fixed. If you encounter any bugs, please open a new ticket.

Sorry, found a bug 19119

In [19199]:

Improve display logic for admin menu arrows. see #18382.

In [19277]:

Fix off-by-one pixel error in folded admin menus. see #18382.

In [19433]:

In the collapsed admin menu, retain the arrow when hovering over a childless item. see #18382.

In [19439]:

In expanded admin menus, block the shadow when hovering over a childless item. see #18382.

Sorry for late comment, but why does the flyout rely on a Javascript toggle class.

The experience is much richer by using the css :hover class to show the sub menus.
Try moving your mouse over several menus, you'll sometimes catch them overlapping
or being sluggish. Try the same with Javascript disabled, which is using just the CSS :hover, and
the result is much nicer.