Add 'mark as read' as secondary action to unread notifications

Bug: T121935
Change-Id: I0dda7335ba00492c5dc5a6f0e9f2faea1da612bc
This commit is contained in:
Moriel Schottlender 2016-01-21 11:29:21 -08:00
parent 085d6fe3a1
commit 5c67c9110f
4 changed files with 57 additions and 13 deletions

View file

@ -95,6 +95,7 @@ $wgResourceModules += array(
"notification-link-text-expand-alert-count",
"notification-link-text-expand-message-count",
"notification-link-text-expand-all-count",
'echo-notification-markasread',
'echo-notification-alert-text-only',
'echo-notification-message-text-only',
'echo-email-batch-bullet',

View file

@ -56,6 +56,7 @@
"echo-notification-placeholder": "There are no notifications.",
"echo-notification-loginrequired": "You must login to see your notifications.",
"echo-notification-popup-loginrequired": "Please log in to view your notifications.",
"echo-notification-markasread": "Mark as read",
"notification-link-text-expand-all": "Expand all",
"notification-link-text-expand-alert-count": "Expand {{PLURAL:$1|$1 alert|$1 alerts}}",
"notification-link-text-expand-message-count": "Expand {{PLURAL:$1|$1 message|$1 messages}}",

View file

@ -77,6 +77,7 @@
"echo-notification-placeholder": "Label for the text that appears if there are no notifications in the Echo popup.",
"echo-notification-loginrequired": "Message that displays when an anonymous user attempts to view notifications and gets redirect to the login page.",
"echo-notification-popup-loginrequired": "Message that displays when an anonymous user attempts to view notifications in their popup after a session expired.",
"echo-notification-markasread": "Label for the button to mark the notification as read.",
"notification-link-text-expand-all": "Label for the button that expands a bundled notification.\n{{Identical|Expand}}",
"notification-link-text-expand-alert-count": "Label for the button that expands a bundled alert notification.\n\nParameters:\n* $1 - The count of messages that the bundle holds.\n{{Identical|View message}}",
"notification-link-text-expand-message-count": "Label for the button that expands a bundled message notification.\n\nParameters:\n* $1 - The count of messages that the bundle holds.\n{{Identical|View message}}",

View file

@ -38,18 +38,7 @@
classes: [ 'mw-echo-ui-notificationItemWidget-markAsReadButton' ]
} );
this.toggleRead( this.model.isRead() );
this.toggleSeen( this.model.isSeen() );
this.markReadWhenSeen = !!config.markReadWhenSeen;
this.markAsReadButton.toggle( !this.markReadWhenSeen && !this.model.isRead() );
// Events
this.markAsReadButton.connect( this, { click: 'onMarkAsReadButtonClick' } );
this.model.connect( this, {
seen: 'toggleSeen',
read: 'toggleRead'
} );
// Icon
if ( this.model.getIconURL() ) {
@ -143,7 +132,16 @@
this.menuPopupButtonWidget.getMenu().addItems( [ linkButton ] );
}
}
this.menuPopupButtonWidget.toggle( !this.menuPopupButtonWidget.getMenu().isEmpty() );
// Add a "mark as read" secondary action
this.markAsReadSecondary = new OO.ui.ButtonOptionWidget( {
icon: 'check',
framed: false,
data: 'markAsRead',
label: mw.msg( 'echo-notification-markasread' ),
classes: [ 'mw-echo-ui-notificationItemWidget-content-actions-button' ]
} );
// Toggle 'mark as read' functionality
this.toggleMarkAsReadButtons( !this.markReadWhenSeen && !this.model.isRead() );
if ( this.bundle ) {
// In a bundle, we have table layout, so the icon is
@ -202,6 +200,18 @@
);
}
// Events
this.markAsReadButton.connect( this, { click: 'onMarkAsReadButtonClick' } );
this.menuPopupButtonWidget.getMenu().connect( this, { choose: 'onPopupButtonWidgetChoose' } );
this.model.connect( this, {
seen: 'toggleSeen',
read: 'toggleRead'
} );
// Initialize state
this.toggleRead( this.model.isRead() );
this.toggleSeen( this.model.isSeen() );
// HACK: We have to remove the built-in label. When this
// widget is switched to a standalone widget rather than
// an OptionWidget we can get rid of this
@ -234,6 +244,37 @@
this.model.toggleRead( true );
};
/**
* Respond to selecting an item from the popup button widget
*/
mw.echo.ui.NotificationItemWidget.prototype.onPopupButtonWidgetChoose = function ( item ) {
var action = item && item.getData();
if ( action === 'markAsRead' ) {
this.model.toggleRead( true );
}
};
/**
* Toggle the visibility of the 'mark as read' buttons and update the visibility
* of the secondary menu accordingly.
*
* @param {boolean} [show] Show the 'mark as read' buttons
*/
mw.echo.ui.NotificationItemWidget.prototype.toggleMarkAsReadButtons = function ( show ) {
show = show !== undefined ? show : !this.model.isRead();
this.markAsReadButton.toggle( show );
this.markAsReadSecondary.toggle( show );
if ( show ) {
this.menuPopupButtonWidget.getMenu().addItems( [ this.markAsReadSecondary ] );
} else {
this.menuPopupButtonWidget.getMenu().removeItems( [ this.markAsReadSecondary ] );
}
this.menuPopupButtonWidget.toggle( !this.menuPopupButtonWidget.getMenu().isEmpty() );
};
/**
* Reset the status of the notification without touching its user-controlled status.
* For one, remove 'initiallyUnseen' which exists only for the animation to work.
@ -254,7 +295,7 @@
this.read = read !== undefined ? read : !this.read;
this.$element.toggleClass( 'mw-echo-ui-notificationItemWidget-unread', !this.read );
this.markAsReadButton.toggle( !this.read );
this.toggleMarkAsReadButtons( !this.read );
};
/**