WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#32733 closed defect (bug) (fixed)

Customizer screen options toggle icon isn't aligned and scaled with the info/question mark icon

Reported by: paulwilde Owned by: obenland
Milestone: 4.3 Priority: low
Severity: normal Version: 4.3
Component: Customize Keywords: needs-patch
Focuses: ui Cc:
PR Number:

Description

The screen options toggle icon isn't aligned or scaled to look like it was designed to go alongside the question mark icon and as a result it looks a little out of place.

For reference its current state is the top option in my attachment.

I see there being a few ways of going about this:

  1. Vertically center the icon (See the second option in my attachment).
  2. Vertically center the icon and reduce its size to be the same dimensions as the question mark icon (See the third option in my attachment).
  3. Create an alternative smaller gear/advanced icon that's designed specifically to go alongside the question mark icon with the same dimensions.

Attachments (7)

menu-screen-options.png (27.5 KB) - added by paulwilde 4 years ago.
32733-focus-overlap.png (25.8 KB) - added by ocean90 4 years ago.
before.png (23.0 KB) - added by obenland 4 years ago.
after.png (22.7 KB) - added by obenland 4 years ago.
vertical-alignment.png (9.5 KB) - added by paulwilde 4 years ago.
32733- vertical-alignment.diff (2.0 KB) - added by dipesh.kakadiya 4 years ago.
Fixed vertical alignment
32733- vertical-alignment-1.diff (858 bytes) - added by dipesh.kakadiya 4 years ago.
fixed size issue

Download all attachments as: .zip

Change History (29)

#1 @paulwilde
4 years ago

I'm unable to edit my ticket's description, but a 4th option would be to scale up the question mark icon and leave the gear icon as is.

#2 @paulwilde
4 years ago

folletto actually shared a concept in #core-customize a while back of an alternative icon which works a lot better against the question mark icon.

https://files.slack.com/files-pri/T024MFP4J-F04V5DQ71/customizer-question-mark-toggle_copy.png

#3 @afercia
4 years ago

Comparing some dashicons sizes in icomoon, looks like the question mark one is a bit too small compared also to similar icons:

https://cldup.com/VetAAwc1Gd.png

#4 follow-up: @celloexpressions
4 years ago

  • Keywords needs-patch added
  • Type changed from enhancement to defect (bug)

We can't change the size of the icon with font-size here safely, since it's designed to the 20px grid (until it's reworked to use SVG instead). So I think the only viable option here is to change the icon in dashicons, or just live with the slight size difference and slightly tweak the vertical positioning. It's only off by maybe a pixel or two.

#5 in reply to: ↑ 4 @afercia
4 years ago

Replying to celloexpressions:

We can't change the size of the icon with font-size here safely, since it's designed to the 20px grid

Agreed, as you can see in the screenshot I've set the icomoon app with a 20px grid. The best option would probably be re-factoring the existing icon or creating an alternative icon.

#6 @celloexpressions
4 years ago

Calling in @melchoyce and @empireoflight here too.

#7 @valendesigns
4 years ago

  • Summary changed from Customiser screen options toggle icon isn't aligned and scaled with the info/question mark icon to Customizer screen options toggle icon isn't aligned and scaled with the info/question mark icon

I vote we get the info icon reworked slightly so it's the same size as the other solid round icons.

#8 @EmpireOfLight
4 years ago

I would just use css for now. Going forward, any recommendations for icon sizing/positioning should show icons in context; i.e., how they are seen in the wp-admin. [edit] i now see the context in @paulwilde fileedit Dashicons are sized explicitly for their context, and when lined up next to eachother may look misaligned or poorly scaled. The ? mark was likely designed for a context where it had to be that small, but I'm not sure. If we make it bigger, we should make sure it doesn't look too big in other places.

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

#9 @ocean90
4 years ago

#32930 was marked as a duplicate.

#10 @ocean90
4 years ago

  • Milestone changed from Awaiting Review to 4.3
  • Priority changed from normal to low

#11 follow-up: @helen
4 years ago

I prefer the unobtrusiveness of scaling the gear icon down (for now) - these are things that are accessed maybe once or twice as you're getting going. How small does that make the tap target?

#12 in reply to: ↑ 11 @ocean90
4 years ago

Replying to helen:

How small does that make the tap target?

Speaking of tap target, they are currently overlapping, see 32733-focus-overlap.png.

#13 @celloexpressions
4 years ago

The overlapping tap target was intentional - we would've needed to add much more spacing between the icons to maintain that wide of a target while keeping it center so the focus styling looked okay. But it could certainly be improved.

Is someone interested in making a patch to address some of the issues mentioned here? I don't personally see a huge issue with how the sizing/alignment looks in @ocean90's screenshot, but it could probably be improved slightly.

This ticket was mentioned in Slack in #design by helen. View the logs.


4 years ago

#15 @hugobaeta
4 years ago

I agree with @valentedesigns - it makes the most sense to make the info icon the same size as the other round shapes in the icon set.

#16 @hugobaeta
4 years ago

Following up on a question from @helen, I think the best solution for now (since we can't change the icon font for this release) is to reduce the size of the cog, like experimented in a attachment:

https://core.trac.wordpress.org/raw-attachment/ticket/32733/menu-screen-options.png

@obenland
4 years ago

@obenland
4 years ago

#17 @obenland
4 years ago

  • Owner set to obenland
  • Resolution set to fixed
  • Status changed from new to closed

In 33336:

Customize: Align screen options toggle with info icon.

Fixes #32733.

#18 @paulwilde
4 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

The vertical alignment still seems off for me after that commit, though in those screenshots they seem fine. I cannot imagine this having anything to do with the fact that I'm on a HiDPI display.

Changing .customize-screen-options-toggle from top: 4px to top: 2px fixes it for me.

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

@dipesh.kakadiya
4 years ago

Fixed vertical alignment

#19 @obenland
4 years ago

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

In 33410:

Menus: Account for browsers that set a default margin for buttons.

Fixes #32733.

#20 @afercia
4 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Not sure why, maybe different operating systems font rendering, but on Windows the Screen Options toggle icon looks a bit too small, see on the left. Increasing the font size to 18px and adjusting the position makes things a bit better. Sorry can't test on a Mac.
Probably not a big deal, reopening just to let you know, close at your will.

https://cldup.com/KDC6ezSYRA.png

@dipesh.kakadiya
4 years ago

fixed size issue

#21 @obenland
4 years ago

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

In 33444:

Menus: Readjust screen options toggle icon.

Third revision. This will let the icon appear slightly bigger than the help
icon on Macs and just slightly smaller on Windows machines. It's a compromise
in every way.

Fixes #32733. Again.

Note: See TracTickets for help on using tickets.