828980 - Add tooltip to calendar app to hint users how to navigate between dates.

Status: RESOLVED FIXED

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

Description

[Casey Yee]

When first arriving to calendar app, it is unclear to the user that you can swipe to move between calendar dates.   We should provide some kind of tool tip instruction to the user.

The tool tip should show once when calendar first loads and should be displayed for 3 seconds before disappearing.   The user should be able to dismiss the tool-tip by tapping on it.

Victoria: It seems that the only place where we have tool-tips are in the e.me app.  I quickly mocked up the tool-tip screen following the same style.

Comment 1

[Casey Yee]

Attachment: Calendar tool-tip

Comment 2

[Patryk Adamczyk [:patryk] UX]

^ Please ignore the visual design, there are a few things wrong with it.
1. Does match our visual design.
2. Text is center aligned should be left aligned / right ragged
3. Text is too small should 19px

The tooltip might benefit form left and right arrow graphics to hint at the gesture interaction.

Comment 3

[smithan]

Attachment: calendar tool tip hint screenshot

The tooltip to hint users is added. Please see the attached screenshot and verify from the following branch details.

https://github.com/rebin/gaia/tree/bug-828980
https://github.com/rebin/gaia/commit/9e5d00a071f858f83e6e3cba57d8865e17cb1838
https://github.com/rebin/gaia/commit/4b83641a7e479fe82a681436200ca415b864605f

Comment 4

[Casey Yee]

We are waiting for the final visual design from Patryk and Vicky.

Please don't land this until the final visual design in place.

Comment 5

[James Lal [:lightsofapollo]]

Note- the above patch is r-'ed we don't have patch here and while its very simple we won't implement anything until visuals are complete.

Comment 6

[Victoria Gerchinhoren [:vicky]]

Peter will provide the visual

Comment 7

[Victoria Gerchinhoren [:vicky]]

Attachment: Calendar tooltip visual mockup

Comment 8

[Victoria Gerchinhoren [:vicky]]

Provided visual mockup for the tooltip.

Comment 9

[Victoria Gerchinhoren [:vicky]]

Attachment: Illustration asset and screen measurments to implement right layout

I provide the ilustration asset and a screen detailing the measurments to implement it. The type size and style, height of the overlay and margins.

Comment 10

[smithan]

Attachment: New design implemented - https://github.com/mozilla-b2g/gaia/pull/7682

We have implemented the updated design to the hint message for the calendar.
Please see the screenshot for the current implementation.

But the font specified (Moz TT Regular 7pt & Moz TT Light 9pt) is not available in the web. Could you please post the font files, if the same is available so that we will integrate the same and commit the branch for review.

Comment 11

[Victoria Gerchinhoren [:vicky]]

(In reply to smithan from comment #10)
> Created attachment 703268 [details]
> new design implemented screenshot
> 
> We have implemented the updated design to the hint message for the calendar.
> Please see the screenshot for the current implementation.
> 
> But the font specified (Moz TT Regular 7pt & Moz TT Light 9pt) is not
> available in the web. Could you please post the font files, if the same is
> available so that we will integrate the same and commit the branch for
> review.

Implementation looks good. The font is the one being used for the whole OS, so you should have it in the system resources.

Comment 12

[smithan]

(In reply to Victoria Gerchinhoren from comment #11)
> (In reply to smithan from comment #10)
> > Created attachment 703268 [details]
> > new design implemented screenshot
> > 
> > We have implemented the updated design to the hint message for the calendar.
> > Please see the screenshot for the current implementation.
> > 
> > But the font specified (Moz TT Regular 7pt & Moz TT Light 9pt) is not
> > available in the web. Could you please post the font files, if the same is
> > available so that we will integrate the same and commit the branch for
> > review.
> 
> Implementation looks good. The font is the one being used for the whole OS,
> so you should have it in the system resources.

We have added the font as specified and pushed the branch to github.
https://github.com/mozilla-b2g/gaia/pull/7682

Please test.

Comment 13

[Peter La]

Visual provided.  Commenting to clear needinfo flag.

Comment 14

[Kevin Grandon :kgrandon]

Comment on attachment 703268 [details]
New design implemented - https://github.com/mozilla-b2g/gaia/pull/7682

Clearing review flag as this is not a pull request/patch. The patch also needs some work, and I'm not sure what the current progress is yet.

Comment 15

[Aus Lacroix [:aus]]

Victoria, 

Unfortunately we now require all graphical assets to have retina display compatible versions (e.g. @2x). Could you generate a new "swipe_left.png" @2x? It's the only thing I'm missing to submit my pull-request for this bug.

Comment 16

[Victoria Gerchinhoren [:vicky]]

Hi Ghislain,
This assets were provided by Peter, so I am asking here for need info?

Thanks!

Comment 17

[Victoria Gerchinhoren [:vicky]]

Hi Ghislain,
This assets were provided by Peter, so I am asking here for need info?

Thanks!

Comment 18

[Aus Lacroix [:aus]]

Fixed with PR 10353 -- https://github.com/mozilla-b2g/gaia/pull/10353

Comment 19

[Aus Lacroix [:aus]]

Attachment: Pull Request v1

Comment 20

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Comment on attachment 762266 [details] [review]
Pull Request v1

lint error.
https://travis-ci.org/mozilla-b2g/gaia/builds/8180574

Comment 21

[Peter La]

Attachment: [e-mail]

Attached is the @2x version of the swipe_left.png image.

Comment 22

[Aus Lacroix [:aus]]

Attachment: Pull Request - v2 - Migrate to view, add unit tests.

Comment 23

[Gareth Aye [:gaye] (back from PTO)]

Landed on master: a8252a4a096431ca7f39b0ce9307957945f77075