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

Merge "Adjust notification popup arrow in small screens"

Browse source
This commit is contained in:
jenkins-bot 2024-06-21 19:07:21 +00:00 committed by Gerrit Code Review
parent b970f614c2 1d0b6052e6
commit b818832d4e
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' ) .addClass( 'mw-echo-ui-notificationBadgeButtonPopupWidget-footer' )
.append( footerButtonGroupWidget.$element ); .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( { this.popup = new OO.ui.PopupWidget( {
$content: this.notificationsWidget.$element, $content: this.notificationsWidget.$element,
$footer: $footer, $footer: $footer,
@ -115,7 +128,7 @@
hideWhenOutOfView: false, hideWhenOutOfView: false,
autoFlip: false, autoFlip: false,
autoClose: true, autoClose: true,
containerPadding: 20, containerPadding: isUnderBreakpointMobile ? 0 : 20,
$floatableContainer: this.$element, $floatableContainer: this.$element,
// Also ignore clicks from the nested action menu items, that // Also ignore clicks from the nested action menu items, that
// actually exist in the overlay // actually exist in the overlay
@ -130,6 +143,7 @@
), ),
classes: [ 'mw-echo-ui-notificationBadgeButtonPopupWidget-popup' ] classes: [ 'mw-echo-ui-notificationBadgeButtonPopupWidget-popup' ]
} ); } );
mql.addEventListener( 'change', matchMedia.bind( this ) );
// Append the popup to the overlay // Append the popup to the overlay
this.$overlay.append( this.popup.$element ); this.$overlay.append( this.popup.$element );