1043533 - email UI: account settings styling

Status: VERIFIED FIXED

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

Description

[Dylan Oliver [:doliver]]

Update the styling of the account settings page to more clearly indicate which items are clickble. See design spec in bug 1028224.

Comment 1

[James Burke [:jrburke]]

Attachment: GitHub pull request

This pull request fixes this bug as well as bug 1043529. I grouped them because they were simple HTML/CSS fixes.

:peko, for Visual Design review, please see the pull request. I attached an image that shows how the items look now.

Comment 2

[Peko Chen [:pekochen]]

Hi James,

although we might follow building blocks, however after discussing, we thought if we can use icon instead of list button world be better.
we have new visual proposals and still waiting for the feedback.
I will update the latest spec asap.
thank you.

Comment 3

[James Burke [:jrburke]]

Comment on attachment 8463501 [details] [review]
GitHub pull request

Clearing ui-review for now since it sounds like dev changes will be needed once new visual design is approved.

Comment 4

[Edward Chen[:edchen]]

No testcase, I will check spec to verify new ui design directly.

Comment 5

[James Burke [:jrburke]]

In Bug 1043529 comment 9, as part of closing that bug, it also added the chevrons for those account settings card. 

We can still use this ticket to track a different change for that, but if we run out of time this sprint for that, we at least have something that matches the current indicator for "another card will show up if you press on this item".

Comment 6

[Juwei Huang[:juwei]]

Hi James,
We DO use the chevrons for the account settings card. I think what Peko said in comment 2 was especially for "Load more messages from server", and it's update on bug 1028224.
So for account settings styling, it is the same idea as I present in ux spec.

Comment 7

[Fang Shih [:fang]]

Attachment: Email_Settings.png

Hi James, 
It looks good! The only thing we need to adjust is divider width. It would be great if we leave 1.5 rem space for both sides, so that we can match the UI with the system settings. Then we can wrap it up! : ) Thanks!!

Comment 8

[James Burke [:jrburke]]

Attachment: account-screens.png

Juwei: here are the account screens, adjust to have the 15px shortened bottom borders, and hopefully just better alignment cleanup overall. Screen descriptions:

1) Settings screen shown during account creation
2) Main settings, showing the account listings
3-4) Account settings, taken in two screenshots since could not capture the full length in one shot.

Comment 9

[Juwei Huang[:juwei]]

Comment on attachment 8475422 [details]
account-screens.png

Looks nice!!Thank you James! r+

Comment 10

[James Burke [:jrburke]]

Attachment: GitHub pull request

ui-review complete, starting to dev review.

Comment 11

[Andrew Sutherland [:asuth] (he/him)]

Comment on attachment 8475670 [details] [review]
GitHub pull request

I love "diff -w"! ;)  r=asuth
Thanks for the screenshots, as always!

Comment 12

[James Burke [:jrburke]]

Merged in master:
https://github.com/mozilla-b2g/gaia/commit/602373cff014164a8b42b1993afa490123f86b16

from pull request:
https://github.com/mozilla-b2g/gaia/pull/23049

Comment 13

[[:RJ]]

This issue is verified fixed on Flame 2.1(319mb)

Environmental Variables:
Device: Flame Master
Build ID: 20140903000204
Gaia: fbb297c39aab5f17b179533d2a9a6c5166b2c197
Gecko: fb5e796da813
Version: 34.0a2 (Master)
Firmware Version: v123
User Agent: Mozilla/5.0 (Mobile; rv:34.0) Gecko/34.0 Firefox/34.0


All styles stated and shown have been implemented to the Email UI properly.

Comment 14

[Derek Harris [:DerekH] - Dont need info. Last day 6/5/15]

Additional verification information for comment 13

1) Divider width is shorter as expected
2) Tappable areas have ">" next to them to show that they are tappable buttons
3) The "show external images" link has been implemented into emails properly
4) "n messages marked as unread" now has a smaller banner, but the tappable button no longer says "undo", and is not in a text bubble as shown on the design doc in bug 1028224
5) "Unable to connect to server" message has a smaller banner and the retry button has been removed, but it is not in a text bubble as shown on the design doc in bug 1028224
6) "n New Messages" has been changed to a text bubble at the top of the screen and is shown correctly
7) I was not able to check the "Load more messages from server" button change. I could not get it to show up.

Comment 15

[Derek Harris [:DerekH] - Dont need info. Last day 6/5/15]

Hello Dylan, from comment 14, for the 4th and 5th verify, it seems as though the UX I am seeing on my phone has changed from the original design, but is not matching the design on the spec sheet. Has the expected UX design changed since the spec sheet was created?

Comment 16

[James Burke [:jrburke]]

Those toast changes mentioned in 4) and 5) were part of the toast 2.0 visual redesign that finally got landed, as part of bug 1021981.

Comment 17

[Derek Harris [:DerekH] - Dont need info. Last day 6/5/15]

Thanks for your help James!

I was able to get the "Load more messages from server" string to show up today, and it appears to be different from the design sheet as well, it shows the downloads icon (a down arrow with a line under it) and says "Load more messages" is this new expected design?

Comment 18

[James Burke [:jrburke]]

Yes, that work was tracked in bug 1043529.

Comment 19

[Derek Harris [:DerekH] - Dont need info. Last day 6/5/15]

Thank you, all finished with full verification of this bug.