[settings] wifi authenticated connection screen needs text polish

RESOLVED FIXED

Status

P3
normal
RESOLVED FIXED
6 years ago
6 years ago

People

(Reporter: dietrich, Assigned: kaze)

Tracking

({polish})

unspecified
ARM
Gonk (Firefox OS)
polish

Firefox Tracking Flags

(blocking-basecamp:-, b2g18+)

Details

(Whiteboard: visual design UX-P1)

(Reporter)

Description

6 years ago
* 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?
(Reporter)

Updated

6 years ago
Keywords: polish
OS: Mac OS X → Gonk
Hardware: x86 → ARM
Whiteboard: [label:polish]
(Assignee)

Comment 2

6 years ago
(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?
(Assignee)

Updated

6 years ago
Assignee: nobody → kaze
Status: NEW → ASSIGNED
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

6 years ago
> * 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.
(Reporter)

Comment 5

6 years ago
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.
(Assignee)

Comment 6

6 years ago
(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
Correct, we need to remove the all-caps rule from the Building Blocks.
The text should be sentence case.
ie. "show password" should be "Show password"
Priority: -- → P3
Whiteboard: [label:polish] → visual design

Updated

6 years ago
Component: Gaia → Gaia::Settings
(Assignee)

Comment 9

6 years ago
Nominating, should be trivial to fix.
blocking-basecamp: --- → ?
blocking-basecamp: ? → -
tracking-b2g18: --- → +
Whiteboard: visual design → visual design UX-P1
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?
Flags: needinfo?(padamczyk)
Przemek ^ read above
Flags: needinfo?(padamczyk) → needinfo?(pabratowski)
Hi Eric, yes I believe this should be a device wide change.
Flags: needinfo?(pabratowski)
Hi Fabien, can you make make headers, subheadings & settings follow title case device wide? See above comments. thx!
Flags: needinfo?(kaze)
(Assignee)

Comment 14

6 years ago
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?
Flags: needinfo?(kaze) → needinfo?(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.
Flags: needinfo?(stas)
(Assignee)

Updated

6 years ago
Depends on: 798131
(Assignee)

Comment 16

6 years ago
This has been fixed by Staś along with bug 812977:
https://github.com/mozilla-b2g/gaia/commit/f6aa5f0#L15L31
Status: ASSIGNED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.