Closed Bug 1021981 Opened 10 years ago Closed 10 years ago

[email] Update toast display to 2.0 visual redesign

Categories

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

x86
macOS
defect
Not set
normal

Tracking

(feature-b2g:2.1)

VERIFIED FIXED
2.1 S3 (29aug)
feature-b2g 2.1

People

(Reporter: jrburke, Assigned: jrburke)

References

Details

(Whiteboard: [tako][2.1-feature-qa+])

Attachments

(5 files, 1 obsolete file)

This got missed in the redesign pass. It is not too far off, looks like just some color and padding changes. 

The attachment in bug 951070 comment 2 shows how it should look, although may need to ping Fang for the exact color of gray background to use.
Attached file GitHub pull request (obsolete) —
See pull request for dev notes. Asking :mcav for review since this touches the toast stuff that is also affected by outbox, and these changes may cause some merge work for him.

I will upload an image showing how it looks now and ask for UX/VxD signoff too.
Attachment #8449605 - Flags: review?(m)
Attached image toast-screens.png
Shows how the toast screens look now, to better match the 2.0 refresh. Just confirming it is OK with VxD. Fang, the background is #5f5f5f, and the text is white, and it uses the standard /shared buttons if a button is shown. Tapping anywhere on the toast will dismiss it.
Flags: needinfo?(fshih)
Comment on attachment 8449605 [details] [review]
GitHub pull request

lgtm
Attachment #8449605 - Flags: review?(m) → review+
What happens if the translation for "Undo" is crazy long?  I think we may have some existing l10n bugs on that.
Are the buttons part of a standard spec? If not, seems like it might be more effective as a "Tap to retry." kind of link, if l10n is an issue.
Attached image toast-long-button.png
Here is a screenshot with a button that has long text. We are just using a /shared button and its style for that button, so more of a /shared issue. At least it is aligned well.

Before this change, the buttons where below the text, but for most of those cases, it meant taking up more vertical space to accommodate that design. It was also a bit of an issue to decide alignment in that case. For single line text descriptions, left aligning the text and a center aligned button looked weird. However, with multiple line text, center aligning the text looked weird. Since depending on the message, local and screen width, it was unclear if the message would be a single or multiple line, it would complicate the logic to work out the right choice in those cases.

But we could switch to the button below the text if taking up more vertical space is the desired tradeoff, and an alignment choice was made. Will wait to hear from VxD.
(In reply to James Burke [:jrburke] from comment #2)
> Created attachment 8449609 [details]
> toast-screens.png
> 
> Shows how the toast screens look now, to better match the 2.0 refresh. Just
> confirming it is OK with VxD. Fang, the background is #5f5f5f, and the text
> is white, and it uses the standard /shared buttons if a button is shown.
> Tapping anywhere on the toast will dismiss it.

Hi James, 

Thanks for the update. In 2.0 we don't have in-app toast with button on it from our building blocks yet. I think I'll provide an icon for each undo and retry in this case to avoid the issue of long text. I'll upload the icons asap once I have the final icon ready! Thanks!
Flags: needinfo?(fshih)
(Setting needinfo to track new icon dependency.)
Flags: needinfo?(fshih)
Attached file Email_retry_undo.zip
Attached the toast icons and visual spec. Thanks!
Flags: needinfo?(fshih)
QA Contact: edchen
Blocks: 1028224
feature-b2g: --- → 2.1
Whiteboard: [tako]
Attached file GitHub pull request
A new pull request that obsoletes the old one, and uses the visual styles in comment 9. Includes the removal of the Retry button for "cannot connect to server", as desired for 2.1.

I will attach some screenshots next, and ask :peko to confirm the styles, but it should also be ready for review. Asking :mcav for dev review since he recently revamped the toaster code.
Attachment #8449605 - Attachment is obsolete: true
Attachment #8463018 - Flags: review?(m)
Attached image toast.png
Asking :peko to confirm this is the toast style desired for 2.1.
Attachment #8463019 - Flags: ui-review?(pchen)
Attachment #8463018 - Flags: review?(m) → review+
QA Whiteboard: [2.1-feature-qa+]
QA Whiteboard: [2.1-feature-qa+] → [COM=Productivity]
QA Whiteboard: [COM=Productivity] → [COM=Gaia::E-Mail]
QA Whiteboard: [COM=Gaia::E-Mail] → [COM=Gaia::E-Mail][2.1-feature-qa+]
Flags: in-moztrap?(edchen)
QA Whiteboard: [COM=Gaia::E-Mail][2.1-feature-qa+] → [COM=Gaia::E-Mail]
Whiteboard: [tako] → [tako][2.1-feature-qa+]
No testcases, I will check UI spec directly when I verify relevant scenario.
Flags: in-moztrap?(edchen) → in-moztrap-
Target Milestone: --- → 2.1 S3 (29aug)
Comment on attachment 8463019 [details]
toast.png

Asking Juwei if this is OK since visual designer will not be available this week.
Attachment #8463019 - Flags: ui-review?(pchen) → ui-review?(jhuang)
Assignee: nobody → jrburke
Comment on attachment 8463019 [details]
toast.png

Looks good! Thanks James!
Attachment #8463019 - Flags: ui-review?(jhuang) → ui-review+
Merged to master:
https://github.com/mozilla-b2g/gaia/commit/caf4722e83a5304bf6ae4acbfda855d078761d24

from pull request:
https://github.com/mozilla-b2g/gaia/pull/22194
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
[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
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: