Page MenuHomePhabricator

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

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

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 updated the task description. (Show Details)
KHammerstein raised the priority of this task from to Needs Triage.
KHammerstein added a subscriber: KHammerstein.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 3 2015, 12:37 AM
KHammerstein updated the task description. (Show Details)
KHammerstein updated the task description. (Show Details)
KHammerstein added a subscriber: JKatzWMF.
JKatzWMF updated the task description. (Show Details)Jun 3 2015, 12:54 AM

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

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

KLans_WMF edited a custom field.Jun 3 2015, 6:25 PM
kaldari updated the task description. (Show Details)Jun 8 2015, 4:37 PM
kaldari updated the task description. (Show Details)
JKatzWMF updated the task description. (Show Details)Jun 8 2015, 4:41 PM
Jdlrobson claimed this task.

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)

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?

Missed the last bit. Mibad.

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

All patches are now ready for review in this order:

https://gerrit.wikimedia.org/r/221807
https://gerrit.wikimedia.org/r/221297
https://gerrit.wikimedia.org/r/222018
https://gerrit.wikimedia.org/r/221299
https://gerrit.wikimedia.org/r/222031

@KHammerstein the hamburger icon asset is no good. it's not vertically nor centrally aligned. @violetto can advise on how to generate appropriate icons... I feel deja vu..:

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

Just https://gerrit.wikimedia.org/r/#/c/222031/ needs merging now. See my comment there on your -1 and the follow up https://gerrit.wikimedia.org/r/222191

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.

Restricted Application added a subscriber: Luke081515. · View Herald TranscriptJul 2 2015, 10:48 AM

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

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

Please always check dependencies first before reviewing.
See https://gerrit.wikimedia.org/r/#/c/222357/

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

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

phuedx closed this task as Resolved.Jul 3 2015, 10:45 AM

Verified on BC.