Change Details

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 | {F29605759} | {F29907208} ====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 | | {F29368533} | {F29368539} - 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 [[ https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain?useskin=minerva&useformat=desktop | 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

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 | {F29605759} | {F29907208} ====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 | | {F29368533} | {F29368539} - 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 [[ https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain?useskin=minerva&useformat=desktop | 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

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 | {F29605759} | {F29907208} ====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 | | {F29368533} | {F29368539} - 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 [[ https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain?useskin=minerva&useformat=desktop | 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