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

Move the popups to the overlay

Browse source 
This will solve multiple issues with the design having to overcome
the theme-based design for the #p-tools.

Bug: T156080
Change-Id: Ibfcdfeea649e566059fd88485e146fbad2201016
This commit is contained in:
Moriel Schottlender 2017-12-20 15:44:27 -08:00
parent d009239737
commit 77acb5b3ee
4 changed files with 16 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
modules/styles/mw.echo.ui.NotificationBadgeWidget.less
View file

@ -4,12 +4,7 @@
.mw-echo-ui-notificationBadgeButtonPopupWidget {
position: relative;
> .oo-ui-popupWidget {
// #p-personal li has a font-size of 0.75em, but we want the
// font size here to be exactly 0.875em, so we must override
// the parent em sizing by dividing.
font-size: 0.875em / 0.75em;
&-popup {
> .oo-ui-popupWidget-popup {
> .oo-ui-popupWidget-head {
height: 3.5em;

10
modules/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less
View file

@ -4,10 +4,16 @@
text-transform: none;
font-weight: normal;
&,
.oo-ui-popupWidget a.oo-ui-buttonElement-button {
&-popup {
// #p-personal li has a font-size of 0.75em, but we want the
// font size here to be exactly 0.875em, so we must override
// the parent em sizing by dividing.
font-size: 0.875em / 0.75em;
a.oo-ui-buttonElement-button {
color: #333;
}
}
a {
background-color: initial;

3
modules/styles/mw.echo.ui.overlay.monobook.less
View file

@ -2,7 +2,6 @@
// We need the overlay to be adjusted for:
// #globalWrapper 127%
// .pBody 95%
// .portlet ul 95%
// .mw-echo-ui-notificationBadgeButtonPopupWidget > .oo-ui-popupWidget 0.875/0.75em
font-size: 1.27 * 0.95 * 0.95 * 0.875 / 0.75 em;
font-size: 1.27 * 0.95 * 0.875 / 0.75em;
}

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

@ -132,6 +132,7 @@
width: config.popupWidth || 500,
autoClose: true,
containerPadding: 20,
$floatableContainer: this.$element,
// Also ignore clicks from the nested action menu items, that
// actually exist in the overlay
$autoCloseIgnore: this.$element.add( this.$menuOverlay ),
@ -145,6 +146,9 @@
),
classes: [ 'mw-echo-ui-notificationBadgeButtonPopupWidget-popup' ]
} );
// Append the popup to the overlay
this.$overlay.append( this.popup.$element );
// HACK: Add an icon to the popup head label
this.popupHeadIcon = new OO.ui.IconWidget( { icon: config.badgeIcon } );
this.popup.$head.prepend( this.popupHeadIcon.$element );
@ -186,10 +190,7 @@
'mw-echo-ui-notificationBadgeButtonPopupWidget ' +
'mw-echo-ui-notificationBadgeButtonPopupWidget-' + adjustedTypeString
)
.append(
this.badgeButton.$element,
this.popup.$element
);
.append( this.badgeButton.$element );
};
/* Initialization */