Page MenuHomePhabricator

ToggleSwitchWidget's circle icon should be larger
Closed, ResolvedPublic


Comparison between current implementation and

in Pholio: M61


Event Timeline

violetto assigned this task to Volker_E.
violetto raised the priority of this task from to Needs Triage.
violetto updated the task description. (Show Details)
violetto added subscribers: violetto, Aklapper.
Volker_E added a comment.EditedOct 6 2015, 5:33 AM

@violetto The circle icon is right now 1em (at 100% 14px in diameter calculated), the height of the full toggleSwitch including the border is set at 2em. The radio input circle is calculated 12px, but consists unlike the toggleSwitch of an SVG image, that is squeezed into 1.6em width/height.
The radio inputs should be 1em as well. As we all know, ems are relative to the root size.
Right now, I wonder where the difference of the circle size arises from, I guess it's anti-aliasing differences between Sketch and browser rendering engines or from rounding errors of em units?!

What should we do? Rise to 1.1em?

Sorry, updated my comment to 1.1em. Seems doable as well

To 1.2em sounds good to me.

After you've seen it in reality and might agree on it, we need to change the mockups as well to reflect that.

Change 244835 had a related patch set uploaded (by VolkerE):
Get ToggleSwitchWidget to MediaWiki theme's design spec

Jdforrester-WMF closed this task as Resolved.Oct 20 2015, 5:54 PM
Jdforrester-WMF triaged this task as Medium priority.
Jdforrester-WMF edited projects, added OOUI, OOjs-UI-next-release; removed Patch-For-Review.
Jdforrester-WMF set Security to None.

Change 244835 merged by jenkins-bot:
MediaWiki theme: Adjust ToggleSwitchWidget to match M61 design

Volker_E moved this task from Doing… to Done on the UI-Standardization board.Oct 23 2015, 9:27 PM
Jdforrester-WMF moved this task from Backlog to Reviewing on the OOUI board.Nov 21 2015, 2:30 AM
Danny_B moved this task from Done to OOUI on the UI-Standardization board.May 20 2016, 8:54 PM