wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-11-27 23:50:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Echo icon should reflect seen status

Browse source 
Bug: T310358
Change-Id: I681a2540979ceeca677e576fca2efd91e1b80e15
This commit is contained in:
Jon Robson 2022-12-12 17:58:09 -08:00
parent f8240fea6e
commit 028ab69a8b
2 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
includes/Skins/SkinMinerva.php
View file

@ -175,8 +175,18 @@ class SkinMinerva extends SkinMustache {
$alert['data']['counter-text'] = $notifCount;
}
if ( $notifCount > 0 ) {
return $this->getNotificationCircleButton( $alert );
$linkClassAlert = $alert['link-class'] ?? [];
$hasUnseenAlerts = is_array( $linkClassAlert ) && in_array( 'mw-echo-unseen-notifications', $linkClassAlert );
// The circle should only appear if there are unseen notifications.
// Once the notifications are seen (by opening the notification drawer)
// then the icon reverts to a gray circle, but on page refresh
// it should revert back to a bell icon.
// If you try and change this behaviour, at time of writing
// (December 2022) JavaScript will correct it.
if ( $notifCount > 0 && $hasUnseenAlerts ) {
$linkClass = $notice['link-class'] ?? [];
$hasUnseenNotices = is_array( $linkClass ) && in_array( 'mw-echo-unseen-notifications', $linkClass );
return $this->getNotificationCircleButton( $alert, $hasUnseenNotices );
} else {
return $this->getNotificationButton( $alert );
}
@ -190,10 +200,13 @@ class SkinMinerva extends SkinMustache {
* before making such a decision.
*
* @param array $alert
* @param bool $hasUnseenNotices does the user have unseen notices?
* @return array
*/
private function getNotificationCircleButton( array $alert ) {
private function getNotificationCircleButton( array $alert, bool $hasUnseenNotices ) {
$alertCount = $alert['data']['counter-num'] ?? 0;
$linkClass = $alert['link-class'] ?? [];
$hasSeenAlerts = is_array( $linkClass ) && in_array( 'mw-echo-unseen-notifications', $linkClass );
$alertText = $alert['data']['counter-text'] ?? $alertCount;
$alert['html'] =
Html::rawElement( 'div', [ 'class' => 'circle' ],
@ -201,7 +214,10 @@ class SkinMinerva extends SkinMustache {
'data-notification-count' => $alertCount,
], $alertText )
);
$alert['class'] = 'notification-count notification-unseen mw-echo-unseen-notifications';
$alert['class'] = 'notification-count';
if ( $hasSeenAlerts || $hasUnseenNotices ) {
$alert['class'] .= ' notification-unseen mw-echo-unseen-notifications';
}
$alert['link-class'] = array_merge(
$alert['link-class'],
self::NOTIFICATION_BUTTON_CLASSES

5
resources/skins.minerva.loggedin.styles/styles.less
View file

@ -49,9 +49,12 @@
}
}
&.notification-count {
padding: @icon-padding-md;
}
&.notification-unseen {
color: @notificationColorUnread;
padding: @icon-padding-md;
.circle {
background: @notificationBackgroundUnread;