882000 - [Email] Attachment icons are not vertically center aligned in Email reader in case of multiple attachments

Status: VERIFIED FIXED

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

Description

[Leo]

1. Title : Attachment icons are not vertically center aligned in Email reader.
2. Precondition : Email should be working and an IMAP account is configured
3. Tester's Action:  Launch Email -> Open any email which has more than one attachment.
4. Detailed Symptom (ENG.) : Vertical alignment of attachment icons are not proper.
5. Expected :All email attachments must be aligned properly.
6.Reproducibility: Y
           1)Frequency Rate : 100%
7.Gaia Master/v1-train : Reproduced
8.Gaia Revision: 517d3d9f0d7538095799c9c067e398fb8ba96ba2
9.Personal email id:  [e-mail]

Comment 1

[psingapati]

Attachment: Message View Attachments not aligned properly

In Message view screen attachment icons are not aligned properly.

Comment 2

[Leo]

Does this also require new wireframes like Bug 870320.
Please check

Comment 3

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

(In reply to Leo from comment #2)
> Does this also require new wireframes like Bug 870320.
> Please check

I believe email-attachments.pdf at https://mozilla.box.com/applications/1/864506434 provides revised wire-frames starting at page 16.  (If that link dies, go to https://mozilla.box.com/applications/ then "Email" then "Interaction").

I don't see any updated visual designs in the box.

Dominic, since you've just finished fixing up the compose UI as it relates to attachments, maybe this would be easiest for you to take on?

Comment 4

[Dominic Kuo [:dkuo]]

Okay, no problem. And I feel the patch of bug 870320 should also fix this, after I land bug 870320 I will come back to check this.

Comment 5

[Dominic Kuo [:dkuo]]

Attachment: Mockups from bug 870320

The attachment is the visual mockups from Eric in bug 870320, we should fix this by fitting the mockups. And I was wrong in comment 4 because I thought this issue was talking about the compose page.

Comment 6

[psingapati]

Attachment: TD_42460_attachment.patch

Hi :dkuo,

are you working on this issue?
can you please update on this.

:asuth,

Can we use the attached patch for this issue, in case there are no visual design not defined yet or if it is not planned for v1.4. I have seen the attachment #762530 [details], there is only "download" icon screen present, but no visuals for "downloading" and "view".

Please suggest.

Comment 7

[James Burke [:jrburke]]

I will take this bug, as I expect :dkuo is busy with other non-email items now. So the issue left to fix now is the attachment download icon in the message_reader, in two ways:

1) it is not centered vertically, which the attached pull request tries to address.
2) the icon looks out of place now with the new visual design.

I will ask UX for an updated download icon (there is no "view" planned for 1.4), and then revisit the CSS change based on the icon we get. First, will try with the icon in the attachment zip, generate a screenshot and then ask UX about it.

Comment 8

[James Burke [:jrburke]]

Attachment: GitHub pull request

Start of patch, not ready for review yet since need some UX feedback first, will attach an image after this attachment.

Comment 9

[James Burke [:jrburke]]

Attachment: Image showing pull request state for attachment display fixes

This image shows the current state of the pull request. 

The gray background for the download icon was removed to fit in better with the current visual style. However, the View button still looks funky, so would like to get some visual design feedback on what other changes might be needed for the pull request.

Comment 10

[Stephany Wilkes]

Flagging Casey on VxD advice and Patryk as back-up.

Comment 11

[Patryk Adamczyk [:patryk] UX]

Comment on attachment 8367809 [details]
Image showing pull request state for attachment display fixes

Overall this looks fixed, we're doing a refresh in v.1.4, so some of the graphic issues will be fixed.

However looking at the 3rd attachment. I would fix the attachment label width to reduce ellipsis. Increase the width by 20-25px. Currently the gap between the download button and attachment size is really large. Is the reason for this gap to account for the a long size (kb) text string?

Comment 12

[James Burke [:jrburke]]

I left a comment in Bug 951078 about the ellipsis and KB spacing, and looking at that visual design, it will be fixed with that design, along with better icons. So I am going to delay work related to that ticket, since the window for 1.4 landings before branching is closing soon, and I want to at least close out the major issue that motivated this ticket, the vertical center alignment issue.

Comment 13

[Marcus Cavanaugh [:mcav]]

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

Assuming the screenshot matches the code, looks good to me.

Comment 14

[James Burke [:jrburke]]

Merged into gaia master:
https://github.com/mozilla-b2g/gaia/commit/0bd8cd3ec44de6289da066685e1a2aed805deb91

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

Comment 15

[Edward Chen[:edchen]]

[Environment]
aia      8f802237927c7d5e024fb7dca054dd5efef6b2e6
Gecko     https://hg.mozilla.org/mozilla-central/rev/907cacf958de
BuildID   20140316160201
Version   30.0a1
ro.build.version.incremental=eng.archermind.20131114.105818
ro.build.date=Thu Nov 14 10:58:33 CST 2013


[Result]
Bug fixed, I marked it to "VERIFIED"