Updates to notifications container on mobile to make it more consistent with desktop
Open, MediumPublic
Actions

Assigned To

None

Authored By

	• Niedzielski
	Jun 19 2019, 8:12 PM

Description

NOTE: Implementing this task is blocked on T235193.

Description

Currently in MF/Minerva notifications are rendered in a sort've hybrid modal/drawer thing that slides in from the right of the screen. There are two issues with this:

on mobile the drawer experience isn't effective (or consistent with other drawer experiences) in this case because it takes up the entirety of the screen. Instead we should be using our standard modal/overlay.
on desktop a better experience would be to use a popover panel like we do in Vector, since it's a familiar pattern with a less drastic transition

Designs

mobile notifications	desktop notifications

Notes

Bug in existing design - when closing the tray there is a flash of the main menu. This should be fixed while overhauling this. This seems to have been fixed with T206354.

video	frame 28
notifications peek.mov485 KBDownload

Currently it seems like momentum scrolling is disabled for the notifications list on mobile (iOS only)

As part of this task, it would be ideal to not show additional scrollbars when presenting either the notification menu or main menu.

Do we want to use viewport calculations instead of content to improve performance? (Discussed in T206354 but not pursued.)

Developer notes

It makes little sense to reinvent the wheel here. We should use this opportunity to use the desktop dialog on mobile.

The desktop Echo treatment works reasonably well on Minerva and can be tested on the beta cluster. It does need a few improvements namely:

Making the dialog responsive on Minerva
align the icon correctly

(these fixes required are described in https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/Echo/+/541992 Style improvements to Echo OOUI dialog in desktop Minerva )

Once that's done, it's very easy to get the desired effect by throwing out all the mobile specific code (https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/Echo/+/542216 Mobile and desktop Echo are the same )

However this leaves one lingering issue T235193

Acceptance criteria

Opening notifications on Minerva on a desktop resolution should show a pull out similar to desktop Vector.
Opening notifications on desktop resolution should not change the address bar
Open notifications on mobile resolution should open a full screen overlay
Open notifications on mobile resolution can be closed with browser back button

Details

	Subject	Repo	Branch	Lines +/-
	Mobile and desktop Echo are the same	mediawiki/extensions/Echo	master	+55 -773
	[menu] [UI] [notifications] make notifications slide over top	mediawiki/skins/MinervaNeue	master	+4 -30

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	None	T226125 Updates to notifications container on mobile to make it more consistent with desktop
Duplicate	Jdlrobson	T235193 It should be possible to access notices in Minerva desktop without adding a new icon
Stalled	ovasileva	T225535 Notifications tray (mobile) - design refinements
Stalled	None	T228819 Notifications tray (desktop) - design refinements

Event Timeline

• Niedzielski created this task.Jun 19 2019, 8:12 PM

Restricted Application changed the subtype of this task from "Deadline" to "Task". · View Herald TranscriptJun 19 2019, 8:12 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

• Niedzielski mentioned this in T206354: Main menu should slide over content.Jun 19 2019, 8:13 PM

Please remove the ambiguity given by the "or" in the title. Please rewrite in terms of problem and solution specification.

I should note drawers have limited height so are probably not appropriate here. I guess addressing this can be folded into the personal menu navigation solution.

Jdlrobson updated the task description. (Show Details)Jul 9 2019, 10:03 PM

Jdlrobson mentioned this in T225260: BUG: Notifications tray (mobile) - margins and borders.

ovasileva mentioned this in T158314: [EPIC] Mobile site should support swipe user interactions.Jul 16 2019, 4:33 PM

@Niedzielski I'm realizing that the designs might differ a bit between desktop and mobile here. I think for mobile (or anything smaller than a tablet / 720px) a full-screen modal is appropriate. I think for desktop something like we do in Vector would be nice. Thoughts? If you agree, should I split this up into two tasks, or include it all here?

mobile notifications	desktop notifications

@alexhollender, this looks nice to me! I think just morphing this task to your latest designs probably makes the most sense. We can then consider splitting it up after discussing implementation concerns.

Change 528189 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/MinervaNeue@master] [menu] [UI] [notifications] make notifications slide over top

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

gerritbot added a project: Patch-For-Review.Aug 5 2019, 8:53 PM

Change 528189 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] [menu] [UI] [notifications] make notifications slide over top

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

Maintenance_bot removed a project: Patch-For-Review.Aug 7 2019, 9:10 PM

Restricted Repository Identity mentioned this in rSKINc7079ea2c8d5: Update git submodules.Aug 7 2019, 9:52 PM

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.20; 2019-08-27).Aug 20 2019, 2:02 PM

• alexhollender_WMF renamed this task from Notifications should appear in a modal dialog or drawer to Updates to notifications container on mobile and desktop.Aug 26 2019, 3:56 PM

• alexhollender_WMF updated the task description. (Show Details)

• Niedzielski updated the task description. (Show Details)Aug 26 2019, 4:02 PM

• Niedzielski updated the task description. (Show Details)

• alexhollender_WMF mentioned this in T231205: Add shadow to nav menu drawer.Aug 26 2019, 4:48 PM

• alexhollender_WMF updated the task description. (Show Details)

• alexhollender_WMF edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Design).Sep 24 2019, 4:44 PM

ovasileva edited projects, added Web-Team-Backlog (Kanbanana-2019-20-Q2); removed Web-Team-Backlog.Oct 2 2019, 8:48 AM

I suggest stalling this until T221007 is completed - the code will all be in the same place and easier to work on when that's done.

personally I think the best solution here would be to use the same design as desktop and only maintain one version. T221007 will also make that very possible.

Jdlrobson mentioned this in T202308: PHPUnit test case warning about Special:Notifications missing aliases in SkinMinervaTest.Oct 8 2019, 3:13 PM

Jdlrobson moved this task from Needs Analysis to Blocked on Others on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.Oct 8 2019, 4:45 PM

Jdlrobson claimed this task.Oct 10 2019, 2:39 PM

Jdlrobson moved this task from Blocked on Others to Needs Analysis on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.

Jdlrobson mentioned this in T235193: It should be possible to access notices in Minerva desktop without adding a new icon.Oct 10 2019, 4:37 PM

Change 542216 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/Echo@master] Mobile and desktop Echo are the same

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

gerritbot added a project: Patch-For-Review.Oct 10 2019, 8:03 PM

Masumrezarock100 moved this task from Needs Analysis to Needs Code Review on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.Oct 10 2019, 8:03 PM

Jdlrobson renamed this task from Updates to notifications container on mobile and desktop to Updates to notifications container on mobile to make it more consistent with desktop.Oct 10 2019, 8:05 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson moved this task from Needs Code Review to Needs Analysis on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.Oct 11 2019, 4:43 PM

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptOct 11 2019, 4:43 PM

Masumrezarock100 awarded a token.Oct 11 2019, 5:22 PM

Jdlrobson mentioned this in T225535: Notifications tray (mobile) - design refinements.Oct 15 2019, 5:12 PM

Jdlrobson mentioned this in T229691: [Bug] Notification drawer spins forever on load failure.

Jdlrobson moved this task from Needs Analysis to Blocked on Others on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.Oct 15 2019, 5:29 PM

Blocked on discussion in T235193.

Moving back to triaged but future for the time being until we can unblock

ovasileva moved this task from Incoming to Triaged but Future on the Web-Team-Backlog board.Oct 16 2019, 5:20 PM

• alexhollender_WMF added a subtask: T225535: Notifications tray (mobile) - design refinements.Oct 17 2019, 1:44 PM

• alexhollender_WMF added a subtask: T228819: Notifications tray (desktop) - design refinements.

@Jdlrobson we discussed this yesterday in kickoff and identified it as a potential iceberg situation. It sounds like this is the right solution but it's not clear that it's worth taking on this work right now. Also to clarify, this task is about the container that notifications get rendered in. There are two other tasks about the styling of the notifications elements within that container (T225535 and T228819) which I've just made children of this task.

Jdlrobson changed the status of subtask T225535: Notifications tray (mobile) - design refinements from Open to Stalled.Oct 22 2019, 6:54 PM

Jdlrobson changed the status of subtask T228819: Notifications tray (desktop) - design refinements from Open to Stalled.

Jdlrobson mentioned this in T228819: Notifications tray (desktop) - design refinements.

Jdlrobson mentioned this in T221007: Extract Echo handling from SkinMinerva class.Oct 22 2019, 7:01 PM

Sticking back into design until we've worked out the long term future of this feature (Blocked on discussion in T235193.)

Restricted Application added a project: Growth-Team. · View Herald TranscriptOct 24 2019, 6:54 PM

Jdlrobson added a project: User-Jdlrobson.Nov 5 2019, 5:41 PM

Jdlrobson moved this task from Inbox to Blocked on the User-Jdlrobson board.

Jdlrobson moved this task from Blocked to OKR Backlog on the User-Jdlrobson board.Nov 6 2019, 11:56 PM

Change 542216 abandoned by Jdlrobson:
Mobile and desktop Echo are the same

Reason:
No design/product support right now. Continuing on phab

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

Maintenance_bot removed a project: Patch-For-Review.Dec 18 2019, 12:11 AM

Jdlrobson updated the task description. (Show Details)Dec 23 2019, 6:06 PM

gerritbot mentioned this in T225213: Main Menu should work without JavaScript to be more accessible and a better user experience.Dec 23 2019, 6:06 PM

Jdlrobson moved this task from OKR Backlog to Needs design on the User-Jdlrobson board.Jan 7 2020, 12:42 AM

Based on T226125#5604323 I'm moving this to blocked.

Jdlrobson removed Jdlrobson as the assignee of this task.Jul 8 2020, 12:05 AM

MBinder_WMF added a project: Growth-Team-Filtering.Apr 15 2021, 6:51 PM

Jdlrobson moved this task from Design to Tracking on the Web-Team-Backlog board.Apr 30 2021, 8:29 PM

Jdlrobson edited projects, added Web-Team-Backlog (Tracking); removed Web-Team-Backlog (Design).

Jdlrobson moved this task from Untriaged to Untag on the Web-Team-Backlog (Tracking) board.Sep 21 2021, 8:44 PM

ovasileva moved this task from Untag to Move to Backlog on the Web-Team-Backlog (Tracking) board.Sep 22 2021, 3:27 PM

Jdlrobson edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Tracking).Nov 5 2021, 12:12 AM

Jdlrobson moved this task from Triaged but Future to Incoming on the Web-Team-Backlog board.Mar 20 2024, 8:14 PM

	F29368539: Screen Shot 2019-06-06 at 6.24.09 PM.png
	Jul 9 2019, 10:03 PM

	F29907208: image.png
	Jul 30 2019, 4:18 PM

Updates to notifications container on mobile to make it more consistent with desktopOpen, MediumPublicActions

Description

Description

Designs

Notes

Developer notes

Acceptance criteria

Details

Related ObjectsSearch...

Event Timeline

Updates to notifications container on mobile to make it more consistent with desktop
Open, MediumPublic
Actions

Related Objects
Search...