Adjust unread counter position based on length

Move unread counter to the left (or right, in RTL)
when it's longuer than 2 characters so as to
have harmonious spacing between the counters and
the next link on the toolbar.

Bug: T142454
Change-Id: Ib8aa673cf9e60ade80490ea0eccb7453d3747cd0
This commit is contained in:
Stephane Bisson 2016-12-20 13:40:54 -05:00
parent c82b58aff1
commit 01a1924187
3 changed files with 15 additions and 0 deletions

View file

@ -937,6 +937,10 @@ class EchoHooks {
$msgLinkClasses[] = 'mw-echo-notifications-badge-all-read';
}
if ( $msgCount > MWEchoNotifUser::MAX_BADGE_COUNT ) {
$msgLinkClasses[] = 'mw-echo-notifications-badge-long-label';
}
if (
$alertCount != 0 && // no unread notifications
$alertNotificationTimestamp !== false && // should already always be false if count === 0
@ -948,6 +952,10 @@ class EchoHooks {
$alertLinkClasses[] = 'mw-echo-notifications-badge-all-read';
}
if ( $msgCount > MWEchoNotifUser::MAX_BADGE_COUNT ) {
$alertLinkClasses[] = 'mw-echo-notifications-badge-long-label';
}
$alertLink = [
'href' => $url,
'text' => $alertText,

View file

@ -58,6 +58,12 @@
color: #fff;
}
&.mw-echo-notifications-badge-long-label {
&:after {
left: 35%;
}
}
&.mw-echo-notifications-badge-all-read {
opacity: 0.625;

View file

@ -61,6 +61,7 @@
this.$element
.toggleClass( 'mw-echo-notifications-badge-all-read', !numItems )
.toggleClass( 'mw-echo-notifications-badge-long-label', label.length > 2 )
.attr( 'data-counter-num', numItems )
.attr( 'data-counter-text', label );
};