mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-12-13 08:29:29 +00:00
68239ae344
Changes: - mw-ui-button to cdx-button - mw-ui-quiet to cdx-button--weight-quiet - mw-ui-icon-element to cdx-button--icon-only - mw-ui-icon to vector-icon - mw-ui-icon-flush-right/left to vector-button-flush-right/left - Removes $isSmallIcon param in Hooks.php 85 Visual Changes - ~36 changes from minor pixel changes from the new button classes in the main menu, language button - 22 from standardizing the padding of the TOC in page title - ~10 changes from addition of .cdx-button to the TOC toggle buttons PERFORMANCE: This will result in an overall increase of 2.7kb of render blocking CSS, 1kb will be reclaimed when I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged. Co-author: Bernard Wang <bwang@wikimedia.org> Bug: T336526 Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
36 lines
1.2 KiB
JavaScript
36 lines
1.2 KiB
JavaScript
/**
|
|
* Upgrades Echo for icon consistency.
|
|
* Undos work inside Echo to replace our button.
|
|
*/
|
|
function init() {
|
|
if ( document.querySelectorAll( '#pt-notifications-alert a, #pt-notifications-notice a' ).length !== 2 ) {
|
|
return;
|
|
}
|
|
|
|
mw.hook( 'ext.echo.NotificationBadgeWidget.onInitialize' ).add( function ( badge ) {
|
|
const element = badge.$element[ 0 ];
|
|
element.classList.add( 'mw-list-item' );
|
|
const anchor = /** @type {HTMLElement} */ ( element.querySelector( 'a' ) );
|
|
anchor.classList.add(
|
|
'cdx-button',
|
|
'cdx-button--weight-quiet',
|
|
'cdx-button--icon-only',
|
|
'cdx-button--fake-button',
|
|
'cdx-button--fake-button--enabled'
|
|
);
|
|
// Icon classes shouldn't go on the same element as button classes
|
|
// However this cant be avoided due to Echo button's implementation
|
|
// which directly sets the contents of the anchor element every update
|
|
// which would clear out any icon children that we define
|
|
if ( element.id === 'pt-notifications-alert' ) {
|
|
anchor.classList.add( 'vector-icon', 'mw-ui-icon-wikimedia-bell' );
|
|
}
|
|
if ( element.id === 'pt-notifications-notice' ) {
|
|
anchor.classList.add( 'vector-icon', 'mw-ui-icon-wikimedia-tray' );
|
|
}
|
|
anchor.classList.remove( 'oo-ui-icon-bell', 'oo-ui-icon-tray' );
|
|
} );
|
|
}
|
|
|
|
module.exports = init;
|