WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

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

Download all attachments as: .zip

Change History (77)

koopersmith3 years ago

comment:1 scribu3 years ago

  • Cc scribu added

ocean903 years ago

Screenshot: How it will look.

comment:2 markjaquith3 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.

comment:3 DrewAPicture3 years ago

  • Cc xoodrew@… added

comment:4 koopersmith3 years ago

In [18621]:

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

comment:5 follow-up: koopersmith3 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.

comment:6 follow-up: DrewAPicture3 years ago

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

comment:7 DrewAPicture3 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 3 years ago by DrewAPicture (previous) (diff)

comment:8 SergeyBiryukov3 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?

comment:9 in reply to: ↑ 6 koopersmith3 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!

comment:10 DrewAPicture3 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 3 years ago by DrewAPicture (previous) (diff)

comment:11 follow-up: koopersmith3 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.

DrewAPicture3 years ago

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

aaroncampbell3 years ago

Border gap

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

comment:14 in reply to: ↑ 11 SergeyBiryukov3 years ago

Replying to koopersmith:

RTL patches are more than welcome. :)

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

SergeyBiryukov3 years ago

comment:15 in reply to: ↑ 5 mmuro3 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.

comment:16 follow-up: azaozz3 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 3 years ago by azaozz (previous) (diff)

comment:17 ocean903 years ago

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

Duplicate: #18580

duck_3 years ago

comment:18 duck_3 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 :)

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

comment:20 in reply to: ↑ 16 ; follow-up: WraithKenny3 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.

comment:21 WraithKenny3 years ago

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

comment:22 in reply to: ↑ 20 azaozz3 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 :)

comment:23 SergeyBiryukov3 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.

comment:24 DrewAPicture3 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 3 years ago by DrewAPicture (previous) (diff)

comment:25 holizz3 years ago

  • Cc tom@… added

comment:26 andrewryno3 years ago

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

duck_3 years ago

comment:27 duck_3 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.

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

comment:29 scribu3 years ago

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

comment:30 koopersmith3 years ago

In [18754]:

Remove expanded class from flyout menus. see #18382.

comment:31 koopersmith3 years ago

In [18761]:

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

comment:32 scribu3 years ago

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

comment:33 olleicua3 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??

comment:34 dd323 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.

SergeyBiryukov3 years ago

comment:35 SergeyBiryukov3 years ago

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

comment:36 koopersmith3 years ago

In [18881]:

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

comment:37 azaozz3 years ago

In [18901]:

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

comment:38 jane3 years ago

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

comment:39 follow-up: ocean903 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.

comment:40 in reply to: ↑ 39 koopersmith3 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.

comment:41 follow-up: koopersmith3 years ago

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

comment:42 azaozz3 years ago

In [18940]:

Don't move current open submenus, see #18382

comment:43 in reply to: ↑ 41 ; follow-up: azaozz3 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 3 years ago by azaozz (previous) (diff)

comment:44 in reply to: ↑ 43 ocean903 years ago

Replying to azaozz:

[18940] should fix this.

Yes.

comment:45 koopersmith3 years ago

In [18942]:

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

comment:46 koopersmith3 years ago

In [18944]:

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

comment:47 koopersmith3 years ago

In [18946]:

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

comment:48 koopersmith3 years ago

In [18947]:

Improve padding on admin menu submenus. see #18382.

comment:49 follow-up: Dunhamzzz3 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

comment:50 chipbennett3 years ago

  • Cc chip@… added

comment:51 follow-up: RVoodoo3 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

comment:52 in reply to: ↑ 51 ; follow-up: aaroncampbell3 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?

comment:53 in reply to: ↑ 52 RVoodoo3 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

comment:54 azaozz3 years ago

In [18958]:

IE7 fixes for the admin menu, see #18382

comment:55 in reply to: ↑ 49 scribu3 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?

comment:56 ramiy3 years ago

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

comment:57 toscho3 years ago

  • Cc info@… added

ocean903 years ago

Add blue style to admin menu

comment:58 ocean902 years ago

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

comment:59 koopersmith2 years ago

In [18983]:

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

comment:60 koopersmith2 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.

comment:61 olleicua2 years ago

  • Cc olleicua@… added

Sorry, found a bug 19119

comment:62 koopersmith2 years ago

In [19199]:

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

comment:63 koopersmith2 years ago

In [19277]:

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

comment:64 koopersmith2 years ago

In [19433]:

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

comment:65 koopersmith2 years ago

In [19439]:

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

comment:66 ianatkins2 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.