From f449c6878073c78fd32a2c9df2f2543b67e2cb68 Mon Sep 17 00:00:00 2001 From: Moriel Schottlender Date: Tue, 23 Aug 2016 13:57:04 -0700 Subject: [PATCH] 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 | 3 +- i18n/en.json | 1 + i18n/qqq.json | 5 +- modules/icons/apex/badgeicons.json | 9 +++ modules/icons/mediawiki/badgeicons.json | 9 +++ modules/nojs/mw.echo.icon.less | 5 -- .../mw.echo.ui.ConfirmationPopupWidget.less | 24 +++++++ .../ui/mw.echo.ui.ConfirmationPopupWidget.js | 67 +++++++++++++++++++ 8 files changed, 115 insertions(+), 8 deletions(-) delete mode 100644 modules/nojs/mw.echo.icon.less create mode 100644 modules/styles/mw.echo.ui.ConfirmationPopupWidget.less create mode 100644 modules/ui/mw.echo.ui.ConfirmationPopupWidget.js 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 );