diff options
| author | hmonroy <hmonroy@wikimedia.org> | 2020-07-06 17:06:50 -0700 |
|---|---|---|
| committer | hmonroy <hmonroy@wikimedia.org> | 2020-07-15 18:33:53 -0700 |
| commit | 54834abac96974f2332da2590279f97ba34a69f8 (patch) | |
| tree | 87201bdb67696258dae13f27e4e5e63d1cb9bc34 /resources/src/mediawiki.notification | |
| parent | 39fb017285df94f8e9bbaa4de23c2d27489d7b19 (diff) | |
| download | mediawikicore-54834abac96974f2332da2590279f97ba34a69f8.tar.gz mediawikicore-54834abac96974f2332da2590279f97ba34a69f8.zip | |
Add overlay to mw.notify area
Add an overlay div wrapper to mw.notify to allow different content such as forms.
This overlay wrapper allows form fields, like dropdowns, to be included
and expanded in the mw.notify area.
Bug: T249262
Change-Id: Ic9f053f93e9ccf8d2eabc9addd71f317863f7c2e
Diffstat (limited to 'resources/src/mediawiki.notification')
| -rw-r--r-- | resources/src/mediawiki.notification/default.css | 13 | ||||
| -rw-r--r-- | resources/src/mediawiki.notification/notification.js | 9 |
2 files changed, 19 insertions, 3 deletions
diff --git a/resources/src/mediawiki.notification/default.css b/resources/src/mediawiki.notification/default.css index d2f557c27d9f..fec7de6cc2da 100644 --- a/resources/src/mediawiki.notification/default.css +++ b/resources/src/mediawiki.notification/default.css @@ -1,3 +1,14 @@ +.mw-notification-area-overlay { + position: absolute; + top: 0; + right: 0; + /* Set a height to avoid a scrollbar on the page. + /* We do not want the overlay to expand all the way to the bottom + */ + height: 300px; + pointer-events: none; +} + .mw-notification-area { top: 0; right: 0; @@ -8,6 +19,7 @@ z-index: 10000; /* Avoid horizontal scrollbar on fade in and on fade out */ overflow: hidden; + height: 100%; } .mw-notification { @@ -23,6 +35,7 @@ transform: translateX( 35px ); -webkit-transition: opacity 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out; transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out; + pointer-events: auto; } .mw-notification-visible { diff --git a/resources/src/mediawiki.notification/notification.js b/resources/src/mediawiki.notification/notification.js index 590f5369aa84..f14f0bbb9986 100644 --- a/resources/src/mediawiki.notification/notification.js +++ b/resources/src/mediawiki.notification/notification.js @@ -286,7 +286,7 @@ * @ignore */ function init() { - var offset, + var offset, $overlay, isFloating = false; function updateAreaMode() { @@ -305,8 +305,11 @@ $area = $( '.mw-notification-area[data-mw="interface"]' ).first(); if ( !$area.length ) { $area = $( '<div>' ).addClass( 'mw-notification-area' ); - // Prepend the notification area to the content area - mw.util.$content.prepend( $area ); + // Create overlay div for the notification area + $overlay = $( '<div>' ).addClass( 'mw-notification-area-overlay' ); + // Append the notification area to the overlay wrapper area + $overlay.append( $area ); + mw.util.$content.prepend( $overlay ); } $area .addClass( 'mw-notification-area-layout' ) |