Closed Bug 863593 Opened 8 years ago Closed 6 years ago

[Cost Control] "limit-passed" and "used" strings are overlapping in Cost Control widget

Categories

(Firefox OS Graveyard :: Gaia::Cost Control, defect)

defect
Not set
normal

Tracking

(b2g18 affected, b2g18-v1.0.1 affected)

RESOLVED INVALID
Tracking Status
b2g18 --- affected
b2g18-v1.0.1 --- affected

People

(Reporter: tchevalier, Unassigned)

References

Details

(Keywords: l12y, Whiteboard: l10n)

Attachments

(3 files)

When phone activity is enabled, those two strings are overlapping in many locales (verified in es, pt-BR, pl, fr, de...)

Maybe the simplest solution would be to use different strings when phone activity is enabled or/and to add ellipsis.
I'm unable to verify this in v1.0.1 since when I arrive above the size limit that I chose in Cost Control, it does not appear for me the same way as it appears for you.

I'll note that this bug affects v1 though.

Pike: is this a dupe of Bug 854056?
Flags: needinfo?(l10n)
Attached image pt-BR, v1.0.1
Here is a screenshot of pt-BR on v1.0.1 f15358e2e5a6e5541f524565408834d1fda38a61


(In reply to delphine from comment #1)
> I'm unable to verify this in v1.0.1 since when I arrive above the size limit
> that I chose in Cost Control, it does not appear for me the same way as it
> appears for you.

My bad, forgot to say I applied this patch to get this feature working this way, because it is hardcoded for Vivo. https://github.com/lissyx/gaia/commit/5cfa638f3e4d1b85da1a5aa7cdce07aa33b930c4
Flags: needinfo?(l10n)
Blocks: 892075
Vicki can you please have look at this.
We need to fix the overlapping text.
Also the amber background with white text is very hard to read, that colours should be adjusted.
Flags: needinfo?(vpg)
Patryk,
I am putting a needinfo to Sergi, since he is more focused in system components right now. I have made a tryout for the amber color, is just a different tone of amber and the font should be white opaque unless it is disabled, when it can be 70% opacity.

Amber color code: #d27405

thanks
Flags: needinfo?(vpg) → needinfo?(sergiov)
Patryk,
I am putting a needinfo to Sergi, since he is more focused in system components right now. I have made a tryout for the amber color, is just a different tone of amber and the font should be white opaque unless it is disabled, when it can be 70% opacity.

Amber color code: #d27405

thanks
Looks fine to me. 

Note this is an app specific component, not a common one. We can perfectly use the color you're proposing if we improve legibility, which seems to be the case.

Thanks! 

(In reply to Victoria Gerchinhoren from comment #5)
> Patryk,
> I am putting a needinfo to Sergi, since he is more focused in system
> components right now. I have made a tryout for the amber color, is just a
> different tone of amber and the font should be white opaque unless it is
> disabled, when it can be 70% opacity.
> 
> Amber color code: #d27405
> 
> thanks
Flags: needinfo?(sergiov)
Hi,

The reported bug: 
 When phone activity is enabled, those two strings are overlapping in many locales (verified in es, pt-BR, pl, fr, de...). Attachment 739437 [details] --> (screenshot, pt-BR)

 It still happens on master branch, (not in English language).

Regards


in French
Flags: needinfo?(l10n)
Cancelling needinfo, there doesn't seem to be any ask here.
Flags: needinfo?(l10n)
Well, as English strings already fit, the question is if it is possible to shorten translated strings, so that they do not overlap
Flags: needinfo?(l10n)
(In reply to Marcelino Veiga Tuimil [:sonmarce] from comment #10)
> Well, as English strings already fit, the question is if it is possible to
> shorten translated strings, so that they do not overlap

This is a really bad argument. Why don't we use Italian, or Spanish for reference instead of English for designing UI, and let English float in all that empty space? ;-)

Most latin locales are already doing a lot of compromises to fit strings in the UI, there's a point where a string become so shortened that it's useless, because it can't be understood by users.

If I'm reading the code right, that widget either uses limit-passed+used or used+limit.

From a quick look at limit-passed translation, this is broken all over the place, which suggests you should fix the UI.
http://transvision.mozfr.org/string/?entity=apps/costcontrol/costcontrol.properties:limit-passed&repo=gaia
Flags: needinfo?(l10n)
Understood, we will try a UX solution
Blocks: 992160
The root issue of this problem is the progress bar component, but currently there is not progress bar anymore, this component was removed from the widget.
Marking this bug is invalid.
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.