James Burke [:jrburke] Assignee
	Description • 11 years ago

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

This bug is for the calendar changes.

	James Burke [:jrburke] Assignee
	Comment 1 • 11 years ago

Related email bug is bug 940132

	James Burke [:jrburke] Assignee
	Comment 2 • 11 years ago

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.

	James Burke [:jrburke] Assignee
	Comment 3 • 11 years ago

I did a first pass at this, it is *very* rough, but meant to start the feedback process with UX.

Movie: http://jrburke.com/temp/cal-drawery-1.mov
App Zip: http://jrburke.com/temp/cal-drawery-1.zip

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

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:

https://github.com/jrburke/gaia/compare/bug940512-calendar-drawer

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.

	Dylan Oliver [:doliver]
	Comment 4 • 11 years ago

Not blocking but we are targeting this for 1.3.

	Dylan Oliver [:doliver]
	Comment 5 • 11 years ago

No longer targeting for 1.3. We'll do this for 1.4.

	Harly Hsu[:harly]
	Comment 6 • 10 years ago

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

	James Burke [:jrburke] Assignee
	Comment 7 • 10 years ago

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:

http://jrburke.com/work/gaia/calendar-drawer-noaccount.mov

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

http://jrburke.com/work/gaia/calendar-drawer-account.mov

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:

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

and I am doing the work in this branch:

https://github.com/jrburke/gaia/compare/bug940512-calendar-drawer-new

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.

	Peko Chen [:pekochen]
	Comment 8 • 10 years ago

1.4 drawer visual spec updated.
please have a look.

	James Burke [:jrburke] Assignee
	Comment 9 • 10 years ago

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:

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

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.

	Peko Chen [:pekochen]
	Comment 10 • 10 years ago

updated refresh icon, please replace this one.
thank you

	Harly Hsu[:harly]
	Comment 11 • 10 years ago

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)

	Jason Smith [:jsmith]
	Comment 12 • 10 years ago

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.

	James Burke [:jrburke] Assignee
	Comment 13 • 10 years ago

I have rebased/squashed against latest master, and created a new zip file (for low-res devices like hamachi):

http://jrburke.com/work/gaia/calendar-drawer-3.zip

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:

https://github.com/jrburke/gaia/compare/bug940512-calendar-drawer-new

	Miller Medeiros [:millermedeiros]
	Comment 14 • 10 years ago

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

	James Burke [:jrburke] Assignee
	Comment 15 • 10 years ago

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.

	Harly Hsu[:harly]
	Comment 16 • 10 years ago

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

	James Burke [:jrburke] Assignee
	Comment 17 • 10 years ago

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.

	Gareth Aye [:gaye] (back from PTO)
	Comment 18 • 10 years ago

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?

	James Burke [:jrburke] Assignee
	Comment 19 • 10 years ago

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.

	Peko Chen [:pekochen]
	Comment 20 • 10 years ago

Hi James,

Please replace both setting and refresh icon and also the setting icon of email drawer should also change to this one.

	Harly Hsu[:harly]
	Comment 21 • 10 years ago

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.

	Peko Chen [:pekochen]
	Comment 22 • 10 years ago

Hi James,

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

Peko

	James Burke [:jrburke] Assignee
	Comment 23 • 10 years ago

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

	Peko Chen [:pekochen]
	Comment 24 • 10 years ago

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.

	James Burke [:jrburke] Assignee
	Comment 25 • 10 years ago

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:

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

	Harly Hsu[:harly]
	Comment 26 • 10 years ago

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

	Gareth Aye [:gaye] (back from PTO)
	Comment 27 • 10 years ago

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

Very nice work jrburke! r=me

	James Burke [:jrburke] Assignee
	Comment 28 • 10 years ago

(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.

	James Burke [:jrburke] Assignee
	Comment 29 • 10 years ago

Merged to gaia master:
https://github.com/mozilla-b2g/gaia/commit/4bc4980faa7ac22c70031b040880223246d41f31

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

	Francesco Lodolo [:flod]
	Comment 30 • 10 years ago

Just to be sure that's wanted and not just the editor clearing trailing spaces

-from-time=From: 
-to-time=To: 
+from-time=From:
+to-time=To:

You removed empty trailing spaces from these 2 strings.

	James Burke [:jrburke] Assignee
	Comment 31 • 10 years ago

Filed a follow on bug that I will fix immediately for the whitespace issue: bug 1007845.

	Edward Chen[:edchen]
	Comment 32 • 10 years ago

[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

	Kevin Grandon :kgrandon
	Comment 33 • 10 years ago

Mass modify - set status-b2g-v2.0 fixed for fixed bugs under vertical homescreen dependency tree.