Closed Bug 940132 Opened 11 years ago Closed 10 years ago

[email] change drawers to slide down UX for better integration with Haida app edge swiping

Categories

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

x86
macOS
defect
Not set
normal

Tracking

(feature-b2g:2.0, tracking-b2g:backlog, b2g1828+, b2g-v2.0 fixed)

VERIFIED FIXED
2.0 S1 (9may)
feature-b2g 2.0
tracking-b2g backlog
Tracking Status
b2g18 28+ ---
b2g-v2.0 --- fixed

People

(Reporter: jrburke, Assigned: jrburke)

References

Details

(Keywords: feature, Whiteboard: [ucid:ProductivityXX, 1.4:p2, ft:productivity], ux-bug-bash-1.3[p=5])

Attachments

(11 files, 1 obsolete file)

With Haida edge swiping between apps, the drawers in email and calendar do not fit in as they slide in from the side.

UX has a redesign for those drawers that slide down from under the app header instead.

This was discussed as a 1.3 item as app edge swiping seemed like a likely 1.3 item.

Initial box link (likely will not work in the future):

https://mozilla.box.com/s/10ab2eoqoabvx6dhh82v
blocking-b2g: --- → 1.3?
I broke out the calendar work as bug 40512 since the email and calendar changes will be separately reviewed and can land independently. This bug will be used for the email work.
Summary: [email] [calendar] change drawers to slide down UX for better integration with Haida app edge swiping → [email] change drawers to slide down UX for better integration with Haida app edge swiping
Whiteboard: [1.3:p2]
The current UX spec is under this link:

https://mozilla.app.box.com/s/squtcoju8cqd2fpvllpd

Go to "Visual Design", then select the FFOS_1.3_VsD_Refresh_Drawers.pdf link and download it.
Latest snapshot from email branch, including some of the new header visuals that were recently pushed into master:

Movie: http://jrburke.com/temp/email-drawery-6.mov
App Zip: http://jrburke.com/temp/email-drawery-6.zip

Install the app zip using these steps:
https://github.com/jrburke/gaia-dev-zip#for-the-ux-person

Branch with the code:
https://github.com/jrburke/gaia/compare/drawery

I still need to clean up the code mess I made, just mentioning for completeness. I do not think it should be code reviewed yet.

Next steps:

1) Meet with UX tomorrow to go over any final changes, hopefully get to UX approval.
2) Clean up the code and ask for technical review.
Not blocking but we are targeting this for 1.3.
blocking-b2g: 1.3? → ---
Keywords: feature
When trying out on the device, the contrast in colors for different sections seemed not as clear, the screen was not as crisp as the desktop display. As an experiment, we tried a darker background for the accounts area. Still needs more thought, but in the interest of gathering more feedback (IRC or email feedback to Rob directly may be best given UX bugmail loads), here is what that looks like:

Movie: http://jrburke.com/temp/email-drawery-dark-1.mov
App Zip: http://jrburke.com/temp/email-drawery-dark-1.zip
Note: At our 11/26 sprint planning meeting we decided this was not happening for v1.3.  This will land in v1.4 at the earliest.
Whiteboard: [1.3:p2] → [1.4]
Target Milestone: --- → 1.3 C2/1.4 S2(17jan)
Whiteboard: [1.4] → [1.4], ux-bug-bash-1.3
blocking-b2g: --- → backlog
UX spec updated.
1. When drag the list up, the accounts will move up along with the folders.
2. Need an indicator to point out current account/folder
3. Sync information will be place on the toolbar
Whiteboard: [1.4], ux-bug-bash-1.3 → [1.4], ux-bug-bash-1.3[p=5]
Target Milestone: 1.3 C2/1.4 S2(17jan) → 1.3 C3/1.4 S3(31jan)
Just skimming the pull request again and I noticed there's an accidental removal of significant trailing-whitespace in the locale file:

 # senders-separation-sign separates the email accounts of senders.
 # Notice that we have a space after the comma.
-senders-separation-sign=, 
+senders-separation-sign=,
I love my editor for trimming unnecessary whitespace, but yes, in the locale file it is important! Fixed, and for reference to anyone new who comes along, I do not consider the code cleaned up and ready for review, still experimenting with some things, but I'm using the drawery-dark branch for developing this feature:

https://github.com/jrburke/gaia/compare/drawery-dark
Whiteboard: [1.4], ux-bug-bash-1.3[p=5] → [ucid:ProductivityXX, 1.4:p2, ft:productivity], ux-bug-bash-1.3[p=5]
Update the Visual Design of the Email Drawer. Specs attached. 
Thanks!
Target Milestone: 1.3 C3/1.4 S3(31jan) → 1.4 S1 (14feb)
Attached video Drawer open and closing
I am in progress with the changes, but I need some UX guidance:

When we talked during the work week, it was mentioned that the accounts area should scroll with the folders, in case the user had a bunch of computers. So I implemented scrolling the accounts with the folder, but I think perhaps you also want to scroll the "Accounts" title section too? Otherwise, if the person is scrolled, opening and closing the accounts are not visible. See the attached video.

So the basic question is, should the Accounts title area with the arrow toggle also scroll away if the user scrolls down to view folders further down in the list?
Flags: needinfo?(jhuang)
Yes, the account title should also scroll with the list too.
Flags: needinfo?(jhuang)
Attached file GitHub pull request (obsolete) —
I believe the code is ready for UX review, so asking for a review from Juwei. Once UX gives an r+ for it, I will then ask for technical review.

I made a short video walk-through of the changes using gaia on desktop:

http://jrburke.com/work/gaia/email-drawer-walkthrough.mov

and you can try the code using this zip file:

http://jrburke.com/work/gaia/email-drawer.zip

Install the zip file by following these instructions:

https://github.com/jrburke/gaia-dev-zip#for-the-ux-person

Technical notes on the code changes:

The UX desire was to collapse folder_picker and account_picker into a drawer that slid down from under the header. This was accomplished by doing the following high level changes:

1. account_picker logic was folded into folder_picker, and account_picker removed.

2. The folder_picker is now an "immediate" card transition, but that card is initially transparent. The folder_picker then handles the transition of sliding down the folder list and fading in a background tap shield itself.

3. The "last sync" time now shows up in the message_list card in the bottom toolbar. It is the last sync time for that folder.

4. The main settings card now fades in on top of the folder_picker drawer.

5. Clicking on an account takes the user directly to the inbox for that account.

Some changes to fix jshint errors, but mostly in folder_picker, in an effort to inch towards jshint compliance.

Existing marionette tests already exercise the folder_picker (choosing a folder, switching accounts, opening settings) so no new tests with this change, just modifications to get the existing tests to pass with these changes.
Attachment #8375367 - Flags: ui-review?(jhuang)
Right now there are no @1.5 or @2 versions of the images in the pull request (not zip, where I would only expect one set of images).  Should there be?
I notice in the visual design update in https://wiki.mozilla.org/Gaia/Email/UX/Decisions that nested folders get a folder icon but top-level folders do not and this has been reflected in the patch.  This does not appear to have existed in the previous UX/visual design things I've seen.

Is this intentional?  If so, can you provide a rationale I can put at https://wiki.mozilla.org/Gaia/Email/UX/Decisions so we can refer people who file bugs about this inconsistency to it?  (Or feel free to edit the page directly!)

Separately, are we planning to eventually parametrize the icon based on the folder type?
Flags: needinfo?(fshih)
(In reply to Andrew Sutherland (:asuth) from comment #17)
> I notice in the visual design update in
> https://wiki.mozilla.org/Gaia/Email/UX/Decisions that nested folders get a

Whoops, X multiple cut/paste buffer failure, I meant in attachment 8367097 [details]
Hi Andrew,
Thanks for pointing out!
I believe the folder icon have appeared in previous UX/visual design which Przemek has provided. I think what we want to accomplish is adding more difference between nest folder and top level level folder. But maybe Przemek would have the better detail to answer for it.  

Hi Przemek, Can you help with this? Thanks!
Flags: needinfo?(fshih) → needinfo?(pabratowski)
Adding Rob who was the interaction designed for drawers and requested that we use a folder icon for nested folders. He'll be able to attache his IxD spec to the bug.
Flags: needinfo?(pabratowski) → needinfo?(rmacdonald)
Hi everyone...

Juwei has posted the latest spec and now owns the feature. But the original intent of the folder icon was to a) differentiate subfolders and b) help with the visual alignment. And, yes, this was new in the original spec.

I'll flag Juwei to see if there have been any changes to this since the original version.

Happy valentines day!
Flags: needinfo?(rmacdonald) → needinfo?(jhuang)
Alright, so it looks like we've gone full circle and this is back in Juwei's queue again for ui-review, where she can also give the verdict on the folder icons.
Comment on attachment 8375367 [details] [review]
GitHub pull request

It's a large circle, indeed.
I would say, that's stick to folder/nest folder design and put it as an general idea right now.
James, thank you for your excellent work!!! Somehow there are some alignments missed, I attached a file (Fang made it) for u so that u could follow the visual spec more easily :)
Attachment #8375367 - Flags: ui-review?(jhuang) → ui-review-
Flags: needinfo?(jhuang)
James, here's the file for u to reference.
I did the visual update from Fang's "Email Drawer-Adjustment 20140218.pdf" document, and put up a new zip file here:

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

No video, because still some small things to work out with Visual Design. Notes on the changes:

## message list:

"Last sync" styling:

I made it italic, and font will be default on system. None of the app css mentions Fira Sans directly, but if the device has it installed it will be used.

Also, I **did not** make the text bigger to 15px because some localizations, in particular German, cannot fit the localization in at that size, so I kept the size at the small default that it is now, 10px.

## Drawer

* Changed unselectable folder [Gmail] to same colors as others.

* Added 8px space between folder icon and folder name.

* folder icon is not completely left aligned because the image has some space around it. So a new graphic would be needed.

* The feedback pdf mentions a bigger settings icon, but I do not believe that was part of the visual design assets in the zip previously attached to this bug.

---

So I believe I need the following to complete the Visual Design review, from the Visual Design people:

* a trimmed folder icon that has the image cropped exactly to the folder outline.

* any new settings icon.

* hi res icons (@1.5/@2 sizes) for all the image assets that are new for this feature.

An alternative for the icons may be to use an icon font, as Miller did for this calendar pull request:

https://github.com/mozilla-b2g/gaia/pull/16319

but for that to work, the icons would need to be in SVG, then converted to the icon font. If that path was taken though, I would like to see Visual Design manage that icon font longer term. I can help with making a first pass though. 

However, if we need more time to work out that process, then I would be happy for now to just receive the hi res icons in png format for this pull request and work towards the icon font in the future.
Flags: needinfo?(fshih)
Comment on attachment 8375367 [details] [review]
GitHub pull request

I believe the last bits needed for UX/Visual Design signoff are some images, so starting tech review of the code. Confirmed with :asuth that he is willing to accept the start of tech review.

I will call out any code changes (expected to just be CSS now) that happen to land between now and final Visual images and tech review completion.
Attachment #8375367 - Flags: review?(bugmail)
Attached file GitHub pull request
(Accidentally deleted previous pull request, this is just a redo of what was already there)
---


The UX desire was to collapse folder_picker and account_picker into a drawer that slid down from under the header. This was accomplished by doing the following high level changes:

    account_picker logic was folded into folder_picker, and account_picker removed.

    The folder_picker is now an "immediate" card transition, but that card is initially transparent. The folder_picker then handles the transition of sliding down the folder list and fading in a background tap shield itself.

    The "last sync" time now shows up in the message_list card in the bottom toolbar. It is the last sync time for that folder.

    The main settings card now fades in on top of the folder_picker drawer.

    Clicking on an account takes the user directly to the inbox for that account.

Some changes to fix jshint errors, but mostly in folder_picker, in an effort to inch towards jshint compliance.

Existing marionette tests already exercise the folder_picker (choosing a folder, switching accounts, opening settings) so no new tests with this change, just modifications to get the existing tests to pass with these changes.
Attachment #8378001 - Flags: review?(bugmail)
Attachment #8375367 - Attachment is obsolete: true
Attachment #8375367 - Flags: ui-review-
Attachment #8375367 - Flags: review?(bugmail)
Hi James,

Thanks for all the updates, they look great! 

For "Last Sync" styling:
I am wondering can we try and see if a font size of 13px instead 15px would fit? 
Or if that's possible can we split the text into 2 lines to solve the localization issue? I'm just afraid that a font size of 10px is kind of hard to read. Let me know if that works for you : )


For the icon, I might provide hi res icons in png format for this pull request first, since the icon won't change various colors like Calendar. We might need more time to do the turning for icon font. 


File attached:
* The folder icon image had cropped exactly to the folder outline.
* Hi res icons (@1. 5 @2 @1 sizes) for all the image assets that included the new settings icon. 
* Last Sync proposal view
Flags: needinfo?(fshih)
Target Milestone: 1.4 S1 (14feb) → 1.4 S2 (28feb)
Attached image lastsync.png
I added the new icons to the app, and for the Last Sync issue:

I dynamically check if the localized name is more than half of the display area, and if so, I change the layout to be on two lines. Then I used a 13px size for the text for both layout branches.

The attached image shows the result. It shows three screen captures:

1) Last Sync in English. Since the label is less than half the display area, it is all on one line.
2) Last Sync with German label. Since the label is more than half the display area, the layout is changed to two lines.
3) Last Sync in English, if it was shown in the two line display.

I am a little uncomfortable about having this layout switch for a localization, as it is harder to maintain long term. However, the text at the default 10px size is really hard to read, and as screen 3 shows, I did not think it looked good to always use two lines for all localizations.

Fang, I assume you will prefer the dynamic layout change, so that is what I have coded, but you get the final say. I believe this should complete the Visual Design feedback that I know of so if you say it all looks good, then I will formally ask for a ui-review+ from Juwei to complete the full UX review.

I have updated the app zip that includes the new images as well as this Last Sync layout change, you can get it here:

http://jrburke.com/work/gaia/email-drawer-3.zip
Attachment #8379363 - Flags: feedback?(fshih)
Comment on attachment 8379363 [details]
lastsync.png

Hi James,
Thank you so much for the effort! They look great!!! :)
Attachment #8379363 - Flags: feedback?(fshih) → feedback+
Attached file toolbar_sync_icon.zip
Hi James, 
As I have commented on Calendar Drawer, please use the attached image for email sync icon in drawer.
Thanks
Target Milestone: 1.4 S2 (28feb) → ---
I just pushed a rebased version of the pull request to use latest gaia master code, and put up a new zip of the app:

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

No new functional changes, just uses latest master. This rebase was done to create a new zip file for some UX user testing.
Blocks: 950208
Target Milestone: --- → 2.0 S1 (9may)
See Also: → 940512
I just rebased against latest master, updated the pull request with that version, and generated a new app zip to try:

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

Still looks really sweet! Note this zip was generated for "low res" devices, like hamachi, so graphics may look blurry on hi-res devices, but that is just a build setting.

Flagging Juwei to get the UX all-clear to land this, and if so, I will ask for formal tech review to start (sorry :asuth for leaving this in r? while it was on hiatus!).

On UX all-clear, as we talked about in our weekly meeting, UX does not need to consider this "2.0 final" just "interaction and structure final", and any other visual or smaller structural adjustments can be done as part of follow-on 2.0 visual refresh bugs if they like.

I am happy to do changes before landing if they are known in the next day or two, but dev would like the structural changes in this pull request to land soon to make our test plumbing easier to improve as part of other 2.0 work.
Flags: needinfo?(jhuang)
Comment on attachment 8378001 [details] [review]
GitHub pull request

(Clearing review request until Juwei's sign-off happens.  I think my review was largely done, but I'll do another pass when requested.)
Attachment #8378001 - Flags: review?(bugmail)
Hi James, it looks good!I think it's great enough to land this patch now. And for minor adjustments we could do it later on visual refresh.
Flags: needinfo?(jhuang)
Comment on attachment 8378001 [details] [review]
GitHub pull request

With UX signoff and with a recent code change today for previous review comments, I rebased and squashed, and just pinging for final review pass.
Attachment #8378001 - Flags: review?(bugmail)
:peko - thank you for the images! 

I put them in for this calendar pull request, and I updated the Create Account link to be an Add Account button, this attached screenshot now shows how they look.

:peko - could I also get 1.5x, 2x and 2.25x versions of those graphics? Also, if the new redesign has "pressed" versions that are white, the full range of sizes for those too. 

Right now I am not using a "pressed" version of those images, so when a user taps, just the background blue color highlight is triggered. When I spot-checked some other existing images in calendar, they do not seem to have a "pressed" "white" state change so I expect they may not be part of the 2.0 refresh?
Flags: needinfo?(pchen)
Ugh, I typed this in the wrong bug, :peko, please ignore, sorry.
Flags: needinfo?(pchen)
Hi James,

Can you also replace the settings icon of email drawer? So it can be the same settings icon like the one on Calendar drawer! Thanks!
Attached image email-icons.png
:peko - these screen captures show how the new icons for refresh and settings from the calendar drawer look in email. 

The refresh one looks a bit out of place as the rest of that screen has not been updated to match the 2.0 visual styling, so for now, I am not going to include that icon update in this patch, but will use it for the 2.0 refresh work for email for the message list screen. I will keep the updated settings icon though in this patch.

I am open to other suggestions, and if you want other changes, we can even do that as a quick follow-on bug if the technical review for the current pull request is completed before we have those other changes.
Flags: needinfo?(pchen)
Comment on attachment 8378001 [details] [review]
GitHub pull request

r=asuth.  I pushed an trivial additional commit to your repository as a review comment.  I think the account splice things " > 1" account logic's if block encompasses too much, at least in the general hypothetical case.  I just changed it to use classList.toggle() to be an inline predicated thing and out-dented the rest of the code beneath it.  In practice because we reset the app whenever anything complicated account-related happens, this does not really matter, but we shouldn't depend on that.

Kudos on this extended development and rebasing-effort.  Ship ship ship!
Attachment #8378001 - Flags: review?(bugmail) → review+
Hi James,

thanks for your great work, only the setting icon need to be the same as calendar drawer.the refresh button on the other hand should not be changed and should keep it as the previous version toolbar_sync_icon on comment 31.
thank you so much.
Flags: needinfo?(pchen)
feature-b2g: --- → 2.0
Merged to gaia master:
https://github.com/mozilla-b2g/gaia/commit/ba392f56d00698e6b3f3463489ecd4c28c6fe74f

from pull request:
https://github.com/mozilla-b2g/gaia/pull/16433
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Same question I asked in bug 940512. Did you really want to remove the trailing space in senders-separation-sign or that's just the editor trimming whitespaces? If that's the case, I'd suggest to replace them with \u0020
Filed a follow on bug that I will fix immediately for the whitespace issue: bug 1007845.
(In reply to Francesco Lodolo [:flod] from comment #45)
> Same question I asked in bug 940512. Did you really want to remove the
> trailing space in senders-separation-sign or that's just the editor trimming
> whitespaces? If that's the case, I'd suggest to replace them with \u0020

Super-duper-thank you on noticing this so quickly and providing us with a process improvement that avoids us foot-gunning ourselves like this in the future!
[Environment]
Gaia      c1a8cbaac1d921cfb50e3a2600720b75cf5afabd
Gecko     https://hg.mozilla.org/mozilla-central/rev/20ca234fd62b
BuildID   20140511160202
Version   32.0a1
ro.build.version.incremental=324
ro.build.date=Thu Dec 19 14:04:55 CST 2013

[Result]
PASS
Status: RESOLVED → VERIFIED
Flags: in-moztrap+
Mass modify - set status-b2g-v2.0 fixed for fixed bugs under vertical homescreen dependency tree.
blocking-b2g: backlog → ---
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: