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 <mor...@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits