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

Assigned To

Authored By

	• KHammerstein
	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)

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

hamburger-menu.svg1 KBDownload

hamburger-menu-notification.svg1 KBDownload

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.

Details

Subject	Repo	Branch	Lines +/-
Advertise the collections feature	mediawiki/extensions/Gather	master	+37 -13
Tweaks to the blue dot courtesy of kaity	mediawiki/extensions/MobileFrontend	master	+3 -3
Provide infrastructure to allow showing a pointer when there's something new in the menu	mediawiki/extensions/MobileFrontend	master	+81 -7

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	Jdlrobson	T101201 Notification for hamburger and tipsy in menu to call out collections
Resolved	Jdlrobson	T96222 Add a new public collection feed view
Resolved	Tgr	T97061 API: Allow filtering of collections
Resolved	Tgr	T101460 Add gather_list.gl_item_count
Resolved	Jdlrobson	T102188 Add 'Active' and 'My collections' tabs to tab between active and my collections
Resolved	• Jhernandez	T102983 Infinite scrolling on collections list broken (user collections vs active collections)
Resolved	Tgr	T102573 Gather lists API lstminitem gives wrong results because gl_item_count drifts away from actual item count

Event Timeline

• KHammerstein created this task.Jun 3 2015, 12:37 AM

• KHammerstein raised the priority of this task from to Needs Triage.

• KHammerstein updated the task description. (Show Details)

• KHammerstein added projects: Gather, Web-Team-Backlog.

• KHammerstein subscribed.

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 3 2015, 12:37 AM

• KHammerstein set Security to None.Jun 3 2015, 12:37 AM

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

• JKatzWMF added a project: Mobile-Web-Sprint-49-Wayne's-World.Jun 3 2015, 12:56 AM

• KHammerstein updated the task description. (Show Details)Jun 3 2015, 12:59 AM

• KLans_WMF moved this task from Incoming to 2015-16 Q3 on the Web-Team-Backlog board.Jun 3 2015, 5:07 PM

• JKatzWMF added a subtask: T96222: Add a new public collection feed view.Jun 3 2015, 6:16 PM

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

• KHammerstein updated the task description. (Show Details)Jun 8 2015, 4:39 PM

• JKatzWMF updated the task description. (Show Details)Jun 8 2015, 4:41 PM

• KLans_WMF moved this task from Needs Analysis to To Do on the Mobile-Web-Sprint-49-Wayne's-World board.Jun 8 2015, 4:41 PM

Jdlrobson updated the task description. (Show Details)Jun 8 2015, 9:15 PM

Jdlrobson merged a task: T99904: Don't show toast or drawer on new collection creation (when overlay is triggered).

Jdlrobson moved this task from Needs triage to This Sprint on the Gather board.Jun 10 2015, 3:19 PM

• KLans_WMF moved this task from 2015-16 Q3 to Old Unorganized Resolved Tasks on the Web-Team-Backlog board.Jun 17 2015, 5:55 PM

• KLans_WMF removed a project: Mobile-Web-Sprint-49-Wayne's-World.Jun 22 2015, 4:05 PM

• KLans_WMF moved this task from Old Unorganized Resolved Tasks to 2015-16 Q3 on the Web-Team-Backlog board.

• JKatzWMF closed subtask T96222: Add a new public collection feed view as Resolved.Jun 22 2015, 4:48 PM

Jdlrobson added a project: Reading-Web-Sprint-50-The-X-Files.Jun 22 2015, 5:06 PM

Jdlrobson moved this task from Needs Analysis to To Do on the Reading-Web-Sprint-50-The-X-Files board.

Jdlrobson moved this task from 2015-16 Q3 to Old Unorganized Resolved Tasks on the Web-Team-Backlog board.Jun 25 2015, 9:53 PM

Jdlrobson claimed this task.Jun 26 2015, 6:10 PM

Jdlrobson moved this task from To Do to Doing on the Reading-Web-Sprint-50-The-X-Files board.

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

gerritbot added a project: Patch-For-Review.Jun 26 2015, 10:04 PM

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

Are we applying this new green design with close icon to all of the pointers we use?
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 moved this task from Doing to Code Review on the Reading-Web-Sprint-50-The-X-Files board.Jun 30 2015, 12:53 AM

@Jdlrobson

No just use regular blue background.
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?

Yup see https://phabricator.wikimedia.org/T101201#1412437

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?

221297 is currently V: -2.

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

Jdlrobson moved this task from -1 (Needs More Work) to Code Review on the Reading-Web-Sprint-50-The-X-Files board.Jun 30 2015, 10:12 PM

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

Screen Shot 2015-06-30 at 4.25.52 PM.png (53×77 px, 4 KB)

@Jdlrobson Updated icon as we discussed

hamburger-menu.svg764 BDownload

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

221807 is C: -1.

phuedx moved this task from Code Review to -1 (Needs More Work) on the Reading-Web-Sprint-50-The-X-Files board.Jul 1 2015, 1:57 PM

Jdlrobson moved this task from -1 (Needs More Work) to Code Review on the Reading-Web-Sprint-50-The-X-Files board.Jul 1 2015, 5:24 PM

Looks good @KHammerstein patch here -> https://gerrit.wikimedia.org/r/222150

Just these outstanding patches to review:
https://gerrit.wikimedia.org/r/#/c/221299/
https://gerrit.wikimedia.org/r/222150
https://gerrit.wikimedia.org/r/#/c/222031/

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

• Konfused-Kitten mentioned this in rEMFR768077d3da7e: Provide infrastructure to allow showing a pointer when there's something new….Jul 1 2015, 9:25 PM

Diffusion mentioned this in rMEXTe66e0c85afd8: Updated mediawiki/extensions Project: mediawiki/extensions/MobileFrontend….Jul 1 2015, 9:25 PM

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

• Forrestbot added a project: WMF-deploy-2015-07-07_(1.26wmf13).Jul 1 2015, 10:00 PM

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

• Jhernandez removed a project: Web-Team-Backlog.Jul 2 2015, 9:51 AM

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

• bmansurov moved this task from Code Review to -1 (Needs More Work) on the Reading-Web-Sprint-50-The-X-Files board.Jul 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

• Konfused-Kitten mentioned this in rEMFR13114cc34cae: Tweaks to the blue dot courtesy of kaity.Jul 2 2015, 10:50 AM

• Konfused-Kitten mentioned this in rMEXT534abda27200: Updated mediawiki/extensions Project: mediawiki/extensions/MobileFrontend….

Jdlrobson moved this task from -1 (Needs More Work) to Code Review on the Reading-Web-Sprint-50-The-X-Files board.Jul 2 2015, 6:00 PM

• bmansurov moved this task from Code Review to -1 (Needs More Work) on the Reading-Web-Sprint-50-The-X-Files board.Jul 2 2015, 6:53 PM

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

• bmansurov moved this task from Code Review to Ready for Signoff on the Reading-Web-Sprint-50-The-X-Files board.Jul 2 2015, 7:04 PM

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

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

• Konfused-Kitten mentioned this in rEGAT18ddf3b757e7: Advertise the collections feature.Jul 2 2015, 7:06 PM

Diffusion mentioned this in rMEXT113fb7250139: Updated mediawiki/extensions Project: mediawiki/extensions/Gather….Jul 2 2015, 7:06 PM

Verified on BC.

phuedx moved this task from Ready for Signoff to Done on the Reading-Web-Sprint-50-The-X-Files board.Jul 3 2015, 10:45 AM

phuedx removed a project: Patch-For-Review.Jul 6 2015, 6:49 PM

	F187943: Screen Shot 2015-06-30 at 4.25.52 PM.png
	Jun 30 2015, 11:26 PM

	F186110: Screen Shot 2015-06-29 at 5.52.00 PM.png
	Jun 30 2015, 12:53 AM

	F187945: hamburger-menu.svg
	Jul 1 2015, 12:17 AM

	F187916: menu-tipsy-01.png
	Jun 30 2015, 7:55 PM

	F187915: hamburger-notif-01.png
	Jun 30 2015, 7:55 PM

Notification for hamburger and tipsy in menu to call out collectionsClosed, ResolvedPublic5 Estimated Story PointsActions

Description

Details

Related ObjectsSearch...

Event Timeline

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

Related Objects
Search...