[Visual enhancements next] Make the Echo buttons functional
This completes the changes to Echo inside the vectorvisualenhancementnext=1 feature flag Bug: T257143 Change-Id: I8f3904815c90ef1a10a2342c5c70363c8b9e1e47
This commit is contained in:
parent
8cd41a8c64
commit
44ee12c717
|
@ -0,0 +1,29 @@
|
|||
/**
|
||||
* Upgrades Echo for icon consistency.
|
||||
* Undos work inside Echo to replace our button.
|
||||
*/
|
||||
function init() {
|
||||
if ( !document.body.classList.contains( 'vector-feature-visual-enhancement-next-enabled' ) ) {
|
||||
return;
|
||||
}
|
||||
if ( document.querySelectorAll( '#pt-notifications-alert a, #pt-notifications-notice a' ).length !== 2 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
mw.hook( 'ext.echo.NotificationBadgeWidget.onInitialize' ).add( function ( badge ) {
|
||||
var $element = badge.$element;
|
||||
$element.addClass( 'mw-list-item' );
|
||||
|
||||
var iconButtonClasses = 'mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element ';
|
||||
if ( $element.attr( 'id' ) === 'pt-notifications-alert' ) {
|
||||
$element.children( 'a' ).addClass( iconButtonClasses + 'mw-ui-icon-bell' );
|
||||
$element.children( 'a' ).removeClass( 'oo-ui-icon-bell' );
|
||||
}
|
||||
if ( $element.attr( 'id' ) === 'pt-notifications-notice' ) {
|
||||
$element.children( 'a' ).addClass( iconButtonClasses + 'mw-ui-icon-tray' );
|
||||
$element.children( 'a' ).removeClass( 'oo-ui-icon-tray' );
|
||||
}
|
||||
} );
|
||||
}
|
||||
module.exports = init;
|
|
@ -1,4 +1,5 @@
|
|||
var languageButton = require( './languageButton.js' ),
|
||||
echo = require( './echo.js' ),
|
||||
initSearchLoader = require( './searchLoader.js' ).initSearchLoader,
|
||||
dropdownMenus = require( './dropdownMenus.js' ).dropdownMenus,
|
||||
sidebarPersistence = require( './sidebarPersistence.js' ),
|
||||
|
@ -73,6 +74,7 @@ function main( window ) {
|
|||
checkbox.init( window.document );
|
||||
initSearchLoader( document );
|
||||
languageButton();
|
||||
echo();
|
||||
dropdownMenus();
|
||||
addNamespacesGadgetSupport();
|
||||
if ( document.body.classList.contains( 'vector-feature-visual-enhancement-next-enabled' ) ) {
|
||||
|
|
|
@ -393,6 +393,7 @@
|
|||
"resources/skins.vector.js/checkbox.js",
|
||||
"resources/skins.vector.js/sidebarPersistence.js",
|
||||
"resources/skins.vector.js/languageButton.js",
|
||||
"resources/skins.vector.js/echo.js",
|
||||
"resources/skins.vector.js/searchLoader.js"
|
||||
],
|
||||
"dependencies": [
|
||||
|
|
|
@ -46,23 +46,27 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mixin-notification-badge() {
|
||||
// When 99+ allow counter so spill outside icon
|
||||
overflow: visible;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
top: 43%;
|
||||
font-size: unit( 12 / @font-size-browser, em );
|
||||
padding: 7px 0.3em;
|
||||
border: 1px solid #fff;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: @colorGray7;
|
||||
content: attr( data-counter-text );
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.vector-feature-visual-enhancement-next-enabled {
|
||||
.mw-echo-notification-badge-nojs {
|
||||
// When 99+ allow counter so spill outside icon
|
||||
overflow: visible;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
top: 43%;
|
||||
font-size: unit( 12 / @font-size-browser, em );
|
||||
padding: 7px 0.3em;
|
||||
border: 1px solid #fff;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: @colorGray7;
|
||||
content: attr( data-counter-text );
|
||||
color: #fff;
|
||||
}
|
||||
.mixin-notification-badge();
|
||||
}
|
||||
|
||||
// Special colors for unseen notifications
|
||||
|
@ -73,4 +77,18 @@
|
|||
#pt-notifications-notice .mw-echo-unseen-notifications:after {
|
||||
background-color: @color-primary;
|
||||
}
|
||||
|
||||
// Override ULS enhanced buttons
|
||||
#pt-notifications-notice .mw-echo-notifications-badge,
|
||||
#pt-notifications-alert .mw-echo-notifications-badge {
|
||||
.mixin-notification-badge();
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
opacity: 1;
|
||||
|
||||
&:focus {
|
||||
// Copied from mixins.buttons.less, match button focus styles
|
||||
box-shadow: @box-shadow-primary--focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue