mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-28 16:10:55 +00:00
ded6430b47
Changes * Update FIXME in userMenu.less to merge selectors * We replace minerva-user-notifications class with minerva-notifications to short-circuit Echo's code so that it no longer replaces the Minerva notification badge with its own. * We update resources/skins.minerva.scripts/initMobile.js to introduce our own wire up code - this is responsible for opening Echo overlay and reseting the counter. The code in Echo will be removed in a follow up (see <I2f923e509d24524a2375ffbe6b3ef336487574bb>) * We update skinStyles/ext.echo.styles.badge.less with styles from Vector 2022 so that Minerva desktop remains consistent with desktop Vector 2022 experience. * We clearly mark technical debt relating to the special mobile version. Testing: * Pixel.js has a group echo that covers all the different variants. Make sure to update to latest main branch before running these. * Desktop should behave the same for Minerva as Echo. * On mobile only when a user has unseen notifications a red circle is shown. Otherwise a bell icon is shown, never with number. * On mobile a single button is visible that combines alert and count numbers. * With Echo disabled a bell shows that links to the user talk page Visual changes: * Previously the red circle became a transparent/gray circle on click. Now it will always be red. * Minor aligment changes to red circle and bell icon are expected as the change prevents MobileFrontend/Echo updating the icon to use Codex. Bug: T342907 Change-Id: I55c18cf723a32f80b93a01dd0687e005162c4e93
76 lines
1.4 KiB
Plaintext
76 lines
1.4 KiB
Plaintext
@import '../../minerva.less/minerva.variables.less';
|
|
|
|
.user-button {
|
|
// Make sure count is positioned correctly in relation to bell icon
|
|
position: relative;
|
|
|
|
// can't use display:none class as icons must have a label to retain height
|
|
.label {
|
|
visibility: hidden;
|
|
}
|
|
|
|
&.loading span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Technical debt relating to Minerva mobile having a single
|
|
// Echo icon rather than 2.
|
|
//
|
|
|
|
//
|
|
// Difference 1) Never show count for seen notifications
|
|
.mw-mf .mw-echo-notification-badge-nojs::after {
|
|
content: none;
|
|
}
|
|
|
|
//
|
|
// Difference 2) Replace bell icon with a red circle
|
|
//
|
|
.mw-mf .mw-echo-unseen-notifications {
|
|
display: inline-block;
|
|
margin: auto;
|
|
background: @background-color-light;
|
|
color: @color-subtle;
|
|
cursor: pointer;
|
|
|
|
.mw-ui-icon-circle {
|
|
border-radius: @border-radius-circle;
|
|
border: @border-width-thick @border-style-base #54595d;
|
|
margin: auto;
|
|
height: @icon-size-md;
|
|
width: @icon-size-md;
|
|
background: @background-color-destructive;
|
|
border-color: @border-color-destructive;
|
|
|
|
&::before {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
color: @color-inverted;
|
|
content: attr( data-counter-text );
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
letter-spacing: -0.5px;
|
|
padding: 0;
|
|
border: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|