845072 - Email Account Setting Screen Update

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::E-Mail, defect)

Description

[Eric Pang [:epang] UX]

Attachment: Email account settings screen mock up

Changes:
1. New drop down layout
2. Button & input fields stretched (15px margins)
Refer to 'Button, text fields, & headers spec attached to bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=839220

Comment 1

[Eric Pang [:epang] UX]

Attachment: Updated Email account settings screen mock up

See attached image for list of changes

Comment 3

[Eric Pang [:epang] UX]

LG request for font updates.

Comment 4

[Lukas Blakk [:lsblakk] use ?needinfo]

Mass edit to set tracking-b2g18+ for these UX bugs that were called out for v1.1

Comment 5

[Eric Pang [:epang] UX]

Gareth, you can find the specs attached to this bug
https://bugzilla.mozilla.org/show_bug.cgi?id=839220
Refer to the 'Button, text fields & headers spec', thanks!

Comment 6

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Screenshot of updated UI on unagi device (top view)

Comment 7

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Screenshot of updated UI on unagi device (bottom view)

Comment 8

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Pull request

Comment 9

[Eric Pang [:epang] UX]

Attachment: Left align text

Hi Gareth, looks good but needs one adjustment.  Can you align all text to the header? (30px left margin).  Once that's ready please post another screen and I'll take a look.  When good we can flag to Kevin Grandon for review.  Once reviewed can you land to master?

Comment 10

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

You can ask me for r+ too ... I think Kevin is too bussy

Comment 11

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Updated screenshot of email settings UI on unagi device

So I looked at other apps for inspiration and the consensus (particularly in the calendar app) seemed to be that the header moved right to align itself with card text.

Comment 12

[Gareth Aye [:gaye] (back from PTO)]

(In reply to gaye from comment #11)
> Created attachment 733943 [details]
> Updated screenshot of email settings UI on unagi device
> 
> So I looked at other apps for inspiration and the consensus (particularly in
> the calendar app) seemed to be that the header moved right to align itself
> with card text.

Actually disregard that. I think moving everything else left and keeping the header flushed right is what happens elsewhere... will fix hehe.

Comment 13

[Gareth Aye [:gaye] (back from PTO)]

So this is basically the same case as the add an account case in the calendar app where we don't flush the text left. I think the problem here is that if we want the "cards" (the things with the lines) to have the margins then it might not be very easy to move the text left without introducing a lot of complexity into the HTML structure...

Comment 14

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Updated screenshot of email settings UI on unagi device

Comment 15

[Gareth Aye [:gaye] (back from PTO)]

Comment on attachment 733651 [details]
Pull request

review: ivanovpavel

Comment 16

[Eric Pang [:epang] UX]

(In reply to gaye from comment #14)
> Created attachment 733975 [details]
> Updated screenshot of email settings UI on unagi device

Hi Pavel, the drop down and button need to be stretched to have 15px margins.  Also the text in the button needs to be aligned with the header.  Can you confirm if you checked this in you're review?  let me know, thanks!

Comment 17

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

I confirm.
gaye can you provide the screenshots after patch?

Comment 18

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

Attachment: screenshot

Reopening this bug; 
1) drop down label is not centered
2) the drop down is not as wide as the button at the bottom per spec
3) the drop down also has a darker color than the background

Comment 19

[Gareth Aye [:gaye] (back from PTO)]

Ah right fixing and will attach screenshot. Thanks!

Comment 20

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Updated screenshot of email settings UI on unagi device

Comment 21

[Gareth Aye [:gaye] (back from PTO)]

I didn't change the color though. Is that something we want?

Comment 22

[Gareth Aye [:gaye] (back from PTO)]

Attachment: New pull request

Comment 23

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

Attachment: After patch from :gaye

See my concerns marked with 1,2,3 on the image:
1. The space between line and label
2. The space between label and select
3. The space between select and view port

Comment 24

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Updated screenshot of email settings UI on unagi device

This should fix those issues Pavel!

Comment 25

[Eric Pang [:epang] UX]

Hi Gareth, thanks for working on this.

I should have updated my mock ups

A few fixes that a required (sorry, totally my fault):

1. Remove Italics, i was just informed that this was a mistake and shouldn't be anywhere in the UI (IMAP+SMTP)
2. Leave background as is. I don't think you changed it, so that's good! (not the white i used in my mock up, the warm grey should always be used in conjunction with the dark grey banner)
3. Left align the drop down text (align with header) - sorry i know this keeps changing, but we've decided to go with left alignment. 

Sorry for all the changes, thanks Gareth!
Eric

(sorry, totally my fault!)

Comment 26

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

Oh the drop down text should be left aligned.  Thanks for the clarification, epang!
Are these formats documented some where?

Comment 27

[Eric Pang [:epang] UX]

(In reply to Naoki Hirata :nhirata (please use needinfo instead of cc) from comment #26)
> Oh the drop down text should be left aligned.  Thanks for the clarification,
> epang!
> Are these formats documented some where?

Hi Naoki, sorry about the confusion!. When Przemek and I are back in the office next week we're planning to have this confirmed and updated in the Building Blocks.  We will work with Victoria and Steve to confirm the updates.

Comment 28

[Gareth Aye [:gaye] (back from PTO)]

Attachment: Updated screenshot of email settings UI on unagi device

Hey Eric! Np regarding the changes. I've updated my changes and posted a new screenshot. Let me know if this looks right to you all :).

Comment 29

[Eric Pang [:epang] UX]

(In reply to gaye from comment #28)
> Created attachment 736976 [details]
> Updated screenshot of email settings UI on unagi device
> 
> Hey Eric! Np regarding the changes. I've updated my changes and posted a new
> screenshot. Let me know if this looks right to you all :)

Thanks for working on this Gareth, it looks good now :).

Can you update the patch in the attachments and when ready flag to Pavel for Review+?

Thanks!
Eric

Comment 30

[Gareth Aye [:gaye] (back from PTO)]

Comment on attachment 733651 [details]
Pull request

<html>
<head>
<meta http-equiv="refresh" content="0; url=https://github.com/mozilla-b2g/gaia/pull/9102">
</head>
<body>
</body>
</html>

Comment 31

[Eric Pang [:epang] UX]

Comment on attachment 735976 [details]
New pull request

Updated PR needs review.

Comment 32

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

I give my r+ and gaye merged it

Comment 33

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

Verified on:

BuildID : 2013-04-25-03-09-50
"mozilla-central" revision="690b5e0f6562"
"gecko.git" revision="33f9b3898b66dfb95874866269463d4b6bc749a0"
Unagi

Comment 34

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

v1.1 doesn't show the account type on leo.  Might be a separate bug.

V1.0.1 does not have this change, might be a won't fix on that branch?

Comment 35

[Eric Pang [:epang] UX]

(In reply to Naoki Hirata :nhirata (please use needinfo instead of cc) from comment #34)
> v1.1 doesn't show the account type on leo.  Might be a separate bug.
> 
> V1.0.1 does not have this change, might be a won't fix on that branch?

Hi Pavel, can you look into this?  Naoki has noticed that only some but not all of changes can be seen on v1.1.  Thanks!

Comment 36

[Eric Pang [:epang] UX]

(In reply to Eric Pang [:epang] from comment #35)
> (In reply to Naoki Hirata :nhirata (please use needinfo instead of cc) from
> comment #34)
> > v1.1 doesn't show the account type on leo.  Might be a separate bug.
> > 
> > V1.0.1 does not have this change, might be a won't fix on that branch?
> 
> Hi Pavel, can you look into this?  Naoki has noticed that only some but not
> all of changes can be seen on v1.1.  Thanks!

Gareth, seeing as you implemented this bug can you take a look? Thanks!

Comment 37

[Gareth Aye [:gaye] (back from PTO)]

Comment on attachment 733651 [details]
Pull request

NOTE: Please see https://wiki.mozilla.org/Release_Management/B2G_Landing to better understand the B2G approval process and landings.

[Approval Request Comment]
Bug caused by (feature/regressing bug #): Feature
User impact if declined: The email account settings will look worse / less consistent than they do after my patch.
Testing completed: epang, pavel, and I all confirmed visually that this looks right.
Risk to taking this patch (and alternatives if risky): Low... this is a UI-only fix so in the worst case scenario the UI is not better.
String or UUID changes made by this patch: None.

Comment 38

[Alex Keybl [:akeybl]]

Comment on attachment 733651 [details]
Pull request

Not a v1.1 blocker, and we're past the point of taking non-blocking enhancements.