Make WordPress Core

Opened 5 years ago

Last modified 18 months ago

#32579 new defect (bug)

Admin menu: color schemes fly-out menu background when focused

Reported by: afercia Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.2
Component: Administration Keywords: has-patch
Focuses: ui Cc:


Small visual glitch about Sass color schemes, please refer to the screenshot below.
To reproduce:

  • set a color scheme (here it's "Ocean" which doesn't use dark backgrounds and makes this clear)
  • collapse the admin menu
  • tab with your keyboard and focus the current top menu item

On the left when focused, on the right when hovered. Also, notice a (minor) inconsistency about the displaying of the small arrow.


Attachments (2)

32579.diff (1.1 KB) - added by ryelle 5 years ago.
32579.2.diff (2.4 KB) - added by afercia 5 years ago.

Download all attachments as: .zip

Change History (5)

5 years ago

#1 @ryelle
5 years ago

32579.diff adds the :focus'd submenu selector to the color schemes, so they get the correct colors per-scheme. It also removes the small arrow when the item is focused or the menu is open.

#2 @Bueltge
5 years ago

  • Keywords has-patch added; needs-patch removed

The patch works fine, tested in this scenario with mouse and keyboard, focus and hover.

But is it also a difference on the box-shadow. The box-shadow is missed on focus, hover for a active item of the menu. This difference was clear for me. But I don't know what is the goal, with or without box-shadow. Currently is not always the same. Maybe a topic for new ticket? This topic here was solved, but leave a open new topic.

You see this shadow topic also on the screenshots from the reporter.

Version 2, edited 5 years ago by Bueltge (previous) (next) (diff)

5 years ago

#3 @afercia
5 years ago

Refreshed patch. Would love the admin menu to be simpler but there's nothing simple here :) It's extremely difficult to keep track of all the possible menu states but I've tried to do my best. What I'm trying to do in this patch:

  • separate and simplify the rules for the box-shadow so it's applied and reset just in two places
  • remove the small arrow on the current item also when the menu is in auto-fold state

Would definitely need some testing. @ryelle @Bueltge would greatly appreciate your help when you get a chance :)

To recap there are at least 4 states to test:

  • expanded (default on large screens)
  • folded (user intentionally collapsed the menu)
  • auto-fold with a viewport less than 782px
  • auto-fold with a viewport greater than 782px
Last edited 5 years ago by afercia (previous) (diff)
Note: See TracTickets for help on using tickets.