Switch to using our own badge instead of jQuery.badge

With this change we will no longer be relying on JS for the badge
functionality. This will prevent the flash of unstyled content,
and allow wikis to locally override the styling (since the unread
class is now applied immediately).

I also went ahead and made the badge styling more closely match the
talk page message alert styling per Vibha.

Also removed the old full link optional behavior since we weren't
using it, and it would have been a pain to maintain.

Bug: 48165
Bug: 48001
Change-Id: Ie85d66afd5181d487d0bb2776ae14b121ea50d88
This commit is contained in:
kaldari 2013-05-15 16:10:49 -07:00
parent 8f651a3bad
commit f9481040d5
8 changed files with 62 additions and 66 deletions

View file

@ -145,8 +145,6 @@ To control which emails we send you, check your preferences:
$1',
// Notifications overlay
'echo-link-new' => '$1 new {{PLURAL:$1|notification|notifications}}',
'echo-link' => 'Notifications',
'echo-overlay-link' => 'All notifications',
'echo-overlay-title' => '<b>Notifications</b>',
'echo-overlay-title-overflow' => '<b>Notifications</b> (showing $1 of $2 unread)',
@ -485,10 +483,6 @@ The new notification count next to notification link, for example: 99+
'echo-email-footer-default' => 'Default footer content for Echo e-mail notifications. Parameters:
* $1 is the address of the organization that sent the e-mail
* $2 is "-------..." ({{msg-mw|echo-email-batch-separator}})',
'echo-link-new' => 'Shown in "personal links" when a user has unread notifications.
* $1 is number of unread notifications',
'echo-link' => 'Shown in "personal links" when a user has JS. New notifications are indicated with a badge.
{{Identical|Notification}}',
'echo-overlay-link' => 'Link to "all notifications" at the bottom of the overlay.
{{Identical|All notifications}}',
'echo-overlay-title' => 'Title at the top of the notifications overlay. Should include bold tags.',

View file

@ -133,12 +133,10 @@ $wgResourceModules += array(
'ext.echo.base',
'mediawiki.api',
'mediawiki.jqueryMsg',
'jquery.badge',
'mediawiki.ui',
'mediawiki.util',
),
'messages' => array(
'echo-link-new',
'echo-link',
'echo-overlay-title',
'echo-overlay-title-overflow',
'echo-overlay-link',
@ -174,6 +172,12 @@ $wgResourceModules += array(
'colon-separator',
),
),
'ext.echo.badge' => $echoResourceTemplate + array(
'styles' => 'badge/ext.echo.badge.css',
'skinStyles' => array(
'modern' => 'badge/ext.echo.badge.modern.css',
),
),
);
/**
@ -215,10 +219,6 @@ $wgEchoBackend = null;
// Whether to turn on email batch function
$wgEchoEnableEmailBatch = true;
// Show a 'Notifications' link with badge in the user toolbar at the top of the page.
// Otherwise, only show a badge next to the username.
$wgEchoShowFullNotificationsLink = false;
// URL for more information about the Echo notification system
$wgEchoHelpPage = '//www.mediawiki.org/wiki/Special:MyLanguage/Help:Extension:Echo';

View file

@ -599,6 +599,9 @@ class EchoHooks {
global $wgEchoFeedbackPage;
// Load the module for the Notifications flyout
$out->addModules( array( 'ext.echo.overlay' ) );
// Load the styles for the Notifications badge
$out->addModuleStyles( 'ext.echo.badge' );
// Pass needed global vars to the client
$out->addJsConfigVars( array( 'wgEchoFeedbackPage' => $wgEchoFeedbackPage ) );
}
if ( $wgEchoNewMsgAlert && $user->isLoggedIn() && $user->getOption( 'echo-show-alert' ) ) {
@ -616,35 +619,29 @@ class EchoHooks {
* @return bool true in all cases
*/
static function onPersonalUrls( &$personal_urls, &$title ) {
global $wgUser, $wgEchoShowFullNotificationsLink;
global $wgUser;
// Add a "My notifications" item to personal URLs
if ( $wgUser->isAnon() || !$wgUser->getOption( 'echo-notify-show-link' ) ) {
return true;
}
$notificationCount = EchoNotificationController::getNotificationCount( $wgUser );
if ( $wgEchoShowFullNotificationsLink ) {
// Add a "Notifications" item to personal URLs
$msg = wfMessage( $notificationCount == 0 ? 'echo-link' : 'echo-link-new' );
$text = $msg->params( EchoNotificationController::formatNotificationCount( $notificationCount ) )->text();
} else {
// Just add a number
$text = wfMessage( 'parentheses', EchoNotificationController::formatNotificationCount( $notificationCount ) )->plain();
}
$text = EchoNotificationController::formatNotificationCount( $notificationCount );
$url = SpecialPage::getTitleFor( 'Notifications' )->getLocalURL();
if ( $notificationCount == 0 ) {
$linkClasses = array( 'mw-echo-notifications-badge' );
} else {
$linkClasses = array( 'mw-echo-unread-notifications', 'mw-echo-notifications-badge' );
}
$notificationsLink = array(
'href' => $url,
'text' => $text,
'active' => ( $url == $title->getLocalUrl() ),
'class' => $linkClasses,
);
$insertUrls = array( 'notifications' => $notificationsLink );
if ( $wgEchoShowFullNotificationsLink ) {
$personal_urls = wfArrayInsertAfter( $personal_urls, $insertUrls, 'mytalk' );
} else {
$personal_urls = wfArrayInsertAfter( $personal_urls, $insertUrls, 'userpage' );
}
$personal_urls = wfArrayInsertAfter( $personal_urls, $insertUrls, 'userpage' );
return true;
}
@ -672,7 +669,7 @@ class EchoHooks {
* @return bool true in all cases
*/
public static function makeGlobalVariablesScript( &$vars, OutputPage $outputPage ) {
global $wgEchoShowFullNotificationsLink, $wgEchoHelpPage, $wgEchoMaxNotificationCount;
global $wgEchoHelpPage, $wgEchoMaxNotificationCount;
$user = $outputPage->getUser();
// Provide info for the Overlay
@ -680,8 +677,6 @@ class EchoHooks {
$timestamp = new MWTimestamp( wfTimestampNow() );
if ( ! $user->isAnon() ) {
$vars['wgEchoOverlayConfiguration'] = array(
'notifications-link-full' => $wgEchoShowFullNotificationsLink,
'timestamp' => $timestamp->getTimestamp( TS_UNIX ),
'notification-count' => EchoNotificationController::getFormattedNotificationCount( $user ),
'max-notification-count' => $wgEchoMaxNotificationCount,
);

View file

@ -20,14 +20,14 @@ class EchoNotificationController {
$memcKey = wfMemcKey( 'echo-notification-count', $user->getId(), $wgEchoConfig['version'] );
if ( $cached && $wgMemc->get( $memcKey ) !== false ) {
return $wgMemc->get( $memcKey );
return intval( $wgMemc->get( $memcKey ) );
}
$count = $wgEchoBackend->getNotificationCount( $user, $dbSource );
$wgMemc->set( $memcKey, $count, 86400 );
return $count;
return intval( $count );
}
/**

View file

@ -0,0 +1,22 @@
/* We have to include the #pt-notifications selector due to monobook */
#pt-notifications .mw-echo-notifications-badge {
min-width: 7px;
border-radius: 2px;
padding: 0.3em 0.5em 0.25em 0.5em;
margin-left: -4px;
text-align: center;
background-color: #d2d2d2;
font-weight: bold;
color: white;
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
cursor: pointer;
}
#pt-notifications .mw-echo-notifications-badge:hover {
background-color: #c2c2c2;
}
#pt-notifications .mw-echo-notifications-badge.mw-echo-unread-notifications {
background-color: #cc0000;
}
#pt-notifications .mw-echo-notifications-badge.mw-echo-unread-notifications:hover {
background-color: #bf0000;
}

View file

@ -0,0 +1,4 @@
/* No rounded corners for modern skin */
#pt-notifications .mw-echo-notifications-badge {
border-radius: 0;
}

View file

@ -22,7 +22,7 @@
position: absolute;
z-index: 101;
top: 21px;
left: -9px;
left: -5px;
}
#p-personal .mw-echo-overlay {
@ -136,14 +136,6 @@
position: relative;
}
#pt-notifications .mw-badge {
margin-left: 3px;
}
#pt-notifications a.mw-echo-short-link .mw-badge {
margin-left: -5px;
}
.mw-echo-overlay-none {
font-size: 13px;
border-bottom: 1px solid #DDDDDD;

View file

@ -5,24 +5,15 @@
mw.echo.overlay = {
'updateCount' : function( newCount ) {
// Accomodate '10' or '100+'. Numbers need to be
// passed as numbers for correct behavior of '0'.
if ( !isNaN( newCount ) ) {
newCount = Number( newCount );
}
if ( mw.echo.overlay.configuration['notifications-link-full'] ) {
$( '#pt-notifications > a' )
.text( mw.msg( 'echo-link' ) )
.badge( newCount, true, true );
var $badge = $( '.mw-echo-notifications-badge' );
$badge.text( newCount );
// newCount could be '99+' or another string.
// Checking for number as well just to be paranoid.
if ( newCount !== '0' && newCount !== 0 ) {
$badge.addClass( 'mw-echo-unread-notifications' );
} else {
$( '#pt-notifications > a' )
.addClass( 'mw-echo-short-link' )
.text( '' )
.badge( newCount, true, true );
$badge.removeClass( 'mw-echo-unread-notifications' );
}
mw.echo.overlay.notificationCount = newCount;
},
'configuration' : mw.config.get( 'wgEchoOverlayConfiguration' ),
@ -30,7 +21,6 @@
'buildOverlay' : function( callback ) {
var notificationLimit,
$overlay = $( '<div></div>' ).addClass( 'mw-echo-overlay' ),
$link = $( '#pt-notifications a' ),
$prefLink = $( '#pt-preferences a' ),
count = 0,
Api = new mw.Api();
@ -62,6 +52,9 @@
$overlayFooter,
$markReadButton;
if ( unreadTotalCount !== undefined ) {
mw.echo.overlay.updateCount( unreadTotalCount );
}
$ul.css( 'max-height', notificationLimit * 95 + 'px' );
$.each( notifications.index, function( index, id ) {
var data = notifications.list[id],
@ -166,9 +159,9 @@
// add link to notifications archive
$overlayFooter.append(
$link
.clone()
$( '<a>' )
.attr( 'id', 'mw-echo-overlay-link' )
.attr( 'href', mw.util.wikiGetlink( 'Special:Notifications' ) )
.text( mw.msg( 'echo-overlay-link' ) )
);
@ -202,17 +195,13 @@
}
},
'err' : function() {
window.location.href = $link.attr( 'href' );
window.location.href = $( '#pt-notifications a' ).attr( 'href' );
}
} );
}
};
mw.echo.overlay.notificationCount = mw.echo.overlay.configuration['notification-count'];
$( function() {
mw.echo.overlay.updateCount( mw.echo.overlay.notificationCount );
var $link = $( '#pt-notifications a' );
if ( ! $link.length ) {
return;