Closed Bug 940512 Opened 8 years ago Closed 8 years ago

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


(Firefox OS Graveyard :: Gaia::Calendar, defect)

Not set


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

2.0 S2 (23may)
feature-b2g 2.0
tracking-b2g backlog
Tracking Status
b2g18 28+ ---
b2g-v2.0 --- fixed


(Reporter: jrburke, Assigned: jrburke)



(Keywords: feature, Whiteboard: [ucid:ProductivityXX 1.4:p2 ft:productivity][p=13])


(9 files)

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):

This bug is for the calendar changes.
Related email bug is bug 940132
The current UX spec is under this link:

Go to "Visual Design", then select the FFOS_1.3_VsD_Refresh_Drawers.pdf link and download it.
I did a first pass at this, it is *very* rough, but meant to start the feedback process with UX.

App Zip:

Install the app zip using these steps:

Notable issues:

* I broke the Week, Day tab transitions
* Before, after adding an account, the settings would stay on screen as they account synced. This does not work so well now that the settings overlaps the status bar. So I think I should just hide the settings when I close it.
* The fade in animation for the background is choppier when viewing on the phone, instead of in the simulator. The simulator was used to make the movie.
* I moved the Add Account into the advanced settings area as per UX wishes.
* I need a sync icon, just forgot to grab it from the box link above.
* There are some small glitches here and there.

Next steps:

1) review in person with UX tomorrow, and clean up the edges.

2) if :gaye or :lightsofapollo want to give an early pass at a review, the compare is here:

This is my first foray into the calendar code, so please be stringent on nits and such, as I am still learning its style and layout.
Not blocking but we are targeting this for 1.3.
Keywords: feature
Whiteboard: [1.3:p2]
No longer targeting for 1.3. We'll do this for 1.4.
Whiteboard: [1.3:p2] → [1.4:p2]
Whiteboard: [1.4:p2] → [ucid:ProductivityXX 1.4:p2 ft:productivity]
Target Milestone: --- → 1.3 C2/1.4 S2(17jan)
blocking-b2g: --- → backlog
UX spec updated for drawer in Calendar.
1. Add calendar account move into settings
2. Setting & Sync button will not have text
3. Sync button will rotate when syncing
4. No need to display sync info in calendar
Whiteboard: [ucid:ProductivityXX 1.4:p2 ft:productivity] → [ucid:ProductivityXX 1.4:p2 ft:productivity][p=13]
Target Milestone: 1.3 C2/1.4 S2(17jan) → 1.3 C3/1.4 S3(31jan)
Target Milestone: 1.3 C3/1.4 S3(31jan) → 1.4 S1 (14feb)
The following is a first pass at the calendar drawer. There are still some rough edges around card transition to sort out, but it shows the basic design.

Here is a video without an account configured, shown on desktop:

Here is a video of the calendar on the device, with a google account configured:

The contrast on the device video is bad, so that the bottom, shaded part below the drawer looks black in the video, but it is actually the correct .6 opacity shade when looking with your eyes.

Here is a zip file of the email with the current state of the drawer:

and I am doing the work in this branch:

Things left to do:

* When I get the larger Settings icon for the email drawer, I will use that in this drawer.

* Visual design in general probably would like to see some small changes to alignment. Happy to hear about them.

* On the dev side: the first load of the card looks a bit odd to me, and I think it is a result of how calendar does the delayed loading of the cards, so need to look into that more. I am still learning that part.

* Related dev item: the way the advanced settings and add account cards show up seem to trigger a temporary flash of the default calendar card.

So any pointers from dev folks on what I might be missing on the dev side, and UX/VD guidance for the other items is appreciated.
1.4 drawer visual spec updated.
please have a look.
Target Milestone: 1.4 S1 (14feb) → 1.4 S2 (28feb)
I have updated the branch with the following changes:

* drawer sizes to fit number of calendars, with a minimum and maximum height.
* should incorporate changes from pchen's Visual Refresh spec.
* no more flashes on first load of drawer, or when transitioning in advanced settings.

Try it out here:

So I think it is feeling and looking pretty good.

Some outstanding items:

* we probably need hires versions of the graphics, mainly the checkmark
* The settings icon may need a refresh? Perhaps for email too, as I took that one from the latest batch I got for the email drawer. But not sure yet if it is right.
* The sync graphic may also be an old one (something that may need to be updated for email too?)

Asking Harly for feeback/review to see if this looks good enough to continue on to technical review.
Flags: needinfo?(hhsu)
Attached image icon_refresh.png
updated refresh icon, please replace this one.
thank you
Awesome work!! 
The only feedback I have is Month/Week/Day tab highlight will disappear when opening drawer, and will reappear when closing drawer. Other than that, everything looks fine to me.

And after an offline discussion with Peko, here are the replies to the items:
* We will stick with the checkmark right now, no need for a new version
* Please use the same updated settings icon as email drawer
* Peko has uploaded the sync icon which email will need to be updated, but in different color(Toolbar & drawer use different color for button)
Flags: needinfo?(hhsu)
Target Milestone: 1.4 S2 (28feb) → ---
See Also: → 940132
Target Milestone: --- → 2.0 S1 (9may)
Blocks: 950209
blocking-b2g: backlog → 2.0+
This shouldn't block - this is a feature, which is something we won't block on unless we're past FL & we're planning to still land the feature.
blocking-b2g: 2.0+ → backlog
I have rebased/squashed against latest master, and created a new zip file (for low-res devices like hamachi):

Flagging Harly for UX sign-off, and if it still meshes in with the 2.0 plans. I fixed the blue highlight under the month/week/day tab to go away when the settings come up.

As with bug 940132, UX does not need to consider this "2.0 final" just "interaction and structure final", and good to land on master, and any other visual or smaller structural adjustments can be done as part of follow-on 2.0 visual refresh bugs if they like.

Also flagging Gareth and Miller on the dev side to make sure the changes will compose well with the 2.0 visual refresh work they are doing in Calendar. Looks like I need to update some of the test helpers, but the general code changes are ready for feedback.

The current branch code:
Flags: needinfo?(mmedeiros)
Flags: needinfo?(hhsu)
Flags: needinfo?(gaye)
Hi James, I tweaked my day view visual refresh branch to reduce conflicts, it should not cause too much trouble. The ideal scenario would be for this to land before the day view patch (next week). Otherwise you will need to update your patch (just a few lines of code).
Flags: needinfo?(mmedeiros)
Attached file GitHub pull request
After discussion about landing in weekly status meeting, UX gave the OK for landing this, and Gareth offered to review to try to have it land before the other visual refresh work, so starting formal dev review.

I had some trouble getting the marionette caldav test properly working even with changes, seems to fail on the caldav account entry view with an error. Not sure what is causing that yet, so tips are welcome. I hope to close that out though tomorrow.
Attachment #8417863 - Flags: review?(gaye)
Flags: needinfo?(hhsu)
Flags: needinfo?(gaye)
Hi James,
Just some quick suggestions after testing out the patch:
1. When drawer shows up, the blue highlight on current tab view(Month/Week/Day) will disappear which is not expected, the blue highlight should stay as the drawer is just an overlay on top of the current view.
2. The size of refresh icon & settings icon are still not the same
Hi Harly, thanks for the feedback:

1. I just pushed a change to maintain the color and tab highlight for Month/Week/Day.

2. Looks like I will need help from Visual Design on a properly sized settings icon. I do not seem to have one that matches the 31x31 sized refresh icon. That or a different refresh png is needed. 

So I will needinfo :peko for guidance. However, if I get technical review completed before hearing back, I will likely try to just land this set of changes then do a quick follow-on bug to update the icons, as the longer we wait to land larger code structure changes in this ticket, the more that affects landing of the other 2.0 visual redesign work.
Flags: needinfo?(pchen)
Comment on attachment 8417863 [details] [review]
GitHub pull request

Hey jrburke! This looks really good and sane :). I did a first pass, have a few nits, but no major code objections. I don't like that the plus button turned into a "Create Account" label in the accounts list which is stylistically indistinguishable from the account names though. Could we use a button instead Harly?
Attachment #8417863 - Flags: review?(gaye)
This is the button question :gaye is talking about: should "Create Account" on this screen be a button or just the text as shown in this graphic? Flagging harly for feedback, apologies if this is more of a Visual Design group question, happy to have an answer from anyone on the UX/VX side.
Flags: needinfo?(hhsu)
Attached file drawer
Hi James,

Please replace both setting and refresh icon and also the setting icon of email drawer should also change to this one.
Flags: needinfo?(pchen)
Yes, I agree with Gareth that it's hard to distinguish from account name & add new account. I would say for consistency, calendar should follow Email, and use a button with "Add Account" at the center.
Flags: needinfo?(hhsu)
Hi James,

I also upload drawer icon for different resolution.
including 1.5x, 2x and svg format.
please see the attachment.

:peko - thank you for the images, I put the regular and 1.5x and 2x ones in the pull request for calendar. For email, we also have some 2.25x assets in there, not sure if those are needed going forward, but if so, feel free to pass them to me.

I did not include the .svg ones yet though because SVG images still have some performance problems, and they are not in wide use yet.

Also, if the new redesign has "pressed" versions that are white, feel free to pass those to me.

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" version of those images, so at least right now these new icons are consistent with those existing icons in calendar.

:peko, if no 2.25x or pressed-state images are needed, feel free to just turn off the needinfo flag without comment.

I also updated the Create Account link to be an Add Account button, this attached screenshot now shows how the buttons and that Add Account button look.
Flags: needinfo?(pchen)
Attached file drawer
Thank you James for making the modifications so fast, you are the best!
the 2.25x icons are use for Madai and Madai is using 1.4. Therefore, for 2.0, there is no need for 2.25x icon right now.

And thanks for your remind, please check attached file for pressed icon.
Flags: needinfo?(pchen)
Comment on attachment 8417863 [details] [review]
GitHub pull request

I just added the pressed icon states the the pull requests, and with that, I believe all UX/dev feedback to date on the pull request has been addressed, so asking for another dev review pass.

:gaye, I left the separate feedback passes as separate commits if that helps do a diff-based review, but I will squash them before final landing. I commented in the github pull request comments if additional context on the individual changes are needed.

Here is an app zip of the latest code (generated for a hamachi-class resolution), for people that want to try the latest code without fetching the source:
Attachment #8417863 - Flags: review?(gaye)
Hi James, brilliant work, the visual icon looks great and is exactly what we want. BTW, I just found out that when the drawer is down, you are still able to scroll up and down the month/week/day contents underneath the drawer. Could you have a look at this? Thanks
Flags: needinfo?(jrburke)
Comment on attachment 8417863 [details] [review]
GitHub pull request

Very nice work jrburke! r=me
Attachment #8417863 - Flags: review?(gaye) → review+
feature-b2g: --- → 2.0
(In reply to Harly Hsu from comment #26)
> Hi James, brilliant work, the visual icon looks great and is exactly what we
> want. BTW, I just found out that when the drawer is down, you are still able
> to scroll up and down the month/week/day contents underneath the drawer.
> Could you have a look at this? Thanks

Good find! This appears to be an APZC bug. I filed bug 1007735 to track that fix separately, we'll need some gecko people to help fix that one.
Flags: needinfo?(jrburke)
Merged to gaia master:

from pull request:
Closed: 8 years ago
Resolution: --- → FIXED
Just to be sure that's wanted and not just the editor clearing trailing spaces


You removed empty trailing spaces from these 2 strings.
Flags: needinfo?(jrburke)
Filed a follow on bug that I will fix immediately for the whitespace issue: bug 1007845.
Flags: needinfo?(jrburke)
Gaia      c1a8cbaac1d921cfb50e3a2600720b75cf5afabd
BuildID   20140511160202
Version   32.0a1 Dec 19 14:04:55 CST 2013

Target Milestone: 2.0 S1 (9may) → 2.0 S2 (23may)
Flags: in-moztrap+
See Also: → 1015657
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.