Make WordPress Core

Opened 13 years ago

Closed 12 years ago

Last modified 12 years ago

#18382 closed task (blessed) (fixed)

Convert admin menu dropdowns to flyouts

Reported by: koopersmith's profile koopersmith Owned by: koopersmith's profile 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 13 years ago.
fly.png (64.3 KB) - added by ocean90 13 years ago.
Screenshot: How it will look.
flyout_compare.png (32.9 KB) - added by DrewAPicture 13 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 13 years ago.
Border gap
18382.rtl.patch (2.6 KB) - added by SergeyBiryukov 13 years ago.
18382.fix-glitch.diff (519 bytes) - added by duck_ 13 years ago.
18382.contrast.diff (444 bytes) - added by downstairsdev 13 years ago.
Screen Shot 2011-09-15 at 1.14.19 PM.png (153.0 KB) - added by andrewryno 13 years ago.
18382.classic.diff (1.1 KB) - added by duck_ 13 years ago.
18382.rtl-2.patch (2.7 KB) - added by SergeyBiryukov 13 years ago.
18382.colors-classic.patch (2.6 KB) - added by ocean90 12 years ago.
Add blue style to admin menu

Download all attachments as: .zip

Change History (77)

@koopersmith
13 years ago

#1 @scribu
13 years ago

  • Cc scribu added

@ocean90
13 years ago

Screenshot: How it will look.

#2 @markjaquith
13 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
13 years ago

  • Cc xoodrew@… added

#4 @koopersmith
13 years ago

In [18621]:

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

#5 follow-up: @koopersmith
13 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
13 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
13 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 13 years ago by DrewAPicture (previous) (diff)

#8 @SergeyBiryukov
13 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
13 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
13 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 13 years ago by DrewAPicture (previous) (diff)

#11 follow-up: @koopersmith
13 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
13 years ago

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

@aaroncampbell
13 years ago

Border gap

#12 @aaroncampbell
13 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
13 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
13 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
13 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 13 years ago by azaozz (previous) (diff)

#17 @ocean90
13 years ago

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

Duplicate: #18580

#18 @duck_
13 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
13 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
13 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
13 years ago

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

#22 in reply to: ↑ 20 @azaozz
13 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
13 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
13 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 13 years ago by DrewAPicture (previous) (diff)

#25 @holizz
13 years ago

  • Cc tom@… added

#26 @andrewryno
13 years ago

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

@duck_
13 years ago

#27 @duck_
13 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
13 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
13 years ago

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

#30 @koopersmith
13 years ago

In [18754]:

Remove expanded class from flyout menus. see #18382.

#31 @koopersmith
13 years ago

In [18761]:

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

#32 @scribu
13 years ago

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

#33 @olleicua
13 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
13 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
13 years ago

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

#36 @koopersmith
12 years ago

In [18881]:

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

#37 @azaozz
12 years ago

In [18901]:

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

#38 @jane
12 years ago

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

#39 follow-up: @ocean90
12 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
12 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
12 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
12 years ago

In [18940]:

Don't move current open submenus, see #18382

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

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.

Last edited 12 years ago by azaozz (previous) (diff)

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

Replying to azaozz:

[18940] should fix this.

Yes.

#45 @koopersmith
12 years ago

In [18942]:

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

#46 @koopersmith
12 years ago

In [18944]:

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

#47 @koopersmith
12 years ago

In [18946]:

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

#48 @koopersmith
12 years ago

In [18947]:

Improve padding on admin menu submenus. see #18382.

#49 follow-up: @Dunhamzzz
12 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
12 years ago

  • Cc chip@… added

#51 follow-up: @RVoodoo
12 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
12 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
12 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
12 years ago

In [18958]:

IE7 fixes for the admin menu, see #18382

#55 in reply to: ↑ 49 @scribu
12 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
12 years ago

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

#57 @toscho
12 years ago

  • Cc info@… added

@ocean90
12 years ago

Add blue style to admin menu

#58 @ocean90
12 years ago

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

#59 @koopersmith
12 years ago

In [18983]:

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

#60 @koopersmith
12 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
12 years ago

  • Cc olleicua@… added

Sorry, found a bug 19119

#62 @koopersmith
12 years ago

In [19199]:

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

#63 @koopersmith
12 years ago

In [19277]:

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

#64 @koopersmith
12 years ago

In [19433]:

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

#65 @koopersmith
12 years ago

In [19439]:

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

#66 @ianatkins
12 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.