Bmansurov has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/332901 )
Change subject: Change display of notifications count
......................................................................
Change display of notifications count
Rather than showing the number of notifications at the top rigth corner
of the bell, show the number on top of the bell. The number background
is red when there are un-read notifications. The number will disappear
if all notifications are read.
Bug: T152457
Change-Id: I98f27d63241ae0a0acca55b29c0562f4a7c1b331
---
M includes/skins/SkinMinerva.php
A includes/skins/secondaryButton.mustache
M minerva.less/minerva.variables.less
M resources/mobile.notifications.overlay/NotificationsOverlay.js
M resources/skins.minerva.base.styles/ui.less
5 files changed, 50 insertions(+), 52 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/01/332901/1
diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php
index 3efd434..9d0802f 100644
--- a/includes/skins/SkinMinerva.php
+++ b/includes/skins/SkinMinerva.php
@@ -310,35 +310,6 @@
}
/**
- * Creates element relating to secondary button
- * @param string $title Title attribute value of secondary button
- * @param string $url of secondary button
- * @param string $spanLabel text of span associated with secondary
button.
- * @param string $spanClass the class of the secondary button
- * @return string html relating to button
- */
- protected function createSecondaryButton( $title, $url, $spanLabel,
$spanClass ) {
- return Html::openElement( 'a', [
- 'title' => $title,
- 'href' => $url,
- 'class' => MobileUI::iconClass(
'notifications', 'element',
- 'user-button main-header-button
icon-32px' ),
- 'id' => 'secondary-button',
- ] ) .
- Html::element(
- 'span',
- [ 'class' => 'label' ],
- $title
- ) .
- Html::closeElement( 'a' ) .
- Html::element(
- 'span',
- [ 'class' => $spanClass ],
- $spanLabel
- );
- }
-
- /**
* Prepares the user button.
* @param QuickTemplate $tpl
*/
@@ -383,16 +354,19 @@
}
if ( $notificationsTitle ) {
- $spanClass = $isZero ? 'zero' : '';
- $spanClass .= ' notification-count';
- $spanClass .= $hasUnseen ? ' notification-unseen' : '';
-
$url = $notificationsTitle->getLocalURL(
[ 'returnto' =>
$currentTitle->getPrefixedText() ] );
- $tpl->set( 'secondaryButton',
- $this->createSecondaryButton(
$notificationsMsg, $url, $countLabel, $spanClass )
- );
+ $templateParser = new TemplateParser( __DIR__ );
+ $secondaryButton = $templateParser->processTemplate(
'secondaryButton', [
+ 'class' => MobileUI::iconClass(
'notifications' ),
+ 'title' => $notificationsMsg,
+ 'url' => $url,
+ 'notificationCount' => $countLabel,
+ 'isNotificationCountZero' => $isZero,
+ 'hasUnseenNotifications' => $hasUnseen
+ ] );
+ $tpl->set( 'secondaryButton', $secondaryButton );
}
}
diff --git a/includes/skins/secondaryButton.mustache
b/includes/skins/secondaryButton.mustache
new file mode 100644
index 0000000..765f4d4
--- /dev/null
+++ b/includes/skins/secondaryButton.mustache
@@ -0,0 +1,11 @@
+<a href="{{href}}" title="{{title}}"
+ class="{{class}} user-button main-header-button" id="secondary-button">
+ {{title}}
+</a>
+<div title="{{title}}" class="notification-count
+ {{#isNotificationCountZero}}zero{{/isNotificationCountZero}}
+
{{#hasUnseenNotifications}}notification-unseen{{/hasUnseenNotifications}}">
+ <span>
+ {{notificationCount}}
+ </span>
+</div>
diff --git a/minerva.less/minerva.variables.less
b/minerva.less/minerva.variables.less
index 9d20b40..c42d15e 100644
--- a/minerva.less/minerva.variables.less
+++ b/minerva.less/minerva.variables.less
@@ -104,3 +104,8 @@
@lastModifiedBarTextColor: @colorGray6;
@footerBorderColor: @grayLight;
+
+@notificationBackgroundRead: @colorGray14;
+@notificationColorRead: @colorGray5;
+@notificationBackgroundUnread: @colorDestructive;
+@notificationColorUnread: #fff;
diff --git a/resources/mobile.notifications.overlay/NotificationsOverlay.js
b/resources/mobile.notifications.overlay/NotificationsOverlay.js
index d33849c..512bea4 100644
--- a/resources/mobile.notifications.overlay/NotificationsOverlay.js
+++ b/resources/mobile.notifications.overlay/NotificationsOverlay.js
@@ -172,7 +172,7 @@
this.count =
this.controller.manager.getUnreadCounter().getCappedNotificationCount( count );
if ( this.count > 0 ) {
- $badgeCounter.text(
+ $badgeCounter.find( 'span' ).text(
mw.msg( 'echo-badge-count',
mw.language.convertNumber( this.count ) )
).show();
} else {
diff --git a/resources/skins.minerva.base.styles/ui.less
b/resources/skins.minerva.base.styles/ui.less
index ffbc386..3a394c6 100644
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@@ -319,25 +319,33 @@
}
.notification-count {
- text-indent: 0;
- display: inline-block;
- font-weight: bold;
- border-radius: @borderRadius;
- height: 1.2em;
- line-height: 1.2em;
- min-width: 1em;
- margin: 0.6em 0.6em 0 0;
- padding: 0 0.1em;
- text-align: center;
position: absolute;
+ top: 0;
right: 0;
- top: -0.1em;
- color: @colorGray7;
- background: #d2d2d2;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ height: @iconSize;
+ width: @iconSize;
+ background: @notificationBackgroundRead;
+ color: @notificationColorRead;
+ cursor: pointer;
+ font-weight: bold;
+ text-align: center;
+
+ span {
+ border-radius: @iconSize;
+ border: 1px solid @notificationColorRead;
+ display: block;
+ }
&.notification-unseen {
- color: #fff;
- background: #c91f2c;
+ color: @notificationColorUnread;
+
+ span {
+ background: @notificationBackgroundUnread;
+ border-color: @notificationBackgroundUnread;
+ }
}
&.zero {
--
To view, visit https://gerrit.wikimedia.org/r/332901
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I98f27d63241ae0a0acca55b29c0562f4a7c1b331
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: branding
Gerrit-Owner: Bmansurov <bmansu...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
