798066 - [settings] wifi authenticated connection screen needs text polish

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Settings, defect, P3)

Description

[Dietrich Ayala (:dietrich)]

* all fields are all lower-case which looks bad

* "identifier" field always shows up, which it should not (how to determine if needed or not?)

* the layout of label->input for identifier and password fields looks shoddy. are there building blocks we should use there?

Comment 1

[Naoki Hirata :nhirata (please use needinfo instead of cc)]

part of bug 798131?

Comment 2

[Fabien Cazenave [:kaze]]

(In reply to Dietrich Ayala (:dietrich) from comment #0)
> * all fields are all lower-case which looks bad
> 

I suggest to use bug 798131 for this capitalization issue. I’d like to rely on Josh here, as he’s already done an extensive capitalization review for other Gaia apps.

> * "identifier" field always shows up, which it should not (how to determine
> if needed or not?)
> 

Dupe of bug 796160.

> * the layout of label->input for identifier and password fields looks
> shoddy. are there building blocks we should use there?

Not that I know of. Larissa, do you have a better layout to suggest?

Comment 3

[Josh Carpenter [:jcarpenter]]

Thanks for heads up, Kaze. Re: title case and sentence case capitalization, we will catch and fix these when we do our string freeze pass on the bucket 2 apps (including Settings).

Comment 4

[Larissa Co [:lco]]

> * the layout of label->input for identifier and password fields looks
> shoddy. are there building blocks we should use there?

What specifically do you think is shoddy about it? Currently, I see the field title, then the text input field. In the case of password, we have a check box with a CAPS "Show Password".

One of the things I can think of changing is making the text input field taller and adding a bit more space between the title and the text input field. I would also use the standard checkbox building block for "Show Password" and not have it in all caps. 

I also agree that we should capitalize these headers. 

I'm cc'ing Patryk because he might have a better idea of the changes to the visual layout that we should make.

Comment 5

[Dietrich Ayala (:dietrich)]

Some more specifics:

* Yes on more space between label and input field

* Yes, on making the inputs bigger (or text smaller - see Calendar account settings input fields, look classy.)

* Checkbox left-side should be aligned with input fields

* SHOW PASSWORD looks weird because different font size and all caps.

Comment 6

[Fabien Cazenave [:kaze]]

(In reply to Dietrich Ayala (:dietrich) from comment #5)
> Some more specifics:
> 
> * Yes on more space between label and input field
> 
> * Yes, on making the inputs bigger (or text smaller - see Calendar account
> settings input fields, look classy.)
> 

Neither Settings nor Calendar are using the `input_areas.css' building block [1] yet. Note that this block does not define anything for the “show password” checkbox at the moment.

I can propose a patch to make these two apps use `input_areas.css' for these fields.

> * Checkbox left-side should be aligned with input fields
> 

OK.

> * SHOW PASSWORD looks weird because different font size and all caps.

The all-caps issue is inherited from the `buttons.css' building block, where all labels are uppercase [2]. I’ve overwritten this rule for Settings in a recent commit (not landed yet), but maybe we should “fix” the building block instead?

[1] https://wiki.mozilla.org/Gaia/Design/BuildingBlocks#Input_Areas
[2] https://wiki.mozilla.org/Gaia/Design/BuildingBlocks#Buttons

Comment 7

[Josh Carpenter [:jcarpenter]]

Correct, we need to remove the all-caps rule from the Building Blocks.

Comment 8

[Patryk Adamczyk [:patryk] UX]

The text should be sentence case.
ie. "show password" should be "Show password"

Comment 9

[Fabien Cazenave [:kaze]]

Nominating, should be trivial to fix.

Comment 10

[Eric Pang [:epang] UX]

Patryk, when Przemek and I worked on the layout/type updates for email/contacts/calender we used title case for all headers, subheadings & settings.  For example "Account Type" & "Sync Calendar",  having each word capitalized.  Should the same thing be done for Wifi or even device wide?

Comment 11

[Patryk Adamczyk [:patryk] UX]

Przemek ^ read above

Comment 12

[Przemek Abratowski [:przemek] UX]

Hi Eric, yes I believe this should be a device wide change.

Comment 13

[Eric Pang [:epang] UX]

Hi Fabien, can you make make headers, subheadings & settings follow title case device wide? See above comments. thx!

Comment 14

[Fabien Cazenave [:kaze]]

Staś: can I change the string IDs here? Or do I have to keep the old IDs too, in order to preserve the gaia-v1-train compatibility?

Comment 15

[Staś Małolepszy :stas]

(In reply to Fabien Cazenave [:kaze] from comment #14)
> Staś: can I change the string IDs here? Or do I have to keep the old IDs
> too, in order to preserve the gaia-v1-train compatibility?

String and id changes are fair game on master and v1-train.

Comment 16

[Fabien Cazenave [:kaze]]

This has been fixed by Staś along with bug 812977:
https://github.com/mozilla-b2g/gaia/commit/f6aa5f0#L15L31