Mooeypoo has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/346343 )
Change subject: Use formatted text label for echo badge icons in different skins
......................................................................
Use formatted text label for echo badge icons in different skins
In modern and cologne blue we need to not use the "fancy" styling,
so the label needs to be the full "Alert (x)" / "Notice (y)" label
but for vector and others where the styling depends on raw number
we should make sure the data is passed correctly.
Note that there is a change in the expectation of this widget now,
and two conceptual data displays: the label/text which is the full
length "Alert (x)" / "Notice (y)" text, and the formattedNum which
is only the number, formatted per language.
The CSS then takes either of those as its display.
Cologneblue and Modern skip the badge styling completely and use
the text/label as their display text, while vector and monobook
style the badge but take their number value from the formattedNum
data attribute.
The initialization process sends the full label alongside the number
so the constructor should not double-wrap that value with the message
again.
Bug: T162173
Bug: T141944
Change-Id: I3179ce9100cf92edd1d1cac2235777b433b725f9
---
M Hooks.php
M extension.json
A modules/nojs/mw.echo.badge.cologneblue.less
M modules/nojs/mw.echo.badge.less
M modules/nojs/mw.echo.badge.modern.less
M modules/ui/mw.echo.ui.BadgeLinkWidget.js
M modules/ui/mw.echo.ui.NotificationBadgeWidget.js
7 files changed, 34 insertions(+), 16 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo
refs/changes/43/346343/1
diff --git a/Hooks.php b/Hooks.php
index e12c43b..3df011a 100644
--- a/Hooks.php
+++ b/Hooks.php
@@ -975,7 +975,8 @@
'class' => $alertLinkClasses,
'data' => [
'counter-num' => $alertCount,
- 'counter-text' => $alertFormattedCount,
+ 'counter-text' => $alertText,
+ 'counter-formattedNum' => $alertFormattedCount,
],
];
@@ -990,7 +991,8 @@
'class' => $msgLinkClasses,
'data' => [
'counter-num' => $msgCount,
- 'counter-text' => $msgFormattedCount,
+ 'counter-text' => $msgText,
+ 'counter-formattedNum' => $msgFormattedCount,
],
];
diff --git a/extension.json b/extension.json
index 2dec0f1..dbc4cb0 100644
--- a/extension.json
+++ b/extension.json
@@ -405,16 +405,18 @@
},
"ext.echo.styles.badge": {
"position": "top",
- "styles": [
- "nojs/mw.echo.badge.less"
- ],
"skinStyles": {
"monobook": [
+ "nojs/mw.echo.badge.less",
"nojs/mw.echo.badge.monobook.less"
],
"vector": [
+ "nojs/mw.echo.badge.less",
"nojs/mw.echo.badge.vector.less"
],
+ "cologneblue": [
+ "nojs/mw.echo.badge.cologneblue.less"
+ ],
"modern": [
"nojs/mw.echo.badge.modern.less"
]
diff --git a/modules/nojs/mw.echo.badge.cologneblue.less
b/modules/nojs/mw.echo.badge.cologneblue.less
new file mode 100644
index 0000000..d02690d
--- /dev/null
+++ b/modules/nojs/mw.echo.badge.cologneblue.less
@@ -0,0 +1,9 @@
+.mw-echo-notifications-badge {
+ #pt-notifications-alert &,
+ #pt-notifications-notice & {
+ // Counter
+ &:after {
+ content: attr( data-counter-text );
+ }
+ }
+}
diff --git a/modules/nojs/mw.echo.badge.less b/modules/nojs/mw.echo.badge.less
index 3d267af..d1e0642 100644
--- a/modules/nojs/mw.echo.badge.less
+++ b/modules/nojs/mw.echo.badge.less
@@ -56,7 +56,7 @@
border: 1px solid #fff;
border-radius: 2px;
background-color: @badge-counter-background-seen;
- content: attr( data-counter-text );
+ content: attr( data-counter-formattedNum );
color: #fff;
}
diff --git a/modules/nojs/mw.echo.badge.modern.less
b/modules/nojs/mw.echo.badge.modern.less
index 4848401..869d18d 100644
--- a/modules/nojs/mw.echo.badge.modern.less
+++ b/modules/nojs/mw.echo.badge.modern.less
@@ -1,8 +1,7 @@
.mw-echo-notifications-badge {
#pt-notifications-alert &,
#pt-notifications-notice & {
- &:before {
- z-index: 0;
- }
+ // Counter
+ content: attr( data-counter-text );
}
}
diff --git a/modules/ui/mw.echo.ui.BadgeLinkWidget.js
b/modules/ui/mw.echo.ui.BadgeLinkWidget.js
index dc59e09..a67d25a 100644
--- a/modules/ui/mw.echo.ui.BadgeLinkWidget.js
+++ b/modules/ui/mw.echo.ui.BadgeLinkWidget.js
@@ -51,11 +51,12 @@
*/
mw.echo.ui.BadgeLinkWidget.prototype.setCount = function ( numItems,
label ) {
label = label || numItems;
-
+debugger;
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-formattedNum',
mw.language.convertNumber( numItems ) )
.attr( 'data-counter-text', label );
if ( this.count !== numItems ) {
diff --git a/modules/ui/mw.echo.ui.NotificationBadgeWidget.js
b/modules/ui/mw.echo.ui.NotificationBadgeWidget.js
index 25170f4..e2606b2 100644
--- a/modules/ui/mw.echo.ui.NotificationBadgeWidget.js
+++ b/modules/ui/mw.echo.ui.NotificationBadgeWidget.js
@@ -24,7 +24,7 @@
*/
mw.echo.ui.NotificationBadgeWidget = function
MwEchoUiNotificationBadgeButtonPopupWidget( controller, manager, config ) {
var buttonFlags, allNotificationsButton, preferencesButton,
footerButtonGroupWidget, $footer,
- notice, adjustedTypeString;
+ notice, adjustedTypeString, wrappedBadgeLabel;
config = config || {};
config.links = config.links || {};
@@ -45,8 +45,6 @@
this.controller = controller;
this.manager = manager;
- adjustedTypeString = this.controller.getTypeString() ===
'message' ? 'notice' : this.controller.getTypeString();
-
// Properties
this.types = this.manager.getTypes();
@@ -58,9 +56,12 @@
if ( config.hasUnseen ) {
buttonFlags.push( 'unseen' );
}
+ adjustedTypeString = this.controller.getTypeString() ===
'message' ? 'notice' : this.controller.getTypeString();
+ // This comes already from the server
+ wrappedBadgeLabel = this.badgeLabel;
this.badgeButton = new mw.echo.ui.BadgeLinkWidget( {
- label: this.badgeLabel,
+ label: wrappedBadgeLabel,
type: this.manager.getTypeString(),
numItems: this.numItems,
flags: buttonFlags,
@@ -265,14 +266,18 @@
* Update the badge state and label based on changes to the model
*/
mw.echo.ui.NotificationBadgeWidget.prototype.updateBadge = function () {
- var unreadCount, cappedUnreadCount, badgeLabel;
+ var unreadCount, cappedUnreadCount, badgeLabel,
adjustedTypeString, wrappedBadgeLabel;
unreadCount = this.manager.getUnreadCounter().getCount();
cappedUnreadCount =
this.manager.getUnreadCounter().getCappedNotificationCount( unreadCount );
cappedUnreadCount = mw.language.convertNumber(
cappedUnreadCount );
badgeLabel = mw.message( 'echo-badge-count',
mw.language.convertNumber( cappedUnreadCount ) ).text();
- this.badgeButton.setLabel( badgeLabel );
+ adjustedTypeString = this.controller.getTypeString() ===
'message' ? 'notice' : this.controller.getTypeString();
+ // Messages: echo-notification-notice, echo-notification-alert
+ wrappedBadgeLabel = mw.message( 'echo-notification-' +
adjustedTypeString, badgeLabel ).text();
+
+ this.badgeButton.setLabel( wrappedBadgeLabel );
this.badgeButton.setCount( unreadCount, badgeLabel );
// Update seen state only if the counter is 0
// so we don't run into inconsistencies and have an unseen state
--
To view, visit https://gerrit.wikimedia.org/r/346343
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I3179ce9100cf92edd1d1cac2235777b433b725f9
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <mor...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
