Merge "Add MobileNotificationsWrapper for Mobile display"

Resources.php

@@ -30,6 +30,40 @@ $echoResourceTemplate = array(
 );
 
 $wgResourceModules += array(
+	'ext.echo.ui.desktop' => $echoResourceTemplate + array(
+		'scripts' => array(
+			'ooui/mw.echo.ui.BadgeLinkWidget.js',
+			'ooui/mw.echo.ui.NotificationBadgeWidget.js',
+		),
+		'styles' => array(
+			'ooui/styles/mw.echo.ui.NotificationBadgeWidget.less',
+		),
+		'skinStyles' => array(
+			'monobook' => array(
+				'ooui/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less'
+			),
+			'modern' => array(
+				'ooui/styles/mw.echo.ui.NotificationBadgeWidget.modern.less'
+			),
+			'vector' => array(
+				'ooui/styles/mw.echo.ui.NotificationBadgeWidget.vector.less'
+			),
+		),
+		'dependencies' => array(
+			'ext.echo.ui',
+			'ext.echo.styles.badge',
+		),
+		'targets' => array( 'desktop' ),
+	),
+	'ext.echo.ui.mobile' => $echoResourceTemplate + array(
+		'scripts' => array(
+			'ooui/mobile/mw.echo.ui.MobileNotificationsWrapper.js',
+		),
+		'dependencies' => array(
+			'ext.echo.ui',
+		),
+		'targets' => array( 'mobile', 'desktop' ),
+	),
 	'ext.echo.ui' => $echoResourceTemplate + array(
 		'scripts' => array(
 			'ooui/mw.echo.ui.js',
@@ -40,8 +74,6 @@ $wgResourceModules += array(
 			'ooui/mw.echo.ui.BundledNotificationGroupWidget.js',
 			'ooui/mw.echo.ui.ActionMenuPopupWidget.js',
 			'ooui/mw.echo.ui.MenuItemWidget.js',
-			'ooui/mw.echo.ui.BadgeLinkWidget.js',
-			'ooui/mw.echo.ui.NotificationBadgeWidget.js'
 		),
 		'styles' => array(
 			'ooui/styles/mw.echo.ui.overlay.less',
@@ -51,24 +83,19 @@ $wgResourceModules += array(
 			'ooui/styles/mw.echo.ui.NotificationGroupItemWidget.less',
 			'ooui/styles/mw.echo.ui.BundledNotificationGroupWidget.less',
 			'ooui/styles/mw.echo.ui.MenuItemWidget.less',
-			'ooui/styles/mw.echo.ui.NotificationBadgeWidget.less'
 		),
 		'skinStyles' => array(
 			'monobook' => array(
 				'ooui/styles/mw.echo.ui.NotificationsWidget.monobook.less',
-				'ooui/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less'
 			),
 			'modern' => array(
 				'ooui/styles/mw.echo.ui.NotificationItemWidget.modern.less',
-				'ooui/styles/mw.echo.ui.NotificationBadgeWidget.modern.less'
 			),
 			'vector' => array(
 				'ooui/styles/mw.echo.ui.overlay.vector.less',
-				'ooui/styles/mw.echo.ui.NotificationBadgeWidget.vector.less'
 			),
 		),
 		'dependencies' => array(
-			'ext.echo.styles.badge',
 			'ext.echo.styles.notifications',
 			'ext.echo.dm',
 			'oojs-ui-core',
@@ -229,7 +256,7 @@ $wgResourceModules += array(
 		'dependencies' => array(
 			'mediawiki.ui.button',
 			'mediawiki.api',
-			'ext.echo.ui',
+			'ext.echo.ui.desktop',
 		),
 		'messages' => array(
 			'echo-load-more-error',

modules/ext.echo.init.js

@@ -40,7 +40,7 @@
 				} );
 
 			// Load the ui
-			mw.loader.using( 'ext.echo.ui', function () {
+			mw.loader.using( 'ext.echo.ui.desktop', function () {
 				var messageNotificationsModel, alertNotificationsModel,
 					momentOrigLocale = moment.locale();
 

modules/ooui/mobile/mw.echo.ui.MobileNotificationsWrapper.js

@@ -0,0 +1,82 @@
+( function ( mw ) {
+	/**
+	 * Mobile wrapper for the notifications widget, for mobile view.
+	 *
+	 * @class
+	 * @extends OO.ui.Widget
+	 * @mixins OO.ui.mixin.PendingElement
+	 *
+	 * @constructor
+	 * @param {mw.echo.dm.NotificationsModel} model Notifications view model
+	 * @param {Object} [config] Configuration object
+	 */
+	mw.echo.ui.MobileNotificationsWrapper = function MwEchoUiMobileNotificationsWrapper( model, config ) {
+		config = config || {};
+
+		// Parent constructor
+		mw.echo.ui.MobileNotificationsWrapper.parent.call( this, config );
+
+		// Mixin constructor
+		OO.ui.mixin.PendingElement.call( this, config );
+
+		this.model = model;
+
+		this.notificationsWidget = new mw.echo.ui.NotificationsWidget(
+			this.model,
+			{
+				markReadWhenSeen: false,
+				$overlay: config.$overlay,
+				label: mw.msg( 'notifications' ),
+				icon: 'bell'
+			}
+		);
+
+		// Events
+		this.model.connect( this, {
+			unreadChange: [ 'emit', 'unreadChange' ],
+			allRead: [ 'emit', 'unreadChange', 0 ]
+		} );
+
+		// Initialize
+		this.$element
+			.append( this.notificationsWidget.$element );
+	};
+
+	/* Initialization */
+
+	OO.inheritClass( mw.echo.ui.MobileNotificationsWrapper, OO.ui.Widget );
+	OO.mixinClass( mw.echo.ui.MobileNotificationsWrapper, OO.ui.mixin.PendingElement );
+
+	/* Events */
+
+	/**
+	 * @event finishLoading
+	 * Notifications have successfully finished being processed and are fully loaded
+	 */
+
+	/**
+	 * @event unreadChange
+	 * @param {number} Number of unread messages
+	 * There was a change in the number of unread notifications
+	 */
+
+	/* Methods */
+
+	/**
+	 * Populate the notifications panel
+	 *
+	 * @return {jQuery.Promise} A promise that is resolved when all notifications
+	 *  were fetched from the API and added to the model and UI.
+	 */
+	mw.echo.ui.MobileNotificationsWrapper.prototype.populate = function () {
+		var widget = this;
+
+		this.pushPending();
+		return this.model.fetchNotifications( true )
+			.always( function () {
+				widget.popPending();
+				widget.emit( 'finishLoading' );
+				widget.promiseRunning = false;
+			} );
+	};
+} )( mediaWiki );

modules/viewmodel/mw.echo.dm.NotificationsModel.js

@@ -295,11 +295,14 @@
 	 * Set the system seen time - the last time we've marked notification as seen
 	 *
 	 * @private
-	 * @param {string} Mediawiki seen timestamp in Mediawiki timestamp format
+	 * @param {string} type Notification type; 'alert', 'message' or 'all'
+	 * @param {string} time Mediawiki seen timestamp in Mediawiki timestamp format
 	 */
-	mw.echo.dm.NotificationsModel.prototype.setSeenTime = function ( time ) {
-		var i,
-			type = $.isArray( this.type ) ? this.type : [ this.type ];
+	mw.echo.dm.NotificationsModel.prototype.setSeenTime = function ( type, time ) {
+		var i, types;
+
+		// Normalize if using 'all'
+		types = type === 'all' ? [ 'alert', 'message' ] : [ type ];
 
 		for ( i = 0; i < type.length; i++ ) {
 			// Update all types
@@ -314,24 +317,31 @@
 	 * @return {string} Mediawiki seen timestamp in Mediawiki timestamp format
 	 */
 	mw.echo.dm.NotificationsModel.prototype.getSeenTime = function ( type ) {
-		type = type || ( $.isArray( this.type ) ? this.type[ 0 ] : this.type );
+		var normalizedType;
 
-		return this.seenTime[ type ];
+		type = type || this.type;
+
+		normalizedType = type === 'all' ?
+			[ 'alert', 'message' ] : [ type ];
+
+		return this.seenTime[ normalizedType[ 0 ] ];
 	};
 
 	/**
 	 * Update the seen timestamp
 	 *
 	 * @param {string|string[]} [type] Notification type
-	 * @return {jQuery.Promise} A promise that resolves with the seen timestamp
 	 * @fires updateSeenTime
 	 */
 	mw.echo.dm.NotificationsModel.prototype.updateSeenTime = function ( type ) {
-		var i, len, promise,
+		var i, len, types,
 			items = this.unseenNotifications.getItems();
 
 		type = type || this.type;
 
+		// If type is "all" or is not given, update both
+		types = type === 'all' ? [ 'alert', 'message' ] : [ type || this.type ];
+
 		// Update the notifications seen status
 		for ( i = 0, len = items.length; i < len; i++ ) {
 			items[ i ].toggleSeen( true );
@@ -340,13 +350,11 @@
 
 		// Only update seenTime in the API locally
 		if ( !this.isForeign() ) {
-			promise = this.api.updateSeenTime( this.getSource(), type );
-		} else {
-			promise = $.Deferred().resolve();
+			for ( i = 0; i < types.length; i++ ) {
+				this.api.updateSeenTime( this.getSource(), types[ i ] )
+					.then( this.setSeenTime.bind( this, types[ i ] ) );
+			}
 		}
-
-		return promise
-			.then( this.setSeenTime.bind( this ) );
 	};
 
 	/**