New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 635156 link

Starred by 4 users

Issue metadata

Status: Fixed
Owner:
Closed: Oct 2016
Cc:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Chrome , Mac
Pri: 2
Type: Bug

Blocking:
issue 630357



Sign in to add a comment

Harmony - radio and checkbox buttons

Project Member Reported by est...@chromium.org, Aug 5 2016

Issue description

I started these already, see

https://codereview.chromium.org/2026833003
https://codereview.chromium.org/2032683003

I think all that's left may be to animate between states?
 
Cc: shrike@chromium.org bettes@chromium.org
The blue color does not match the sticker sheet blue, and the inner filled circle has a rough outer edge. I'm guessing the radius needs to be tweaked by some amount (or Skia just can't draw circles very well? It did a good job on the outer circle).
RadioButton.png
2.0 KB View Download
Screen Shot 2016-08-09 at 9.56.55 AM.png
15.6 KB View Download
Also the "unchecked" state is too light.

Screen Shot 2016-08-09 at 10.02.25 AM.png
4.5 KB View Download
Screen Shot 2016-08-09 at 10.04.36 AM.png
4.8 KB View Download
Radio button focus state is wrong (current on left, sticker sheet on right).

Screen Shot 2016-08-09 at 11.00.02 AM.png
56.5 KB View Download
Checkbox has similar problems:

- square border instead of rounded rect
- incorrect focus state
- unchecked state too light

Screen Shot 2016-08-09 at 11.03.40 AM.png
41.1 KB View Download
Screen Shot 2016-08-09 at 11.03.44 AM.png
40.4 KB View Download

Comment 5 by bettes@chromium.org, Aug 10 2016

Hey guys, I've updated the radio/checkbox specs. Please take a look and let me know if there's any resolved questions.

unchecked-color: #5a5a5a
checked-color: #4285F4


SPEC-secondary-UI-02-radio-checkboxes.png
133 KB View Download

Comment 6 Deleted

Comment 8 by est...@chromium.org, Aug 11 2016

The colors that you noticed Jayson are only wrong on Mac. We're using kColorId_FocusedBorderColor, and on non-Mac Views that's #4285F4 which is the sticker sheet color. You should file a bug for a Mac-specific fix here.

I'm not really sure what you mean about the inner circle having a rough edge. Both the sticker sheet and the implementation seem to look very similar in your screenshots, modulo color.

I have a patch underway for the other issues.

Comment 9 by shrike@chromium.org, Aug 11 2016

I will file a bug on the color on the Mac.

Re: the inner circle, the sticker sheet and implementation look very different. The implementation version is basically a square with some fuzz around it, and at scale it looks like poorly anti-aliased circle. The four corners of this square need to be lighter in order to match the sticker sheet.
regarding the inner circle --- this is controlled by a .icon file, i.e. taken from an SVG provided by Sebastien, so if Alan agrees it should be changed he should provide a new svg. Same goes for any tweaks to checkmark.
Evan, can you point me to the svg's being used? 
see zip file attached to this comment: https://bugs.chromium.org/p/chromium/issues/detail?id=609922#c3
Labels: -M-54 Proj-HarmonyControls M-56
Status: Fixed (was: Assigned)
More or less done. Any further tweaks can be tracked in more specific bugs.

Sign in to add a comment