1598313 - Change checkbox color for missing strings (leftmost column)

Status: RESOLVED FIXED

(Webtools Graveyard :: Pontoon, enhancement, P2)

Description

[Eduardo Trápani]

Attachment: Screenshot_2019-11-21 Esperanto (eo) · Common Voice.png

Now that the leftmost column shows the full text, it would help to have a different color for the checkbox on the left of missing strings, since currently the contrast with the background is very low. (see attached image)

That would help a lot when scrolling down a file while looking for missing strings.

Comment 1

[Matjaz Horvat [:mathjazz]]

Implementation note: we should make sure the same color also works on dashboards, contributors pages, profile page...

Comment 2

[Eduardo Trápani]

Maybe, instead of changing the color, you could add a thin border to checkbox, say a white one. That could be less of a change for those used to the grey color in the checkbox, but would still allow it to stand out.

Comment 3

[aarushivij]

Hello, I have reproduced this issue.
Can this issue be assigned to me.
Also what color should it be changed, or as mentioned in comment2 add a border?
Thanks :)
Aarushi

Comment 4

[Vishnudas Kulkarni]

@aarushivij(In reply to aarushivij from comment #3)

Hello, I have reproduced this issue.
Can this issue be assigned to me.
Also what color should it be changed, or as mentioned in comment2 add a border?
Thanks :)
Aarushi

Hey aarushivji,

Can I work on this if its not fixed at your end?

Comment 5

[Vishnudas Kulkarni]

Attachment: Border for non-translated strings

Can we do this attached change? This should differentiate non-translated strings. If it looks good, I can put it for review.

Comment 6

[Matjaz Horvat [:mathjazz]]

Attachment: Lighter Missing status color

Thanks for the update, Vishnu! I'd like to keep the status icons consistent, i.e. borderless.

Eduardo, IIUC it was easier to spot missing strings in the old UI, because status icons were distributed equally and the missing string icon would stand out anyways (even as being the only low contrast icon). But in the new UI, icons can be anywhere on the vertical axis, so it's important that they stand out. Am I correct? Would simply increasing the contrast be helpful? See an example in the screenshot attached.

Comment 7

[Eduardo Trápani]

Yes, higher contrast would do it. The border is also a good idea. Maybe somebody with accessibility knowledge can jump in? Or it could be a setting.

Comment 8

[Eduardo Trápani]

Comment on attachment 9158055 [details]
Border for non-translated strings

I think something like that would work. Maybe not so bold/bright as to compete with the text itself. Just enough to be able to tell a new string begins.

Comment 9

[Matjaz Horvat [:mathjazz]]

Thanks for the feedback, Eduardo! Let's use #5F7285 as the new Missing strings icon.

We'd like to avoid adding a border, since that would be both inconsistent with other status icons and hard to replicate in places where we don't use icons (e.g. Progress Menu).

Comment 10

[Anuj Pandey]

Attachment: Changed color used to represent missing strings to #5F7285.

I guess this looks as per our requirement.

Comment 11

[Anuj Pandey]

Attachment: Menu (Missing tab with the new color #5F7285.)

Comment 12

[Anuj Pandey]

Attachment: Missing strings( line indicator) color change to #5F7285.

Comment 13

[Matjaz Horvat [:mathjazz]]

That looks good! Feel free to open a PR so that we can test the patch more thoroughly.

Comment 14

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1677

Comment 15

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1678