Page MenuHomePhabricator

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

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:

  1. 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.
  2. 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 notificationsdesktop 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.
videoframe 28
  • 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:

  1. Making the dialog responsive on Minerva
  2. 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

Related Gerrit Patches:
mediawiki/extensions/Echo : masterMobile and desktop Echo are the same
mediawiki/skins/MinervaNeue : master[menu] [UI] [notifications] make notifications slide over top

Related Objects

Event Timeline

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
Jdlrobson added a subscriber: Jdlrobson.

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.

alexhollender added a subscriber: alexhollender.

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

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

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

alexhollender 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 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)
Jdlrobson added a comment.EditedOct 8 2019, 3:10 PM

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.

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

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)
Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptOct 11 2019, 4:43 PM

Blocked on discussion in T235193.

ovasileva added a subscriber: ovasileva.

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

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

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

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