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

Merge "[Visual enhancements next] Restores the badge styling to Echo"

This commit is contained in:
jenkins-bot 2022-09-28 16:07:36 +00:00 committed by Gerrit Code Review
parent 3d68e00e12 d8f242c046
commit 8cd41a8c64
2 changed files with 43 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
includes/Hooks.php
View File

@ -341,15 +341,21 @@ class Hooks implements
if ( isset( $content_navigation['notifications'] ) ) {
foreach ( $content_navigation['notifications'] as $key => $data ) {
$content_navigation[$overflow][$key] = $data;
if ( $visualEnhancements ) {
$content_navigation[$overflow][$key]['link-class'] = [
$icon = $data['icon'] ?? null;
if ( $visualEnhancements && $icon ) {
$linkClass = $content_navigation[$overflow][$key]['link-class'];
$item = $content_navigation[$overflow][$key];
$newLinkClass = [
// Allows Echo to react to clicks
'mw-echo-notification-badge-nojs'
];
} else {
unset( $content_navigation[$overflow][$key]['icon'] );
unset( $content_navigation[$overflow][$key]['button'] );
unset( $content_navigation[$overflow][$key]['text-hidden'] );
if ( in_array( 'mw-echo-unseen-notifications', $linkClass ) ) {
$newLinkClass[] = 'mw-echo-unseen-notifications';
}
$item['button'] = true;
$item['text-hidden'] = true;
$item['link-class'] = $newLinkClass;
$content_navigation[$overflow][$key] = $item;
}
}
}

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

@ -1,3 +1,5 @@
@import '../resources/common/variables.less';
.vector-feature-visual-enhancement-next-disabled,
.skin-vector-legacy {
#pt-notifications-notice .mw-echo-notifications-badge,
@ -43,3 +45,32 @@
margin-right: 0.4em;
}
}
.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;
}
}
// Special colors for unseen notifications
#pt-notifications-alert .mw-echo-unseen-notifications:after {
background-color: @color-destructive;
}
#pt-notifications-notice .mw-echo-unseen-notifications:after {
background-color: @color-primary;
}
}