925945 - [Building Blocks] Update range slider visual design

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: Gaia, defect)

Description

[Casey Yee]

Update range slider to new 1.3 visual design.  

note: I noticed that settings app does not utilize BB for this. The design posted here should be copied to anywhere that uses this control.   I propose that we use the BB anywhere we can to maintain consistency wherever the control is deployed.

Comment 1

[Casey Yee]

Flagging VD to post design to bug.

Comment 2

[Peter La]

Attachment: Switches&Sliders-Spec.zip

This is spec + animation I already emailed to Casey on Monday, but I'm posting it here to make it official.

Casey, ping me if you need to chat about exactly how to implement the animations, and we can discuss if adjustments are needed to make implementation go more smoothly.

Comment 3

[Joshua Smith [:joshua-s]]

I think the issue in the Settings app should be moved to another bug.  The settings app uses input[type="range"], but the bb uses a completely different (and I must say more hacky) markup.

Comment 4

[Joshua Smith [:joshua-s]]

Taking this!

Comment 5

[Joshua Smith [:joshua-s]]

Attachment: PR on Github

Comment 6

[Joshua Smith [:joshua-s]]

Attachment: Screenshot after patch

Here is a screenshot!

Comment 7

[Casey Yee]

Joshua, flag Arnau ([e-mail]) for code review one we have the go-ahead from Peter.

Comment 8

[Eric Pang [:epang] UX]

Comment on attachment 8341318 [details] [review]
PR on Github

Hi Joshua, thanks for you work on this.
I've tried loading your patch, but once flashed I don't seem to see any changes.

My comments are based on the screen cap you attached.

Can you take a closer look at the specs? I'm finding there's a lot of small tweaks that are needed.

ex)
Colour
Filled bar should be #00AACC
Circle should be #00CAF2
Unfilled line should be #9BA6A8

Also, the line thickness is incorrect with the scrubber:
Unselected state: 1.5px line thickness (with the .5 on the outer part of the circle)

Select State: 4.5px line thickness (with the .5 on the outer part of the circle)

Please flag me for review again when ready.  Let me know if you have any questions. Thanks!
Eric

Comment 9

[Joshua Smith [:joshua-s]]

Sorry about that, I took the colors directly from the video.  Apparently the video is wrong, and I should have looked at the spec :)

Comment 10

[Eric Pang [:epang] UX]

(In reply to Joshua Smith [:joshua-s] from comment #9)
> Sorry about that, I took the colors directly from the video.  Apparently the
> video is wrong, and I should have looked at the spec :)

No problem, sorry for the delay of my reply.  I looked at the screen you sent me, it looks much better.  Can you update your PR so I can flash to to my device and see how it looks in action?  Thanks!

Comment 11

[Joshua Smith [:joshua-s]]

Attachment: PR on Github (Version 2)

Argh, rebasing made me have to close the previous pull request.  Please use this one instead :)

Comment 12

[Joshua Smith [:joshua-s]]

Attachment: Screenshot after patch (Version 2)

Comment 13

[Eric Pang [:epang] UX]

Comment on attachment 8342550 [details] [review]
PR on Github (Version 2)

Clearing the feedback flag.  Joshua, Casey said there is something odd in the code that he is going to look into.  Thanks!

Comment 14

[Patryk Adamczyk [:patryk] UX]

We should aim to have this done for 1.5 (2.0) what is blocking this? Can we get this into the next milestone?

Comment 15

[Joshua Smith [:joshua-s]]

I talked to Casey over IRC a week or two ago, and he said that there is a bigger problem underlying this change.  While the current patch addresses the building blocks, there is some other (possibly non-gaia) code that is affecting the styling of the range sliders in various apps.

Should we create a new bug to track that issue, and just land this, or should this patch attempt to fix those problems as well?

Comment 16

[Patryk Adamczyk [:patryk] UX]

Yes, eventually we'll need to land this... either for v.2 with the design attached or v.2.1 with the updated design. So please make any bugs against whatever is blocking this patch. Thanks!

Comment 17

[Casey Yee]

Moving this work to web component.