diff --git a/Resources.php b/Resources.php index 05b725b13..e9e1e9ba2 100644 --- a/Resources.php +++ b/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' ), diff --git a/i18n/en.json b/i18n/en.json index 209e53627..e59af3bdb 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -214,6 +214,7 @@ "echo-overlay-title": "Notifications", "echo-overlay-title-overflow": "{{PLURAL:$1|Notification|Notifications}} (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", diff --git a/i18n/qqq.json b/i18n/qqq.json index 24988f78f..fea8e34c3 100644 --- a/i18n/qqq.json +++ b/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", diff --git a/modules/icons/apex/badgeicons.json b/modules/icons/apex/badgeicons.json index 5a101ee86..85ff3ca8e 100644 --- a/modules/icons/apex/badgeicons.json +++ b/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" ] } } } diff --git a/modules/icons/mediawiki/badgeicons.json b/modules/icons/mediawiki/badgeicons.json index 5a101ee86..85ff3ca8e 100644 --- a/modules/icons/mediawiki/badgeicons.json +++ b/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" ] } } } diff --git a/modules/nojs/mw.echo.icon.less b/modules/nojs/mw.echo.icon.less deleted file mode 100644 index 4401066b1..000000000 --- a/modules/nojs/mw.echo.icon.less +++ /dev/null @@ -1,5 +0,0 @@ -@import 'mediawiki.mixins'; - -.oo-ui-icon-doubleCheck { - .background-image('../icons/double-check.svg'); -} diff --git a/modules/styles/mw.echo.ui.ConfirmationPopupWidget.less b/modules/styles/mw.echo.ui.ConfirmationPopupWidget.less new file mode 100644 index 000000000..f0d8de702 --- /dev/null +++ b/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; + } + } +} diff --git a/modules/ui/mw.echo.ui.ConfirmationPopupWidget.js b/modules/ui/mw.echo.ui.ConfirmationPopupWidget.js new file mode 100644 index 000000000..a0de79200 --- /dev/null +++ b/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( + $( '
' ) + .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 );