892086 - [B2G][l10n][Spanish][Cost Control] Reset button on Settings has ellipses

Status: RESOLVED FIXED

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

Description

[Deepa Subramanian]

Attachment: Screenshot

Description:
When set in Spanish language, the user is able to see the Reset button in cost control/Usage app with ellipses.

Repro Steps:
1) Updated to Leo Build ID: 20130710070204
2) Set language to Spanish
3) On the Usage screen tap the gear icon(Settings)
4) Look at the Reset button 

Actual:
Reset button is displayed with ellipses

Expected:
Reset button with no ellipses

Environmental Variables
Gecko: http://hg.mozilla.org/releases/mozilla-b2g18/rev/5b34e0cda635
Gaia: 61453c4d32beb15a33ec91b2e740e96e5ce45759
Platform Version: 18.1 

Notes:
Frequency: 100%
See attached: Screenshot

Comment 1

[Delphine Lebédel [:delphine - Use needinfo]]

Weird because there is clearly enough space in the box to contain the entire Spanish word which is Restablecer.
Adding Spanish localizers here in case they see a solution to this.

Comment 2

[Guillermo López :willyaranda (probably SLOW response)]

Salva, this could be fixed on BB?

Comment 3

[Salvador de la Puente González [:salva]]

Asking to Ismael instead. Maybe is a problem of padding. What do you think?

Comment 4

[RickieES aka Ricardo Palomares]

I'd say that the max. width for the button has been reached, because it seems to have the same width than the three dropdowns below it ("Cuando el uso sea superior", "Restablecer informe" and "A partir del").

The problem with this is that we just agreed to use "Restablecer" for this kind of message, instead of "Reiniciar" or "Limpiar", which may sound confusing. We did it for Firefox for Android, but if we want to achieve some consistency in translation, we shouldn't choose words just based on available space.

JM2C

Comment 5

[Delphine Lebédel [:delphine - Use needinfo]]

Ok also aksing for more info from UX team based on comment 4

Comment 6

[Ismael Gonzalez [:basiclines]]

As Ricardo said, the button has reached the max-width allowed (based on the x-axis space available). So We can not fix anything at building block level.
Anyway seems that we have huge paddings at both sides of the viewport, 30px at left side and 20px at right side. I suggest to reduce left padding to 20px in order to gain some exta space for the button.

Comment 7

[Stephany Wilkes]

If the recommended LabelBeginning...LabelEnd ellipsis method (see https://docs.google.com/a/mozilla.com/document/d/19XbHvtThAUCwzyx_TXJHY7ZX8t99MxhZnZamWUcB158/edit) does not work, please re-flag us as needinfo? [e-mail] to advise on UI adjustment.

Comment 8

[Delphine Lebédel [:delphine - Use needinfo]]

Ismael: have you been able to find a workaround as suggested in comment 7?
If not, we'll flag UX team again to find a solution

Comment 9

[Ismael Gonzalez [:basiclines]]

I think we must flag UX team again to reduce lateral paddings inside Cost Control settings views. In that way we'll have much more available space and longer labels will fit.

Comment 10

[Delphine Lebédel [:delphine - Use needinfo]]

Ok many thanks for the quick feedback Ismael.
Flaggin UX team as per comment 9 and nominating as Leo blocker

Comment 11

[Wayne Chang [:wchang]]

Triage - Partners feel the need to correct this as "..." takes up more space than it does to display correctly - Bad user impression.

Please flag if this is going to be a non-trivial fix and partners will reconsider.

Comment 12

[Stephany Wilkes]

Flagging Eric to advise on the padding issue in lieu of ellipses. Eric, please reassign as appropriate.

Comment 13

[Eric Pang [:epang] UX]

(In reply to Stephany Wilkes from comment #12)
> Flagging Eric to advise on the padding issue in lieu of ellipses. Eric,
> please reassign as appropriate.

Hi,

The button should be full length, which will eliminated the ellipses issues.  Drop downs should also be full length.  Please refer to the building blocks for buttons here:

http://buildingfirefoxos.com/building-blocks/buttons.html

Pavel, is this something you can help implement?  I know you know this well from pass fixes :)

Thanks!

Comment 14

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: after-patch-shot.png

like this?

Comment 15

[Ismael Gonzalez [:basiclines]]

I think is the perfect way to go for settings based views.
Also we are doing it in the Settings application right? So it will be consistent with the desing approach over the whole OS.

Comment 16

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #14)
> Created attachment 785907 [details]
> after-patch-shot.png
> 
> like this?

Yes!  One thing though, I think the "Reset" text in the button needs to be centered since it's not in a list of buttons.

Thanks Pavel!

Comment 17

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: after-patch-shot.png

Comment 18

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #17)
> Created attachment 786747 [details]
> after-patch-shot.png

Sorry Pavel, looking at it now it might make more sense being left aligned.  Let me check with Sergi.. Hi Sergi, should the text "reset" in the button be centered or left aligned?  If this is considered a list I'm thinking it should be left aligned, but I wanted to get your confirmation first. Thanks!

Comment 19

[Sergi]

Attachment: Suggested button ditribution

IMHO we should use an action button for "reset", so it would be ok to have the text centered on it. If we use a list button, like the example you uploaded, we should left align the text. BTW, the list buttons don't look well aligned. Remember we should leave 15px for the button margin and 15px for the text inside on both sides.

Find a sample attached.

Comment 20

[Eric Pang [:epang] UX]

(In reply to Sergi from comment #19)
> Created attachment 786864 [details]
> Suggested button ditribution
> 
> IMHO we should use an action button for "reset", so it would be ok to have
> the text centered on it. If we use a list button, like the example you
> uploaded, we should left align the text. BTW, the list buttons don't look
> well aligned. Remember we should leave 15px for the button margin and 15px
> for the text inside on both sides.
> 
> Find a sample attached.

Thanks Sergi!  Pavel, we're good to leave the reset text centered in the button.  But as Sergi brought up can you take a look at the spacing of the buttons?  The margins for the buttons and text are off.  Thanks!

Comment 21

[Eric Pang [:epang] UX]

Comment on attachment 786747 [details]
after-patch-shot.png

because of the margin issues I'm marking this as - for now.  Please flag me when you've made the changes. Thanks!

Comment 22

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: after-patch-shot.png

Comment 23

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: Patch for Gaia repo

Comment 24

[Eric Pang [:epang] UX]

Comment on attachment 787059 [details]
after-patch-shot.png

Thanks Pavel, this looks good to me now.

Comment 25

[Eric Pang [:epang] UX]

(In reply to Ismael Gonzalez [:basiclines] from comment #15)
> I think is the perfect way to go for settings based views.
> Also we are doing it in the Settings application right? So it will be
> consistent with the desing approach over the whole OS.

Hi Ismael, I've noticed that some screens in settings are still using margins of 3.0 rem for buttons, toggles, etc. (when it should be 1.5rem).  Do you know if this will be updated or does a bug need to be filed? thx

Comment 26

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Eric,
the bug is 809093 and he waiting for r+

Comment 27

[Ismael Gonzalez [:basiclines]]

Great Pavel! Anyway i think this bug (CostControl one) should be reviewed by Salva as is the Module owner of CostControl. (He come back from holidays today i guess).

Comment 28

[Preeti Raghunath(:Preeti)]

Salva,

Please confirm if you are reviewing the patch.

Comment 29

[Salvador de la Puente González [:salva]]

Reviewing this bug right now. Next time, please, change the reviewer in order to warn me or use the needinfo flag as you did it. Thank you.

Comment 30

[Salvador de la Puente González [:salva]]

Comment on attachment 787060 [details]
Patch for Gaia repo

All looks OK to me. No code changes, very low risk patch and moderate improvement from a user's point of view. Thank you very much pivanov.

I agree on considering the limit threshold button as an action button and therefore to add the highlight. If you can not merge, ping me again.

Comment 31

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Landed to master:
https://github.com/mozilla-b2g/gaia/commit/f1674bfb1340e2d384abf8e63e61c3e6c4e7d4a1

Comment 32

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Hey Salva,
do I need to land this on some other branch?

Comment 33

[Salvador de la Puente González [:salva]]

Only master, as it is marked as leo+ is will be eventually uplifted. If it can not be merged someone will ask you for help with the uplifting.

Comment 34

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Thanks :) You rock \o/

Comment 35

[John Ford [:jhford] CET/CEST Berlin Time]

Uplifted f1674bfb1340e2d384abf8e63e61c3e6c4e7d4a1 to:
v1-train: ae89eefc0a0a1e3a6edebc03af2f769991b1a4de

Comment 36

[Tim Guan-tin Chien [:timdream] (please needinfo)]

v1.1.0hd: ae89eefc0a0a1e3a6edebc03af2f769991b1a4de