Mooeypoo has uploaded a new change for review.
https://gerrit.wikimedia.org/r/306288
Change subject: [wip] Add 'mark all read' button to the notification overlay
......................................................................
[wip] Add 'mark all read' button to the notification overlay
Depends on Echo change I67a44962eaee6b7bd8
Bug: T141404
Change-Id: Ie43a756f149aeb8608de01706e758a9225822dee
Depends-On: I67a44962eaee6b7bd8
---
M resources/mobile.notifications.overlay/NotificationsOverlay.js
M resources/mobile.notifications.overlay/NotificationsOverlay.less
2 files changed, 90 insertions(+), 10 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/88/306288/1
diff --git a/resources/mobile.notifications.overlay/NotificationsOverlay.js
b/resources/mobile.notifications.overlay/NotificationsOverlay.js
index baf1431..aab5b59 100644
--- a/resources/mobile.notifications.overlay/NotificationsOverlay.js
+++ b/resources/mobile.notifications.overlay/NotificationsOverlay.js
@@ -10,7 +10,7 @@
* @uses mw.Api
*/
NotificationsOverlay = function ( options ) {
- var modelManager, unreadCounter, controller, wrapperWidget,
+ var modelManager, unreadCounter, wrapperWidget,
maxNotificationCount = mw.config.get(
'wgEchoMaxNotificationCount' ),
echoApi = new mw.echo.api.EchoApi();
@@ -29,9 +29,12 @@
mw.echo.config.maxPrioritizedActions = 1;
+ this.count = 0;
+ this.doneLoading = false;
+
unreadCounter = new mw.echo.dm.UnreadNotificationCounter(
echoApi, 'all', maxNotificationCount );
modelManager = new mw.echo.dm.ModelManager( unreadCounter, {
type: [ 'message', 'alert' ] } );
- controller = new mw.echo.Controller(
+ this.controller = new mw.echo.Controller(
echoApi,
modelManager,
{
@@ -39,13 +42,36 @@
}
);
- wrapperWidget = new mw.echo.ui.NotificationsWrapper(
controller, modelManager, {
+ wrapperWidget = new mw.echo.ui.NotificationsWrapper(
this.controller, modelManager, {
$overlay: this.$overlay
} );
+
+ // Mark all read
+ this.markAllReadButton = new OO.ui.ButtonWidget( {
+ icon: 'doubleCheck',
+ title: mw.msg( 'echo-mark-all-as-read' )
+ } );
+ this.markAllReadButton.toggle( false );
+ this.$( '.overlay-header' )
+ .append(
+ $( '<div>' )
+ .addClass(
'notifications-overlay-header-markAllRead' )
+ .append(
+ this.markAllReadButton.$element
+ )
+ );
+ this.confirmationWidget = new
mw.echo.ui.ConfirmationPopupWidget();
+ this.$overlay.append( this.confirmationWidget.$element );
// Events
unreadCounter.connect( this, {
countChange: 'onUnreadCountChange'
+ } );
+ modelManager.connect( this, {
+ update: 'checkShowMarkAllRead'
+ } );
+ this.markAllReadButton.connect( this, {
+ click: 'onMarkAllReadButtonClick'
} );
// Initialize
@@ -56,12 +82,15 @@
// Populate notifications
wrapperWidget.populate()
- .then( controller.updateLocalSeenTime.bind( controller
) )
- .then( this.setBadgeSeen.bind( this ) );
+ .then( this.setDoneLoading.bind( this ) )
+ .then( this.controller.updateLocalSeenTime.bind(
this.controller ) )
+ .then( this.setBadgeSeen.bind( this ) )
+ .then( this.checkShowMarkAllRead.bind( this ) );
};
OO.mfExtend( NotificationsOverlay, Overlay, {
className: 'overlay notifications-overlay navigation-drawer',
+ isBorderBox: false,
/**
* @inheritdoc
* @cfg {Object} defaults Default options hash.
@@ -77,6 +106,49 @@
} ).options
} ),
/**
+ * Set done loading flag for notifications list
+ *
+ * @method
+ */
+ setDoneLoading: function () {
+ this.doneLoading = true;
+ },
+ /**
+ * Check if notifications have finished loading
+ *
+ * @method
+ * @return {boolean} Notifications list has finished loading
+ */
+ isDoneLoading: function () {
+ return this.doneLoading;
+ },
+ /**
+ * Toggle mark all read button
+ *
+ * @method
+ */
+ checkShowMarkAllRead: function () {
+ this.markAllReadButton.toggle(
+ this.isDoneLoading() &&
+ this.controller.manager.hasLocalUnread()
+ );
+ },
+ /**
+ * Respond to mark all read button click
+ */
+ onMarkAllReadButtonClick: function () {
+ var overlay = this,
+ numNotifications =
this.controller.manager.getLocalNotifications().length;
+
+ this.controller.markLocalNotificationsRead()
+ .then( function () {
+ overlay.confirmationWidget.setLabel(
+ mw.msg(
'echo-mark-all-as-read-confirmation', numNotifications )
+ );
+
overlay.confirmationWidget.showAnimated();
+ } );
+ },
+ /**
* Fall back to notifications archive page.
* @method
*/
@@ -91,17 +163,21 @@
*/
onUnreadCountChange: function ( count ) {
var $badgeCounter = this.$badge.find(
'.notification-count' );
- if ( count > 0 ) {
+ this.count = count;
+
+ if ( this.count > 0 ) {
$badgeCounter.text( count ).show();
} else {
$badgeCounter.hide();
}
+
+ this.checkShowMarkAllRead();
},
/**
- * Mark that all the notifications in the badge are seen.
- *
- * @method
- */
+ * Mark that all the notifications in the badge are seen.
+ *
+ * @method
+ */
setBadgeSeen: function () {
this.$badge
.find( '.notification-count' )
diff --git a/resources/mobile.notifications.overlay/NotificationsOverlay.less
b/resources/mobile.notifications.overlay/NotificationsOverlay.less
index 85034b7..f57b292 100644
--- a/resources/mobile.notifications.overlay/NotificationsOverlay.less
+++ b/resources/mobile.notifications.overlay/NotificationsOverlay.less
@@ -7,6 +7,10 @@
// Browser (tested on 4.0.4 and 4.2.1)
padding-top: 0;
+ &-header-markAllRead {
+ padding-right: 1em;
+ }
+
.overlay-header-container {
position: static !important;
}
--
To view, visit https://gerrit.wikimedia.org/r/306288
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ie43a756f149aeb8608de01706e758a9225822dee
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
