1127460 - [Lightsaber] Colour picker web component visual edits

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: Gaia::Components, defect, P2)

Description

[Amy Lee [:amylee] UX]

Attachment: Colour_Picker_Edits.png

Visual design edits for colour picker web component (see Bug 1123829).

Please see attached spec for visual reference

Colour Picker Edits
-------------------

1. Can we smooth out the harsh line from dark to light and make it a gradient transition? (See mock)

2. Remove black outline around colour wheel

3. Remove gradient outline and make it a 1px solid black outline

4. Remove black outlines on selector and magnifier

5. Shadow on magnifier is too heavy. Please make it the following:

Opacity: 15%
Size: 10px
Distance: 2px down
Angle: 90 degrees

6. When selector is not being pressed, please make it 60% opacity

7. Remove the white circle in the centre of the colour wheel

8. Reduce the colour wheel to 400 x 400px and ensure that it’s centred to the screen. Magnifier and selectors should scale proportionately as well. 

9. Match the white outline thickness to the selector which should be 2px.

10. Magnifier colour swatch should be a circle shape

Thanks!

Comment 1

[David Flanagan [:djf]]

Amy,

I have a lot of questions for you about these changes... See below.

Meanwhile, I'm unassigning myself since I won't have time to work on this bug right away, and I don't want to prevent anyone else from taking it and moving this component forward.

(In reply to Amy Lee [:amylee] from comment #0)
> Created attachment 8556585 [details]
> Colour_Picker_Edits.png
> 
> Visual design edits for colour picker web component (see Bug 1123829).
> 
> Please see attached spec for visual reference
> 
> Colour Picker Edits
> -------------------
> 
> 1. Can we smooth out the harsh line from dark to light and make it a
> gradient transition? (See mock)

If we do that, then I don't know what color to display when the user has their finger over that transition region.

I actually think that having the color values 0 to 100 wrap all the way around the circle makes that value sensitive region much longer than we really need it to be. It is 3.14 times as long as it would be if it was unrolled and turned into a straight strip under or to the side of the circle.   So what if instead of having it wrap from 12 oclock all the way around to 12 oclock we just wrapped it from 11 o'clock to 1 o'clock. That would avoid the stark transition where value 0 meets value 100. Then the area at the top of the circle could maybe be used as a preview of the currently selected color?  I picture that wedge at the top having a slightly larger radius than the rest of the circle so that the preview area stands out. Would something like that work?

> 2. Remove black outline around colour wheel
> 

I put that in because to generate the color wheel I had to compute each pixel individually, and doing that means that there is no anti-aliasing on the wheel. So if there is no border, then there are visible jaggies where the color wheel meets the background color. So I think it would be a mistake to remove the border. Would a white border be better? Perhaps I can use the CSS background-color of the element for that border so that the border always matches the background. I'm not sure how to do that, but I think it is probably doable. The component would just have to call getComputedStyle() on itself, probably.

> 3. Remove gradient outline and make it a 1px solid black outline

Patryk specifically asked for the gradient outline between the hue/saturation wheel and the value ring. The color wheel is supposed to get darker and lighter as the user alters the value. That feature is currently disabled because of bug 1126055. But when it was enabled, and the value was set to a very low value, then the dark colors of the value ring blended in with the dark colors of the hue/saturation wheel and a black border was not visible.  Patryk suggested the gradient border as a workaround.

I'm not convinced that having the hue/saturation wheel change its value is the right thing to do because for values < 40 or so the colors are all too dark to tell much difference, so if you want to just declare that the color wheel should always be displayed at value=100, then the problem goes away and we can do a simple black border here.

> 4. Remove black outlines on selector and magnifier

If I remove the black outline on the selector ring, then when it is in the center of the wheel at white (where it starts by default), it is invisible and the user doesn't know to drag it. Similarly, the selector in the value ring becomes invisible if the color is white. Would it be better if the black border was inside the white one instead of outside it?  Or is there some other way to solve this? I put the black outline on the magnifier just for consistency, I think. It is probably okay to remove that one.

> 5. Shadow on magnifier is too heavy. Please make it the following:
> 
> Opacity: 15%
> Size: 10px
> Distance: 2px down
> Angle: 90 degrees

Could you convert these specs to CSS box-shadow? I'm not sure what you're asking for here.

> 6. When selector is not being pressed, please make it 60% opacity

The idea is that the color inside the selector is a solid swatch of what is selected. It is not just a ring around the current area, but a ring with a solid color inside. So if I make it translucent it will no longer be a solid color. Do you want the border to be translucent?

If we modify the value ring so that there is a big preview area up at the top of the color wheel, then it would be fine for these rings to be translucent. But if we don't do that, then when the user is not touching, the rings are the only indication of the currently selected color, and making them translucent would ruin that.

> 7. Remove the white circle in the centre of the colour wheel

That is there at Patryk's request. If the circle isn't there, then there is no way to select pure white or any pure shade of gray.  I can make the circle smaller if you want, but it seems like a mistake to remove it entirely.

> 8. Reduce the colour wheel to 400 x 400px and ensure that it’s centred to
> the screen. Magnifier and selectors should scale proportionately as well. 

The size and centering are property of the demo app, not of the color picker component itself. Apps will be able to display it at whatever size and position they want.

I can make the magnifier scale proportionally to the overall size of the picker, but I'd guess that the selector rings should retain some minimum size so that they remain easy to touch.  (In fact, the user can touch anywhere in the color wheel to change the color, but the selectors look like they are draggable, so I wouldn't want to make them too small.)  

The best thing here is probably if you give actual numbers for the sizes you want.

> 9. Match the white outline thickness to the selector which should be 2px.

Good point. The magnifier border is too thick.

> 10. Magnifier colour swatch should be a circle shape

I was able to do the teardrop shape with a single HTML element and CSS. Making it a circle is probably just a matter of using two nested elements, so that should be pretty easy to change, I think.

> Thanks!

Comment 2

[David Flanagan [:djf]]

Amy,

I just landed some fixes and visual changes to the color picker, including a workaround to the bug that was previously preventing me from changing the value of the central color wheel.

Visually, borders and shadows are a lot more subtle now, and I think you'll like this better.

I'm sure there is still work to be done here, but between the comments above and the changes I just landed, I think this is ready for another round of visual review. Are you able to clone the repo at https://github.com/gaia-components/gaia-color-picker and then push use WebIDE to push the demo/ directory to a phone?  If you can try this out live that would be best.

Comment 3

[David Flanagan [:djf]]

Attachment: screenshot after visual changes

Here's a screenshot to give you an idea of which visual changes I was able to make. But you really should try it live if you can.

Comment 4

[Amy Lee [:amylee] UX]

Comment on attachment 8558394 [details]
screenshot after visual changes

Adding Patryk for review

Comment 5

[Amy Lee [:amylee] UX]

Hi David, 

Hung will be taking over UI reviews for the colour picker moving forward. I've filled him in on the status and he'll be providing feedback on the last screenshot provided. 

Thanks

Comment 6

[Hung Nguyen]

Attachment: ColorPicker_Spec_Assets.zip

Attaching specification and assets for the colour picker. 

Whoever is taking over this feature from David, please use the spec and update accordingly.  

Ping me once that is done and please let me know if you have any questions.

Comment 7

[BMO Automation]

Firefox OS is not being worked on