Add confirmation popup widget

Mainly used for mobile actions, and should be appended to the
overlay - this widget assumes it should appear and then fade out
with some confirmation message.

Also moved 'doubleCheck' icon to the ooui definitions, including
an inverted icon that is necessary for this widget.

Bug: T141404
Change-Id: I67a44962eaee6b7bd8cac26dcb5277177fa5d224

Resources.php

@@ -76,6 +76,7 @@ $wgResourceModules += array(
 			'ui/mw.echo.ui.MenuItemWidget.js',
 			'ui/mw.echo.ui.FooterNoticeWidget.js',
 			'ui/mw.echo.ui.NotificationsWrapper.js',
+			'ui/mw.echo.ui.ConfirmationPopupWidget.js',
 			'ext.echo.moment-hack.js',
 		),
 		'styles' => array(
@@ -91,6 +92,7 @@ $wgResourceModules += array(
 			'styles/mw.echo.ui.MenuItemWidget.less',
 			'styles/mw.echo.ui.FooterNoticeWidget.less',
 			'styles/mw.echo.ui.NotificationsWrapper.less',
+			'styles/mw.echo.ui.ConfirmationPopupWidget.less',
 		),
 		'skinStyles' => array(
 			'monobook' => array(
@@ -346,7 +348,6 @@ $wgResourceModules += array(
 	'ext.echo.styles.special' => $echoResourceTemplate + array(
 		'position' => 'top',
 		'styles' => array(
-			'nojs/mw.echo.icon.less',
 			'nojs/mw.echo.special.less',
 		),
 		'targets' => array( 'desktop', 'mobile' ),

i18n/en.json

@@ -214,6 +214,7 @@
 	"echo-overlay-title": "<b>Notifications</b>",
 	"echo-overlay-title-overflow": "<b>{{PLURAL:$1|Notification|Notifications}}</b> (showing $1 of $2 unread)",
 	"echo-mark-all-as-read": "Mark all as read",
+	"echo-mark-all-as-read-confirmation": "$1 {{PLURAL:$1|notification|notifications}} marked as read",
 	"echo-mark-wiki-as-read": "Mark all as read in selected wiki: $1",
 	"echo-date-today": "Today",
 	"echo-date-yesterday": "Yesterday",

i18n/qqq.json

@@ -206,8 +206,9 @@
 	"echo-overlay-link": "Link to \"all notifications\" at the bottom of the overlay.\n{{Identical|All notifications}}",
 	"echo-overlay-title": "Title at the top of the notifications overlay. Should include bold tags.\n{{Identical|Notification}}",
 	"echo-overlay-title-overflow": "Title at the top of the notifications overlay when there are additional unread notifications that are not being shown.\n\nParameters:\n* $1 - the number of unread notifications being shown\n* $2 - the total number of unread notifications that exist",
-	"echo-mark-all-as-read": "Text for button that marks all unread notifications as read. Keep this short as possible.\n{{Identical|Mark all as read}}",
-	"echo-mark-wiki-as-read": "Text for button that marks all unread notifications as read in a specific wiki. Keep this short as possible.\n{{Identical|Mark all as read}}\n\nParameters:\n* $1 - The human readable name of the selected wiki",
+	"echo-mark-all-as-read": "Text for button that marks all unread notifications as read. Keep this as short as possible.\n{{Identical|Mark all as read}}",
+	"echo-mark-all-as-read-confirmation": "Text for the confirmation message that appers after the user marks all unread notifications as read. Keep this as short as possible\n\nParameters:\n* $1 - The number of notifications that were marked as read",
+	"echo-mark-wiki-as-read": "Text for button that marks all unread notifications as read in a specific wiki. Keep this as short as possible.\n{{Identical|Mark all as read}}\n\nParameters:\n* $1 - The human readable name of the selected wiki",
 	"echo-date-today": "The header text for today's notification section.\n{{Identical|Today}}",
 	"echo-date-yesterday": "The header text for yesterday's notification section.\n{{Identical|Yesterday}}",
 	"echo-load-more-error": "Error message for errors in loading more notifications",

modules/icons/apex/badgeicons.json

@@ -1,11 +1,20 @@
 {
 	"prefix": "oo-ui-icon",
+	"variants": {
+		"invert": {
+			"color": "#FFFFFF"
+		}
+	},
 	"images": {
 		"bell": {
 			"file": "../bell.svg"
 		},
 		"tray": {
 			"file": "../tray.svg"
+		},
+		"doubleCheck": {
+			"file": "../double-check.svg",
+			"variants": [ "invert" ]
 		}
 	}
 }

modules/icons/mediawiki/badgeicons.json

@@ -1,11 +1,20 @@
 {
 	"prefix": "oo-ui-icon",
+	"variants": {
+		"invert": {
+			"color": "#FFFFFF"
+		}
+	},
 	"images": {
 		"bell": {
 			"file": "../bell.svg"
 		},
 		"tray": {
 			"file": "../tray.svg"
+		},
+		"doubleCheck": {
+			"file": "../double-check.svg",
+			"variants": [ "invert" ]
 		}
 	}
 }

modules/nojs/mw.echo.icon.less

@@ -1,5 +0,0 @@
-@import 'mediawiki.mixins';
-
-.oo-ui-icon-doubleCheck {
-	.background-image('../icons/double-check.svg');
-}

modules/styles/mw.echo.ui.ConfirmationPopupWidget.less

@@ -0,0 +1,24 @@
+.mw-echo-ui-confirmationPopupWidget {
+	position: relative;
+	bottom: 1em;
+	width: 100%;
+	text-align: center;
+
+	&-popup {
+		display: inline-block;
+		background-color: #333;
+		border-radius: 0.5em;
+		padding: 0.5em 1em;
+		text-align: left;
+		color: white;
+
+		span {
+			vertical-align: middle;
+		}
+
+		.oo-ui-iconElement-icon {
+			display: inline-block;
+			margin-right: 0.5em;
+		}
+	}
+}

modules/ui/mw.echo.ui.ConfirmationPopupWidget.js

@@ -0,0 +1,67 @@
+( function ( mw, $ ) {
+	/**
+	 * Confirmation overlay widget, especially for mobile display.
+	 * The behavior of this widget is to appear with a given confirmation
+	 * message and then disapear after a given interval.
+	 *
+	 * @class
+	 * @extends OO.ui.Widget
+	 * @mixins OO.ui.mixin.LabelElement
+	 * @mixins OO.ui.mixin.IconElement
+	 *
+	 * @constructor
+	 * @param {Object} [config] Configuration object
+	 * @cfg {number} [interval=2000] The number of milliseconds that it takes
+	 *  for the popup to disappear after appearing.
+	 */
+	mw.echo.ui.ConfirmationPopupWidget = function MwEchoUiConfirmationPopupWidget( config ) {
+		config = config || {};
+
+		// Parent constructor
+		mw.echo.ui.ConfirmationPopupWidget.parent.call( this, config );
+
+		// Mixin constructor
+		OO.ui.mixin.LabelElement.call( this, config );
+		OO.ui.mixin.IconElement.call( this, $.extend( { icon: 'doubleCheck' }, config ) );
+
+		this.interval = config.interval || 2000;
+
+		this.$element
+			.addClass( 'mw-echo-ui-confirmationPopupWidget' )
+			.append(
+				$( '<div>' )
+					.addClass( 'mw-echo-ui-confirmationPopupWidget-popup' )
+					.append( this.$icon, this.$label )
+			)
+			// We're using explicit hide here because the widget uses
+			// animated fadeOut
+			.hide();
+	};
+
+	/* Initialization */
+
+	OO.inheritClass( mw.echo.ui.ConfirmationPopupWidget, OO.ui.Widget );
+	OO.mixinClass( mw.echo.ui.ConfirmationPopupWidget, OO.ui.mixin.LabelElement );
+	OO.mixinClass( mw.echo.ui.ConfirmationPopupWidget, OO.ui.mixin.IconElement );
+
+	/**
+	 * Show the widget and then animate its fade out.
+	 */
+	mw.echo.ui.ConfirmationPopupWidget.prototype.showAnimated = function () {
+		// OOUI removes the oo-ui-image-invert class when it is initialized
+		// without explicit flag classes, so we have to re-add this when we
+		// display the icon for the icon to be inverted
+		this.$icon.addClass( 'oo-ui-image-invert' );
+		this.$element.show();
+		setTimeout( this.hide.bind( this ), this.interval );
+	};
+
+	/**
+	 * Hide the widget by fading it out
+	 *
+	 * @private
+	 */
+	mw.echo.ui.ConfirmationPopupWidget.prototype.hide = function () {
+		this.$element.fadeOut();
+	};
+} )( mediaWiki, jQuery );