wikimedia/mediawiki-extensions-Echo
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo synced 2024-11-27 09:10:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjust notification popup arrow in small screens

Browse source 
Use the max width breakpoint from wikimedia-ui-base
to add or remove popup container padding. That is
because the container has no padding in small
screens (when Vector's header breaks in two rows).

Bug: T366672
Change-Id: Idb0f844189cc221009cbb3e06c8c3fe0096bd0c2
This commit is contained in:
Sergio Gimeno 2024-06-11 19:29:15 +02:00
parent fe613f1fea
commit 1d0b6052e6
1 changed files with 15 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
modules/ui/mw.echo.ui.NotificationBadgeWidget.js
View file

@ -108,6 +108,19 @@
.addClass( 'mw-echo-ui-notificationBadgeButtonPopupWidget-footer' )
.append( footerButtonGroupWidget.$element );
const screenWidth = $( window ).width();
// FIXME 639 is @max-width-breakpoint-mobile value in wikimedia-ui-base.less,
// should be updated with aproppriate JS exported Codex token once available, T366622
const maxWidthBreakPoint = 639;
const isUnderBreakpointMobile = screenWidth < maxWidthBreakPoint;
const mql = window.matchMedia( `(max-width: ${ maxWidthBreakPoint }px)` );
const matchMedia = function ( event ) {
if ( event.matches ) {
this.popup.containerPadding = 0;
} else {
this.popup.containerPadding = 20;
}
};
this.popup = new OO.ui.PopupWidget( {
$content: this.notificationsWidget.$element,
$footer: $footer,
@ -115,7 +128,7 @@
hideWhenOutOfView: false,
autoFlip: false,
autoClose: true,
containerPadding: 20,
containerPadding: isUnderBreakpointMobile ? 0 : 20,
$floatableContainer: this.$element,
// Also ignore clicks from the nested action menu items, that
// actually exist in the overlay
@ -130,6 +143,7 @@
),
classes: [ 'mw-echo-ui-notificationBadgeButtonPopupWidget-popup' ]
} );
mql.addEventListener( 'change', matchMedia.bind( this ) );
// Append the popup to the overlay
this.$overlay.append( this.popup.$element );