Update vector badge styles

- Override echo icon styles for modern vector
- Reverts https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Echo/+/704862

Bug: T285259
Change-Id: Id71d3e248dc6d0ee24278e0ecfbcf8691e1da24b
This commit is contained in:
bwang 2021-07-19 10:20:10 -05:00
parent 847ca35eb6
commit b0aaa2e4ec
2 changed files with 38 additions and 11 deletions

View file

@ -1090,8 +1090,6 @@ class EchoHooks implements RecentChange_saveHook {
[
// Hardcode id, which is needed to dismiss the talk alert notification
'id' => 'pt-talk-alert',
// unset the icon
'icon' => null,
'text' => $skinTemplate->msg( 'echo-new-messages' )->text(),
'class' => [ 'mw-echo-alert' ],
]
@ -1109,8 +1107,6 @@ class EchoHooks implements RecentChange_saveHook {
],
// This item used to be part of personal tools, and much CSS relies on it using this id.
'id' => 'pt-notifications-alert',
// This property is used by modern Vector to add mw-icon classes
'icon' => 'bell',
];
$links['notifications']['notifications-notice'] = [
@ -1124,8 +1120,6 @@ class EchoHooks implements RecentChange_saveHook {
],
// This item used to be part of personal tools, and much CSS relies on it using this id.
'id' => 'pt-notifications-notice',
// This property is used by modern Vector to add mw-icon classes
'icon' => 'tray',
];
if ( $hasUnseen ) {

View file

@ -1,11 +1,44 @@
@import '../echo.variables.less';
#p-personal #pt-notifications-alert,
#p-personal #pt-notifications-notice {
margin-right: 0.4em;
}
#pt-notifications-notice .mw-echo-notifications-badge,
#pt-notifications-alert .mw-echo-notifications-badge {
top: -5px;
}
.vector-user-links {
#pt-notifications-alert,
#pt-notifications-notice {
margin: 0;
// Override OOUI icon styles to match core icons
.mw-echo-notifications-badge {
top: 0;
margin: 0;
background-repeat: no-repeat;
background-position: center;
width: 44px;
height: 44px;
&:hover {
background-color: rgba( 0, 0, 0, 0.03 );
border-radius: 2px;
}
// Adjust badge and counter styles when counter is present
&:not( .mw-echo-notifications-badge-all-read ) {
background-position: 35% 50%;
width: 51px;
&:after {
left: 22px;
top: 19px;
}
}
}
}
}
#p-personal #pt-notifications-alert,
#p-personal #pt-notifications-notice {
margin-right: 0.4em;
}