Page MenuHomePhabricator

Notification for hamburger and tipsy in menu to call out collections
Closed, ResolvedPublic5 Estimated Story Points

Assigned To
Authored By
KHammerstein
Jun 3 2015, 12:37 AM
Referenced Files
F187945: hamburger-menu.svg
Jul 1 2015, 12:17 AM
F187943: Screen Shot 2015-06-30 at 4.25.52 PM.png
Jun 30 2015, 11:26 PM
F187916: menu-tipsy-01.png
Jun 30 2015, 7:55 PM
F187915: hamburger-notif-01.png
Jun 30 2015, 7:55 PM
F186110: Screen Shot 2015-06-29 at 5.52.00 PM.png
Jun 30 2015, 12:53 AM
F173484: menu-tipsy-01.png
Jun 3 2015, 12:59 AM
F173466: hamburger-menu.svg
Jun 3 2015, 12:37 AM
F173460: menu-tipsy-01.png
Jun 3 2015, 12:37 AM

Description

When a user comes to a mobile web article they see a notification dot on the left hamburger menu. When they click on the hamburger menu they get a tipsy giving them more information about collections.

The green dot will show on every page view until the user opens the hamburger menu.

The tipsy will only show the first time they open the hamburger menu, and disappear when they close the hamburger menu, dismiss it or click on a menu item.

Ideal: it will not show when a user has just created a collection (aka the tipsy pointing to hamburger menu is active and it says 'new' next to collections)

prototype http://invis.io/C635S61Q4

hamburger-notif-01.png (1×641 px, 159 KB)

menu-tipsy-01.png (1×641 px, 167 KB)

This will update our hamburger menu icon. Attached the svgs - let me know if they work.

Don't show bottom toast confirmations when top overlay is showing. Bottom one only shows when article is added to or removed from existing collection.

Event Timeline

KHammerstein raised the priority of this task from to Needs Triage.
KHammerstein updated the task description. (Show Details)
KHammerstein subscribed.
KHammerstein updated the task description. (Show Details)
KHammerstein updated the task description. (Show Details)
KHammerstein added a subscriber: JKatzWMF.

@KHammerstein probably need a dismiss button "got it" or otherwise.

@phuedx @Jdlrobson I think this should go in next sprint as part of browse.

kaldari updated the task description. (Show Details)

Change 221299 had a related patch set uploaded (by Jdlrobson):
WIP: Show a sexy green pointer when there's something new in the menu

https://gerrit.wikimedia.org/r/221299

@Jdlrobson Lets chat about the icons - want to make sure they are the correct kinda asset.

@KHammerstein I also need some clarifications. Would be good to talk about this tomorrow.

  1. Are we applying this new green design with close icon to all of the pointers we use?
  2. Should I get read of the old pointer (see illustration with both pointers)

Screen Shot 2015-06-29 at 5.52.00 PM.png (390×1 px, 61 KB)

I'm adding to code review column since there are some patches that need to be merged to support this change.

@Jdlrobson

  1. No just use regular blue background.
  2. Yes, only show 1 pointer at a time.

Also the menu pointer should be constrained to the width of the menu.

@Jdlrobson: Given that your main patch (221299) is a WIP, did you mean to move this into code review? Are you looking for early review?

All of these need review to unblock this work:
https://gerrit.wikimedia.org/r/#/c/221806/
https://gerrit.wikimedia.org/r/#/c/221807/
https://gerrit.wikimedia.org/r/221297

Talked to Kaity. She said she will update the mock. We will update the blue background, dot will be blue, not use a close icon (just use default cancel link maybe change text to dismiss)

When clicking main menu the add to collection overlay (that points to the star) will disappear.

@Jdlrobson: Thanks for the links. Could you add 221806 and 221297 as dependencies to 221299 as they block it and they aren't in the dependency chain?

@Jdlrobson

Updated mocks to show:

  • Blue dot on hamburger icon
  • Blue background on pointer
  • Pointer should be constrained to the width of the menu
  • X icon removed, button should read "Dismiss"

Change 222031 had a related patch set uploaded (by Jdlrobson):
Advertise the collections feature

https://gerrit.wikimedia.org/r/222031

@Jdlrobson Updated icon as we discussed

@Jdlrobson Ping me when you get to this tomorrow, we'll work on it in person to make sure the dot is correct.

Change 221299 merged by jenkins-bot:
Provide infrastructure to allow showing a pointer when there's something new in the menu

https://gerrit.wikimedia.org/r/221299

Most of the patches have been merged. Some are -1'ed by Barry.

Change 222214 had a related patch set uploaded (by Jdlrobson):
Tweaks to the blue dot courtesy of kaity

https://gerrit.wikimedia.org/r/222214

One new patch after reviewing with Kaity: https://gerrit.wikimedia.org/r/222214

If someone could also merge https://gerrit.wikimedia.org/r/222213 - we can get our icons to the right size - 24px - it seems right now they are all 23.5px :)

I've left a comment about the main patch, and merged the other two. The follow-up patch on main menu needs some attention too.

Change 222214 merged by jenkins-bot:
Tweaks to the blue dot courtesy of kaity

https://gerrit.wikimedia.org/r/222214

Change 222031 merged by jenkins-bot:
Advertise the collections feature

https://gerrit.wikimedia.org/r/222031