[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' ),
|
var languageButton = require( './languageButton.js' ),
|
||||||
|
echo = require( './echo.js' ),
|
||||||
initSearchLoader = require( './searchLoader.js' ).initSearchLoader,
|
initSearchLoader = require( './searchLoader.js' ).initSearchLoader,
|
||||||
dropdownMenus = require( './dropdownMenus.js' ).dropdownMenus,
|
dropdownMenus = require( './dropdownMenus.js' ).dropdownMenus,
|
||||||
sidebarPersistence = require( './sidebarPersistence.js' ),
|
sidebarPersistence = require( './sidebarPersistence.js' ),
|
||||||
|
@ -73,6 +74,7 @@ function main( window ) {
|
||||||
checkbox.init( window.document );
|
checkbox.init( window.document );
|
||||||
initSearchLoader( document );
|
initSearchLoader( document );
|
||||||
languageButton();
|
languageButton();
|
||||||
|
echo();
|
||||||
dropdownMenus();
|
dropdownMenus();
|
||||||
addNamespacesGadgetSupport();
|
addNamespacesGadgetSupport();
|
||||||
if ( document.body.classList.contains( 'vector-feature-visual-enhancement-next-enabled' ) ) {
|
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/checkbox.js",
|
||||||
"resources/skins.vector.js/sidebarPersistence.js",
|
"resources/skins.vector.js/sidebarPersistence.js",
|
||||||
"resources/skins.vector.js/languageButton.js",
|
"resources/skins.vector.js/languageButton.js",
|
||||||
|
"resources/skins.vector.js/echo.js",
|
||||||
"resources/skins.vector.js/searchLoader.js"
|
"resources/skins.vector.js/searchLoader.js"
|
||||||
],
|
],
|
||||||
"dependencies": [
|
"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 {
|
.vector-feature-visual-enhancement-next-enabled {
|
||||||
.mw-echo-notification-badge-nojs {
|
.mw-echo-notification-badge-nojs {
|
||||||
// When 99+ allow counter so spill outside icon
|
.mixin-notification-badge();
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Special colors for unseen notifications
|
// Special colors for unseen notifications
|
||||||
|
@ -73,4 +77,18 @@
|
||||||
#pt-notifications-notice .mw-echo-unseen-notifications:after {
|
#pt-notifications-notice .mw-echo-unseen-notifications:after {
|
||||||
background-color: @color-primary;
|
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