950208 - [meta] Email Visual Refresh

Status: RESOLVED FIXED

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

Description

[Patryk Adamczyk [:patryk] UX]

Meta bug for visual design refresh of the email app

Comment 1

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

("Email" is way too generic an alias to use in bugzilla since there is a single aliasing namespace across the entire installation.  Also, an alias is not useful if it changes a lot; since this one has changed 5 times I think we can conclude an alias is not needed for this case and people are fine with the bug number.)

Comment 2

[Stephany Wilkes]

Sorry, Andrew. Cleaning up a lot of bugs that weren't mine.

Comment 3

[James Burke [:jrburke]]

Attachment: screen-samples-1.png

Posting some screenshots with current state of the dev branch. These were taken on a hamachi. If you want to try a version of the app with the changes, it is here (built for a hamachi screen resolution):

http://jrburke.com/work/gaia/email-vxd-1.zip

work is being done in this branch, diff view:

https://github.com/jrburke/gaia/compare/bug950208-email-2.0-visual-refresh

Some notes:

1) changes for centering of titles in the header just landed across the apps. So if something looks weird, it will likely get fixed soon when they land cleanup changes.

2) Bug 1010673 is tracking an update to make sure all the icons are correct. There are some that are not at the moment.

3) When viewed on an actual hamachi device, the gray header areas in message compose and message view look washed out, hard to see unless viewing at a particular angle.

4) For Compose, at least right now, the code adds a "summary" area for multiple attachments and the total file size. You can see it in the third row, second column in the attached graphic. This is not part of the vxd but since the code was doing that summary before, figured it might want to be kept, to give the user an idea of the total attachment size. However, if UX feels like it should be taken out, just let me know.

5) The unread count in the message list header is not shown right now. I will likely file a separate bug for that, as it will require more code changes, and the rest of this work can land on its own. Same thing with the vxd showing a Reply with the original message in a gray quoted area: not in this changeset, that work will be tracked in a specific bug for that work.

At this point, I am open to hearing about design tweaks. I recommend trying out the app zip. Once bug 1010673 has a full set of updated images, if I do not hear about any design changes, I will likely then proceed with review and landing what is there so far. We can always file smaller follow on fixes once this code lands, as we use it.

Comment 4

[Fang Shih [:fang]]

Attachment: VsD_Refresh_Email_bug950208.zip

Hi James,

Thanks for the updates!! Looks great!! 
I've installed the branch to see from Unagi device. And I am not sure was because the device or some other reason, there are very little things may needs you fix. So I've put them together in a spec to show some stuff that needs to be tweaked. Mainly are font weight issues on the message list. And I also agree with you on the washout background in massage compose area, so also updated the new color for it. Beside these two things, just some icon update and the header issue, which likely get fixed soon when they land cleanup changes and my icon update. Thank you James!! And for the "summary" area in compose view, I will check with UX on this. 

Thanks!

Comment 5

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

Rough draft test case created; will need to update and finalize : 
https://moztrap.mozilla.org/manage/case/13033/

Comment 6

[James Burke [:jrburke]]

I applied the font weighting feedback and the updated set of icons. The hidpi version is looking sharp now!

Some app zips to try, normal:

http://jrburke.com/work/gaia/email-vxd-2.zip

hidpi:

http://jrburke.com/work/gaia/email-vxd-hidpi-2.zip

Outstanding vxd feedback, once these are resolved and if there is nothing new from these updates, then I will proceed with dev review:

1) The message reader/compose gray background color that looked washed out on unagi/hamachi: the suggestion in comment 4's zip was to use a background color of #f2f2f2. However, that is the color currently in use, so I did not do any updates there.

2) Compose attachments summary (shown when multiple attachments are attached): should it be removed or kept? If kept, is the existing visual OK?

Note that headers may still be a bit odd looking, but updates for those should happen in other bugs related to the shared/ styles.

Comment 7

[James Burke [:jrburke]]

One other thing I just noticed: the reply icon does not appear to be symmetric. While tapping refresh in the message list, you can see that it will wobble a bit.

This can be confirmed in a graphics program by overlaying 90 degree-rotations of the image on top of each other: the line gets wider, where if it was symmetric, it should stay a similar thickness to the original thickness without the overlayed rotations.

Comment 8

[James Burke [:jrburke]]

I also noticed some of the icons were fuzzy, but they are in the shared/style area. I filed a separate bug for those since they are in the shared area, bug 1013783, but if the visual design people involved in this bug also would provide those images, feel free to attach a zip of them to that other bug and I will take the bug to merge the files into the tree.

Comment 9

[James Burke [:jrburke]]

Apparently the Flame device uses @1.5x icons, so the 2.0 icons are less important for that device, but I would like to have them all sorted anyway since we are doing the the update. 

The 1.5x, the refresh icon also wobbles, so any update for the refresh icon should be for all sizes.

For the other work that was shown in the VXD docs that will not be included in this update, they are tracked in separate bugs since they require a bit more work:

* Bug 800402: show the number of unread messages in the message-list header after the folder name
* Bug 940365: remove original message when replying

Comment 10

[Fang Shih [:fang]]

Attachment: Email_Bug 950208.zip

Hi James,

Thanks for the great updates! I’ve downloaded the zip and tried on devices, they are looking great!! 

As you said has found some fuzzy icons in hidpi and flame device. So I’ve fixed it and will be updating it on bug 1013783. Also fixed the refresh icon, you can find it in this attached. 

For the compose attachments summary, I think we kept it and I’ve also made a visual spec for it, which you can refer to the first page of the file attached.  

And while I'm looking at email list, I found that text are sort of overlapping with the icon, when there is an attachment icon at the end. Is that possibly we can leave a little gap in between? I’ve also attached the image (spec page 2). 

Thanks!

Comment 11

[James Burke [:jrburke]]

Thanks Fang! Here is an updated app zip with the changes you outlined (generated for @1.5x devices like the Flame, but should also work on @1x devices):

http://jrburke.com/work/gaia/email-vxd-3.zip

Some of the header icons may not appear hires, that is being tracked in bug 1013783. However, I confirmed the rest of our header icons will be hires when that lands.

I think it is really close now. I just noticed a couple things that are missing though:

1) The "starred" state in the message reader. If the user stars the email, by tapping on the "flag" icon in the message reader, we do not have a "flag on" state. There is a small orange flag that will show up in the message list though.

Right now, the image for that star/flag in the message reader is blank if the user has starred the message. Maybe create the image and name it "star_on.png", with similar dimensions to the star.png image (and in all the @ sizes we have).

2) Similarly, for those bottom buttons in the message reader, there is no "_press" state for those icons, for when the user presses and the background changes blue with the icons usually turning white.

Perhaps that is not the new design style though, to have pressed icons. If they should be there though, then _press versions of those icons are appreciated. It is probably worth

Comment 12

[Fang Shih [:fang]]

Attachment: star_on.zip

Hi James, I’ve made a "flag on” icon with orange flag, for show up when the message “starred”. And for those bottom buttons in the message reader, I believe they are no longer turning white when the user presses, the only changes is the background changes blue. That is the latest design style for now. Thank!

Comment 13

[Fang Shih [:fang]]

Attachment: 2014-05-28-14-29-33.png

Hey James, I've also installed this patch on my flame device, and the arrow icon (back and next message) in the header of the message reader still looks fuzzy for some reason. You can refer to the file attached. I was wondering is it image issue or? Thanks!

Comment 14

[James Burke [:jrburke]]

Attachment: GitHub pull request

Asking :mcav for dev review to spread the review love around, and he has recent experience with some of the affected areas.

Fang: Thanks for star_on icon. The fuzzy next/previous buttons was because bug 1013783 had not landed yet in that branch, but it is landed now.

Here is an app zip generated for 1.5x resolution devices based on the contents of this pull request:

http://jrburke.com/work/gaia/email-vxd-4.zip

Based on the review comments of previous revisions of the app zips, I believe this meets UX/Visual Design requirements, so if this passes dev review I will land it. 

However, if UX/Visual Design has concerns, please let me know within the next day, as I hope to land it this week. The only changes in this zip as compared to the previous the -3 version is the star_on image, and a rebase over latest master code (which includes the sharp next/previous icon changes).

Comment 15

[Marcus Cavanaugh [:mcav]]

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

Looks good! I made a couple of comments on the alignment of the "To:" headers; the style for message_reader's version seems simple to fix, so it'd be nice if we could get that tweak in; the compose version seems harder and maybe less noticeable, so probably not worth addressing here unless you see a simple way to fix it.

Everything looks really nice, feels like a new app, good work! r=mcav

Comment 16

[Juwei Huang[:juwei]]

Hi James, 
I also install the patch, it looks like a brand new email! cool!

Somehow I just found that in compose view the "To/cc/bcc" field is scrollable?
It seems like there are some misunderstanding here between me & Fang...sorry about that :(
Can you change it back to original design?

Also, I'm thinking of some ideas to avoid the to/cc/bcc field taking too much space of the foreground in the small screen device, such as always automatically scrolling the screen to where the cursor is. 
So I suggest it'd better keep the to/cc/bcc field always expand right now and we could make the implementation on next version.

Comment 17

[James Burke [:jrburke]]

I just pushed some changes based on :mcav's feedback about font baselining. :mcav, I also tried to fix the compose one, you may want to check it out again.

Juwei, I changed it so the compse addresses are not independently scrollable. Here is a new zip file to try, and I will wait for explicit OK from you before merging:

http://jrburke.com/work/gaia/email-vxd-5.zip

Comment 18

[Juwei Huang[:juwei]]

It looks great! Thank you :)
Need info Fang to confirm.

Comment 19

[Fang Shih [:fang]]

I was wondering if we can keep the title ( "to:" or "cc:" and "bcc" ) stays on the first line when we have many rolls of contacts instead of staying in the last roll. So the user are able to tell what are those contacts under. Hope this is not too late to change...: (

Comment 20

[James Burke [:jrburke]]

Here is an update with the to/cc/bcc and the + icon at the top:

http://jrburke.com/work/gaia/email-vxd-6.zip

Does that look OK?

Comment 21

[James Burke [:jrburke]]

Attachment: addr-top.png

Screen capture showing to the to/cc/bcc staying at the top with the add icon as more addresses are added.

Comment 22

[Fang Shih [:fang]]

(In reply to James Burke [:jrburke] from comment #20)
> Here is an update with the to/cc/bcc and the + icon at the top:
> 
> http://jrburke.com/work/gaia/email-vxd-6.zip
> 
> Does that look OK?

YES!!! It looks great! Thank You!! : )

Comment 23

[James Burke [:jrburke]]

Merged in master:
https://github.com/mozilla-b2g/gaia/commit/71c10ef6f43c3d2eb9a5b8f5b7f307156c4097c1

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

Comment 24

[Stephany Wilkes]

Email refresh is a blocker to 2.0 Visual Refresh.