mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-11-15 11:59:11 +00:00
c5905962ab
There is no need to load the entire of Echo's ui module (especially since that includes ooui widgets and their styles) on every page load. There's only need to load the entire module if and when a user clicks the Echo notification badge. Also, make the echo.dm model accept an external fetchNotifications promise so we can send the API request alongside loading the echo UI and "feed" it into the DM for processing. CSS adjusted to make the "jump" between the nojs and the js buttons seem less jumpy. Bug: T112401 Change-Id: I516e655ffd198511d694489a0702c5c713a5fd68
92 lines
2.1 KiB
Plaintext
92 lines
2.1 KiB
Plaintext
@import '../../echo.mixins';
|
|
@import '../../echo.variables';
|
|
|
|
.mw-echo-ui-notificationBadgeButtonPopupWidget {
|
|
&-alert {
|
|
// Must be strong to override OOUI's button background color definition
|
|
&.oo-ui-flaggedElement-unseen > .oo-ui-buttonElement-button {
|
|
background-color: @badge-background-unseen-alert;
|
|
}
|
|
}
|
|
&-message {
|
|
margin-left: @badge-distance-adjustment - 0.1em;
|
|
// Must be strong to override OOUI's button background color definition
|
|
&.oo-ui-flaggedElement-unseen > .oo-ui-buttonElement-button {
|
|
background-color: @badge-background-unseen-message;
|
|
}
|
|
}
|
|
|
|
.oo-ui-popupWidget-footer {
|
|
border-top: 1px solid #DDDDDD;
|
|
width: 100%;
|
|
|
|
.oo-ui-buttonElement {
|
|
display: table-cell;
|
|
white-space: normal;
|
|
font-weight: bold;
|
|
width: @notification-popup-width / 2;
|
|
box-sizing: border-box;
|
|
|
|
&:last-child {
|
|
border-left: 1px solid #DDDDDD;
|
|
}
|
|
|
|
> .oo-ui-buttonElement-button {
|
|
display: block;
|
|
line-height: 4em;
|
|
margin: 0;
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Badge
|
|
> .oo-ui-buttonElement-button {
|
|
.mixin-notifications-badge();
|
|
padding: @badge-padding;
|
|
|
|
.oo-ui-labelElement-label {
|
|
// We must use !important here because ooui's button's label rules
|
|
// are extremely strong and cannot be overridden
|
|
color: @badge-text-color-idle !important;
|
|
}
|
|
.oo-ui-iconElement-icon {
|
|
// We must use !important here because ooui's button's icon rules
|
|
// are extremely strong and cannot be overridden
|
|
width: @badge-icon-size !important;
|
|
height: @badge-icon-size !important;
|
|
margin-top: -0.1em;
|
|
&.oo-ui-icon-speechBubble {
|
|
margin-top: -0.14em;
|
|
padding-left: 0.1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.oo-ui-popupWidget {
|
|
// #p-personal li has a font-size of 0.75em, but we want the
|
|
// font size here to be exactly 0.875em, so we must override
|
|
// the parent em sizing by dividing.
|
|
font-size: 0.875em / 0.75em;
|
|
}
|
|
|
|
.oo-ui-popupWidget-head {
|
|
height: 3.5em;
|
|
> .oo-ui-iconWidget {
|
|
float: left;
|
|
margin: 0.7em 0 1em 1em;
|
|
}
|
|
|
|
> .oo-ui-labelElement-label {
|
|
font-size: 1.2em;
|
|
padding: 0.3em;
|
|
margin-left: 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mw-echo-ui-notificationsWidget-markAllReadButton {
|
|
margin: 1.25em 1em;
|
|
}
|
|
}
|
|
}
|