jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[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:
Jon Robson 2022-09-14 17:31:29 -07:00 committed by bwang
parent 8cd41a8c64
commit 44ee12c717
4 changed files with 65 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
resources/skins.vector.js/echo.js Normal file
View File

@ -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;

2
resources/skins.vector.js/skin.js
View File

@ -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' ) ) {

1
skin.json
View File

@ -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": [

48
skinStyles/ext.echo.styles.badge.less
View File

@ -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;
}
}
}