jenkins-bot has submitted this change and it was merged.
Change subject: Fix the badge icon update
......................................................................
Fix the badge icon update
Make sure that when the seen state changes, the badge icon adjusts
in case there are two different icons for seen and unseen states.
Also organize a bit the unseen/unread status in initialization.
And separate and update the icons in the popup head to always fit
the status and icon of the badge.
Bug: T111432
Change-Id: I891a36c6eace9302b370a3efaf5aa6f57192c17f
---
M modules/ext.echo.init.js
M modules/ooui/mw.echo.ui.NotificationBadgeWidget.js
2 files changed, 30 insertions(+), 20 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/ext.echo.init.js b/modules/ext.echo.init.js
index 2c5e016..6251c68 100644
--- a/modules/ext.echo.init.js
+++ b/modules/ext.echo.init.js
@@ -17,8 +17,8 @@
$existingMessageLink = $( '#pt-notifications_message a'
),
numAlerts = $existingAlertLink.text(),
numMessages = $existingMessageLink.text(),
- hasUnreadAlerts = $existingAlertLink.hasClass(
'mw-echo-unseen-notifications' ),
- hasUnreadMessages = $existingMessageLink.hasClass(
'mw-echo-unseen-notifications' ),
+ hasUnseenAlerts = $existingAlertLink.hasClass(
'mw-echo-unseen-notifications' ),
+ hasUnseenMessages = $existingMessageLink.hasClass(
'mw-echo-unseen-notifications' ),
// Store links
links = {
notifications: $( '#pt-notifications_message a'
).attr( 'href' ),
@@ -30,7 +30,7 @@
type: 'message',
markReadWhenSeen: false,
numItems: numMessages,
- hasUnread: hasUnreadMessages,
+ hasUnseen: hasUnseenMessages,
badgeIcon: 'speechBubble',
links: links
} );
@@ -41,10 +41,10 @@
type: 'alert',
markReadWhenSeen: true,
numItems: numAlerts,
- hasUnread: hasUnreadAlerts,
+ hasUnseen: hasUnseenAlerts,
badgeIcon: {
- read: 'bell',
- unread: 'bellOn'
+ seen: 'bell',
+ unseen: 'bellOn'
},
links: links
} );
diff --git a/modules/ooui/mw.echo.ui.NotificationBadgeWidget.js
b/modules/ooui/mw.echo.ui.NotificationBadgeWidget.js
index a464175..dbd23a7 100644
--- a/modules/ooui/mw.echo.ui.NotificationBadgeWidget.js
+++ b/modules/ooui/mw.echo.ui.NotificationBadgeWidget.js
@@ -9,15 +9,15 @@
* @param {Object} [config] Configuration object
* @cfg {string} [type='alert'] Notification type 'alert' or 'message'
* @cfg {number} [numItems=0] How many items are in the button display
- * @cfg {boolean} [hasUnread=false] Whether there are unread items
+ * @cfg {boolean} [hasUnseen=false] Whether there are unseen items
* @cfg {boolean} [markReadWhenSeen=false] Mark all notifications as
read on open
* @cfg {string|Object} [badgeIcon] The icons to use for this button.
* If this is a string, it will be used as the icon regardless of the
state.
* If it is an object, it must include
- * the properties 'unread' and 'read' with icons attached to both. For
example:
+ * the properties 'unseen' and 'seen' with icons attached to both. For
example:
* { badgeIcon: {
- * unread: 'bellOn',
- * read: 'bell'
+ * unseen: 'bellOn',
+ * seen: 'bell'
* } }
*/
mw.echo.ui.NotificationBadgeWidget = function
MwEchoUiNotificationBadgeButtonPopupWidget( config ) {
@@ -31,14 +31,13 @@
this.type = config.type || 'alert';
this.numItems = config.numItems || 0;
- this.hasUnread = !!config.hasUnread;
this.badgeIcon = config.badgeIcon || {};
this.markReadWhenSeen = !!config.markReadWhenSeen;
this.hasRunFirstTime = false;
buttonFlags = [ 'primary' ];
- if ( this.hasUnread ) {
+ if ( !!config.hasUnseen ) {
buttonFlags.push( 'unseen' );
}
@@ -89,11 +88,6 @@
framed: false,
flags: buttonFlags,
label: this.numItems,
- icon: (
- typeof this.badgeIcon === 'string' ?
- this.badgeIcon :
- this.badgeIcon[ this.hasUnread ? 'unread' :
'read' ]
- ),
popup: {
$content: this.notificationsWidget.$element,
$footer: $footer,
@@ -104,9 +98,11 @@
label: mw.msg( 'echo-notification-' + this.type
+ '-text-only' )
}
}, config ) );
-
// HACK: Add an icon to the popup head label
- this.popup.$head.prepend( new OO.ui.IconWidget( { icon: 'bell'
} ).$element );
+ this.popupHeadIcon = new OO.ui.IconWidget();
+ this.popup.$head.prepend( this.popupHeadIcon.$element );
+
+ this.updateIcon( !!config.hasUnseen );
// Mark all as read button
this.markAllReadButton = new OO.ui.ButtonWidget( {
@@ -119,7 +115,7 @@
this.popup.closeButton.toggle( false );
// Add the 'mark all as read' button to the header
this.popup.$head.append( this.markAllReadButton.$element );
- this.markAllReadButton.toggle( !this.markReadWhenSeen &&
this.hasUnread );
+ this.markAllReadButton.toggle( !this.markReadWhenSeen &&
!!config.hasUnseen );
// Events
this.markAllReadButton.connect( this, { click:
'onMarkAllReadButtonClick' } );
@@ -143,6 +139,19 @@
OO.mixinClass( mw.echo.ui.NotificationBadgeWidget,
OO.ui.mixin.PendingElement );
/**
+ * Update the badge icon with the read/unread versions if they exist.
+ *
+ * @param {boolean} hasUnseen Widget has unseen notifications
+ */
+ mw.echo.ui.NotificationBadgeWidget.prototype.updateIcon = function (
hasUnseen ) {
+ var icon = typeof this.badgeIcon === 'string' ?
+ this.badgeIcon :
+ this.badgeIcon[ hasUnseen ? 'unseen' : 'seen' ];
+ this.setIcon( icon );
+ this.popupHeadIcon.setIcon( icon );
+ };
+
+ /**
* Update the badge state and label based on changes to the model
*/
mw.echo.ui.NotificationBadgeWidget.prototype.updateBadge = function () {
@@ -152,6 +161,7 @@
// Update numbers and seen/unseen state
this.setFlags( { unseen: !!unseenCount } );
this.setLabel( String( unreadCount ) );
+ this.updateIcon( !!unseenCount );
};
/**
--
To view, visit https://gerrit.wikimedia.org/r/235885
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I891a36c6eace9302b370a3efaf5aa6f57192c17f
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
