WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

Last modified 4 years ago

#18382 closed task (blessed) (fixed)

Convert admin menu dropdowns to flyouts

Reported by: koopersmith Owned by: koopersmith
Milestone: 3.3 Priority: normal
Severity: normal Version: 3.2.1
Component: UI Keywords: ux-feedback
Focuses: Cc:

Description

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.

Attachments (11)

18382.diff (14.7 KB) - added by koopersmith 5 years ago.
fly.png (64.3 KB) - added by ocean90 5 years ago.
Screenshot: How it will look.
flyout_compare.png (32.9 KB) - added by DrewAPicture 4 years ago.
This is what I'm comparing (note the white flyout on white background):
flyout-missing-border.png (5.5 KB) - added by aaroncampbell 4 years ago.
Border gap
18382.rtl.patch (2.6 KB) - added by SergeyBiryukov 4 years ago.
18382.fix-glitch.diff (519 bytes) - added by duck_ 4 years ago.
18382.contrast.diff (444 bytes) - added by downstairsdev 4 years ago.
Screen Shot 2011-09-15 at 1.14.19 PM.png (153.0 KB) - added by andrewryno 4 years ago.
18382.classic.diff (1.1 KB) - added by duck_ 4 years ago.
18382.rtl-2.patch (2.7 KB) - added by SergeyBiryukov 4 years ago.
18382.colors-classic.patch (2.6 KB) - added by ocean90 4 years ago.
Add blue style to admin menu

Download all attachments as: .zip

Change History (77)

@koopersmith
5 years ago

#1 @scribu
5 years ago

  • Cc scribu added

@ocean90
5 years ago

Screenshot: How it will look.

#2 @markjaquith
4 years ago

  • Keywords needs-refresh added

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

#3 @DrewAPicture
4 years ago

  • Cc xoodrew@… added

#4 @koopersmith
4 years ago

In [18621]:

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

#5 follow-up: @koopersmith
4 years ago

  • Keywords has-patch needs-refresh removed
  • Status changed from new to accepted

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

#6 follow-up: @DrewAPicture
4 years ago

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

#7 @DrewAPicture
4 years ago

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.

Last edited 4 years ago by DrewAPicture (previous) (diff)

#8 @SergeyBiryukov
4 years ago

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?

#9 in reply to: ↑ 6 @koopersmith
4 years ago

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!

#10 @DrewAPicture
4 years ago

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, because they're already there. 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.

Last edited 4 years ago by DrewAPicture (previous) (diff)

#11 follow-up: @koopersmith
4 years ago

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.

@DrewAPicture
4 years ago

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

@aaroncampbell
4 years ago

Border gap

#12 @aaroncampbell
4 years ago

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.
Border gap

#14 in reply to: ↑ 11 @SergeyBiryukov
4 years ago

Replying to koopersmith:

RTL patches are more than welcome. :)

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

#15 in reply to: ↑ 5 @mmuro
4 years ago

  • Cc fuzzboxer@… added

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.

#16 follow-up: @azaozz
4 years ago

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.
Last edited 4 years ago by azaozz (previous) (diff)

#17 @ocean90
4 years ago

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

Duplicate: #18580

#18 @duck_
4 years ago

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

#19 @downstairsdev
4 years ago

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.

#20 in reply to: ↑ 16 ; follow-up: @WraithKenny
4 years ago

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.

#21 @WraithKenny
4 years ago

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

#22 in reply to: ↑ 20 @azaozz
4 years ago

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

#23 @SergeyBiryukov
4 years ago

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.

#24 @DrewAPicture
4 years ago

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.

Last edited 4 years ago by DrewAPicture (previous) (diff)

#25 @holizz
4 years ago

  • Cc tom@… added

#26 @andrewryno
4 years ago

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

@duck_
4 years ago

#27 @duck_
4 years ago

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.

#28 @scribu
4 years ago

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.

#29 @scribu
4 years ago

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

#30 @koopersmith
4 years ago

In [18754]:

Remove expanded class from flyout menus. see #18382.

#31 @koopersmith
4 years ago

In [18761]:

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

#32 @scribu
4 years ago

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

#33 @olleicua
4 years ago

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??

#34 @dd32
4 years ago

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.

#35 @SergeyBiryukov
4 years ago

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

#36 @koopersmith
4 years ago

In [18881]:

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

#37 @azaozz
4 years ago

In [18901]:

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

#38 @jane
4 years ago

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

#39 follow-up: @ocean90
4 years ago

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.

#40 in reply to: ↑ 39 @koopersmith
4 years ago

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.

#41 follow-up: @koopersmith
4 years ago

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

#42 @azaozz
4 years ago

In [18940]:

Don't move current open submenus, see #18382

#43 in reply to: ↑ 41 ; follow-up: @azaozz
4 years ago

Replying to ocean90:

[18940] should fix this.

Replying to koopersmith:

Once the style 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.

Version 0, edited 4 years ago by azaozz (next)

#44 in reply to: ↑ 43 @ocean90
4 years ago

Replying to azaozz:

[18940] should fix this.

Yes.

#45 @koopersmith
4 years ago

In [18942]:

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

#46 @koopersmith
4 years ago

In [18944]:

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

#47 @koopersmith
4 years ago

In [18946]:

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

#48 @koopersmith
4 years ago

In [18947]:

Improve padding on admin menu submenus. see #18382.

#49 follow-up: @Dunhamzzz
4 years ago

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

#50 @chipbennett
4 years ago

  • Cc chip@… added

#51 follow-up: @RVoodoo
4 years ago

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

http://voodoopress.com/wp-content/uploads/2011/10/example2.jpg

http://voodoopress.com/wp-content/uploads/2011/10/example1.jpg

#52 in reply to: ↑ 51 ; follow-up: @aaroncampbell
4 years ago

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?

#53 in reply to: ↑ 52 @RVoodoo
4 years ago

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

#54 @azaozz
4 years ago

In [18958]:

IE7 fixes for the admin menu, see #18382

#55 in reply to: ↑ 49 @scribu
4 years ago

  • Keywords ux-feedback added

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?

#56 @ramiy
4 years ago

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

#57 @toscho
4 years ago

  • Cc info@… added

@ocean90
4 years ago

Add blue style to admin menu

#58 @ocean90
4 years ago

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

#59 @koopersmith
4 years ago

In [18983]:

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

#60 @koopersmith
4 years ago

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

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

#61 @olleicua
4 years ago

  • Cc olleicua@… added

Sorry, found a bug 19119

#62 @koopersmith
4 years ago

In [19199]:

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

#63 @koopersmith
4 years ago

In [19277]:

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

#64 @koopersmith
4 years ago

In [19433]:

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

#65 @koopersmith
4 years ago

In [19439]:

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

#66 @ianatkins
4 years ago

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.

Note: See TracTickets for help on using tickets.