1043527 - email UI: "Show external images" styling

Status: VERIFIED FIXED

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

Description

[Dylan Oliver [:doliver]]

Update the styling of the button to load external images. See design spec in bug 1028224.

Comment 1

[James Burke [:jrburke]]

Attachment: external-images.png

Attached is a screenshot is an experiment I did to meet the goals of this ticket. Since this ticket is fairly new, there is not visual design spec for this, so I could have gotten it horribly wrong.

So :peko, in the case where you did not want this sort of styling, feel free to discard this, and in that case, this ni request is for the visual spec that you desire.

The image on the left is what is shown when the images will be fetched from a remote web site. The second image shows how it will look if there are other attachments in the email, and if the images for the email message are included in the email, but just not shown.

I used the View image used for attachments here, but again, this is very speculative, just more to start the conversation.

Comment 2

[Peko Chen [:pekochen]]

Hi James,

Thanks for your work~ actually your screenshot is quite the same as my design. Just need to modify some details. I still waiting for the feedback from Peter and Patryk, and will update spec asap.
thanks

Comment 3

[Edward Chen[:edchen]]

No testcase, I will verify UI directly.

Comment 4

[Peko Chen [:pekochen]]

Attachment: spec_external_image.zip

Hi James,

Zip file including spec and icon image.
Please see attached zip file for your reference.
thanks!

Comment 5

[Peko Chen [:pekochen]]

Attachment: spec_external_image.zip

updated more detail

Comment 6

[James Burke [:jrburke]]

Attachment: external-images.png

Attached is what I have implemented now in a branch, based on the spec. It shows the two types of messages that could show up there. Notes:

1) For the bottom one pixel border, I used #f2f2f1 instead of #f5f5f4, because the existing border under the subject line is use #f2f2f1.

2) It is not exactly 55px height, more like 52px, based on font sizing results and using the space that comes naturally. I did not want to set a hard height because the text needs to be able to expand even potentially to three lines based on the localizations.

3) The zip file with the spec only included icon_show_external_image.png. I will need the @1.5, 2 and 2.25x versions of the icon too.

Comment 7

[Juwei Huang[:juwei]]

Comment on attachment 8473394 [details]
external-images.png

Looks good to me! Thanks James!

Comment 8

[Peko Chen [:pekochen]]

Comment on attachment 8473394 [details]
external-images.png

Looks good! Thank you James!

Comment 9

[Peko Chen [:pekochen]]

Attachment: icon.zip

uploaded other resolution.

Comment 10

[James Burke [:jrburke]]

Attachment: GitHub pull request

Pull request, asuth already r+ in the pull request, but will formalize that with the flags here.

Comment 11

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

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

It's traditionally allowed to directly set the review flag to + if you indicate in the comment who did it and via what communication mechanism.  like "r=asuth from the pull request" or "r=asuth on IRC".

Comment 12

[James Burke [:jrburke]]

Merged in master:
https://github.com/mozilla-b2g/gaia/commit/5e37ce8c7f0bf6992911d77eb31513db37656aba

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

Comment 13

[Edward Chen[:edchen]]

[Environment]
Gaia      e424c85eda87a40c0fa64d6a779c3fa368bf770b
Gecko     https://hg.mozilla.org/mozilla-central/rev/daa84204a11a
BuildID   20140824160205
Version   34.0a1
ro.build.version.incremental=94
ro.build.date=Tue May 20 09:29:20 CST 2014

[Result]
PASS