Mooeypoo has uploaded a new change for review.
https://gerrit.wikimedia.org/r/306287
Change subject: Add confirmation popup widget
......................................................................
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.
Bug: T141404
Change-Id: I67a44962eaee6b7bd8cac26dcb5277177fa5d224
---
M Resources.php
M i18n/en.json
M i18n/qqq.json
A modules/styles/mw.echo.ui.ConfirmationPopupWidget.less
A modules/ui/mw.echo.ui.ConfirmationPopupWidget.js
5 files changed, 85 insertions(+), 0 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo
refs/changes/87/306287/1
diff --git a/Resources.php b/Resources.php
index 9e27328..4423405 100644
--- a/Resources.php
+++ b/Resources.php
@@ -76,6 +76,7 @@
'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 @@
'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(
@@ -331,6 +333,7 @@
'echo-specialpage-pagefilters-title',
'echo-specialpage-pagefilters-subtitle',
'echo-mark-all-as-read',
+ 'echo-mark-all-as-read-confirmation',
'echo-more-info',
'echo-learn-more',
'mypreferences',
diff --git a/i18n/en.json b/i18n/en.json
index 8e0342b..fa13030 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -208,6 +208,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",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 2f6403d..36340e3 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -201,6 +201,7 @@
"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-all-as-read-confirmation": "Text for the confirmation
message that appers after the user marks all unread notifications as read. Keep
this 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 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}}",
diff --git a/modules/styles/mw.echo.ui.ConfirmationPopupWidget.less
b/modules/styles/mw.echo.ui.ConfirmationPopupWidget.less
new file mode 100644
index 0000000..58ec414
--- /dev/null
+++ b/modules/styles/mw.echo.ui.ConfirmationPopupWidget.less
@@ -0,0 +1,19 @@
+.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;
+
+ .oo-ui-iconWidget {
+ 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 0000000..1ed178f
--- /dev/null
+++ b/modules/ui/mw.echo.ui.ConfirmationPopupWidget.js
@@ -0,0 +1,61 @@
+( function ( mw, $ ) {
+ /**
+ * Confirmation overlay widget, especially for mobile display
+ * It assumes to appear and then fade out; should be appended
+ * to an overlay.
+ *
+ * @class
+ * @extends OO.ui.Widget
+ * @mixins OO.ui.mixin.LabelElement
+ *
+ * @constructor
+ * @param {Object} [config] Configuration object
+ */
+ 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 );
+
+ this.interval = config.interval || 2000;
+
+ // TODO: This should be inversed color
+ this.icon = new OO.ui.IconWidget( { icon: config.icon ||
'doubleCheck' } );
+
+ this.$element
+ .addClass( 'mw-echo-ui-confirmationPopupWidget' )
+ .append(
+ $( '<div>' )
+ .addClass(
'mw-echo-ui-confirmationPopupWidget-popup' )
+ .append( this.icon.$element,
this.$label )
+ )
+ // We're using explicit hide here because the widget
uses
+ // animated fadeIn/fadeOut
+ .hide();
+ };
+
+ /* Initialization */
+
+ OO.inheritClass( mw.echo.ui.ConfirmationPopupWidget, OO.ui.Widget );
+ OO.mixinClass( mw.echo.ui.ConfirmationPopupWidget,
OO.ui.mixin.LabelElement );
+
+ /**
+ * Show the widget and then animate its fade out.
+ */
+ mw.echo.ui.ConfirmationPopupWidget.prototype.showAnimated = function ()
{
+ 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 );
--
To view, visit https://gerrit.wikimedia.org/r/306287
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I67a44962eaee6b7bd8cac26dcb5277177fa5d224
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
