Page MenuHomePhabricator

Toggle switch

Mock History

Current Revision

Mock Description

This is a basic toggle switch style. All state styles are consistent with checkbox/radio button state styles.

Once the rough implementation is done, let's test the interaction out amongst ourselves and tweak the animation and etc until it feels right.

Event Timeline

violetto created Toggle switch.Jun 5 2015, 1:33 PM
violetto added subscribers: Prtksxna, Volker_E.
violetto added inline comment(s).
Inline Comments

Could you please also add the state mentioned in T88973#1106797.

Dangg I totally missed it. It's been a while, I'll update mock ups.

violetto updated the mock's description. (Show Details)Jun 8 2015, 3:33 PM
violetto added inline comment(s).
Inline Comments

Line height = text size *1.25

Is the latest revision the new spec? Should I completely ignore the older one?

@Prtksxna, I've made it clearer. You can just refer to the latest. They basically follow the styles of radio/checkboxes.

Inline Comments

Line height = text size*1.25

@violetto Should the :focus box-shadow be outside or inside? I can show you the difference tomorrow, more visually pleasing seems outside in rendering.

Inline Comments

That should be updated to margin. It's not padding.

@violetto I think there's a small glitch, why's the normal state's :focus on grey background?

Cus it's in focus, although not switched on.

LMK when you've somewhat implemented this, it might work, might not. But the idea is to show what is in focus even though it's not switched on.

Also, why isn't the grip changing colors on :hover at normal state? You'll see with my upcoming patch, that it's a very subtle change on :hover so far...

I think this design process needs to be more aware of the real world. We still have a process where the mocks we get for each widget are (a) several times larger than they end up appearing on most desktop (perceived colour, brightness, stroke thickness all change when scaled down), and (b) not shown alongside other widgets in the library; the theme needs to remain consistent, and constantly tweaking these widgets in isolation is why we are having these problems in the first place (such as the conflict with focus state / differences between toggleSwitch and toggleButton).

Another minor issue which is related is that the latest designs are on a grey background. Almost all implementations to date are on a white background, so that should be our primary concern when evaluating.