Sumit has uploaded a new change for review.
https://gerrit.wikimedia.org/r/258969
Change subject: MobileFrontend mw.notification instead of toast
......................................................................
MobileFrontend mw.notification instead of toast
Makes MobileFrontend use mw.notification for toast notifications.
This change includes:
* Removing toastDrawer.
* Using toast.js as a gateway to access mw.notification.
* Change toast.less to override mw.notification.css with same class names,
but styles suited for minerva.
Bug: T116555
Change-Id: I25669d8a28c8419534bbd3524ba1777e556a74cc
---
M includes/Resources.php
M resources/mobile.categories.overlays/CategoryAddOverlay.js
M resources/mobile.editor.common/EditorOverlayBase.js
M resources/mobile.talk.overlays/TalkSectionAddOverlay.js
M resources/mobile.talk.overlays/TalkSectionOverlay.js
D resources/mobile.toast/ToastDrawer.js
M resources/mobile.toast/toast.js
M resources/mobile.toast/toast.less
M resources/skins.minerva.editor/init.js
M resources/skins.minerva.scripts/mobileRedirect.js
M tests/qunit/mobile.editor.overlay/test_EditorOverlay.js
11 files changed, 41 insertions(+), 96 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/69/258969/1
diff --git a/includes/Resources.php b/includes/Resources.php
index 5bdd878..424348c 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -887,11 +887,7 @@
),
'mobile.toast' => $wgMFResourceFileModuleBoilerplate + array(
- 'dependencies' => array(
- 'mobile.drawers',
- ),
'scripts' => array(
- 'resources/mobile.toast/ToastDrawer.js',
'resources/mobile.toast/toast.js',
),
'skinStyles' => array(
diff --git a/resources/mobile.categories.overlays/CategoryAddOverlay.js
b/resources/mobile.categories.overlays/CategoryAddOverlay.js
index 573aff9..0ec77ae 100644
--- a/resources/mobile.categories.overlays/CategoryAddOverlay.js
+++ b/resources/mobile.categories.overlays/CategoryAddOverlay.js
@@ -120,7 +120,7 @@
// if there are no categories added, don't do anything
(the user shouldn't see the save button)
if ( newCategories.length === 0 ) {
- toast.show( mw.msg(
'mobile-frontend-categories-nodata' ), 'toast error' );
+ toast.show( mw.msg(
'mobile-frontend-categories-nodata' ), 'error' );
} else {
// save the new categories
this.gateway.save( this.title, newCategories
).done( function () {
diff --git a/resources/mobile.editor.common/EditorOverlayBase.js
b/resources/mobile.editor.common/EditorOverlayBase.js
index a9d22ef..a71f02b 100644
--- a/resources/mobile.editor.common/EditorOverlayBase.js
+++ b/resources/mobile.editor.common/EditorOverlayBase.js
@@ -214,7 +214,7 @@
* @param {String} text Text of message to display to user
*/
reportError: function ( text ) {
- toast.show( text, 'toast error' );
+ toast.show( text, 'error' );
},
/**
* Prepares the penultimate screen before saving.
diff --git a/resources/mobile.talk.overlays/TalkSectionAddOverlay.js
b/resources/mobile.talk.overlays/TalkSectionAddOverlay.js
index 6196e02..80a1f4d 100644
--- a/resources/mobile.talk.overlays/TalkSectionAddOverlay.js
+++ b/resources/mobile.talk.overlays/TalkSectionAddOverlay.js
@@ -3,6 +3,7 @@
toast = M.require( 'mobile.toast/toast' ),
Icon = M.require( 'mobile.startup/Icon' ),
TalkSectionAddOverlay;
+ mw.loader.load( 'mediawiki.notification' );
/**
* Overlay for adding a talk section
@@ -58,6 +59,7 @@
this.$confirm = this.$( 'button.confirm-save' );
this.$subject = this.$( '.summary' );
this.$ta = this.$( '.wikitext-editor' );
+ toast.show( mw.msg(
'mobile-frontend-talk-topic-feedback' ) );
},
/** @inheritdoc */
hide: function () {
@@ -98,7 +100,7 @@
// Check if the user was previously on
the talk overlay
if ( self.title !== mw.config.get(
'wgPageName' ) ) {
self.pageGateway.invalidatePage( self.title );
- toast.show( mw.msg(
'mobile-frontend-talk-topic-feedback' ), 'toast' );
+ toast.show( mw.msg(
'mobile-frontend-talk-topic-feedback' ) );
M.emit( 'talk-discussion-added'
);
window.history.back();
} else {
@@ -128,7 +130,7 @@
break;
}
- toast.show( mw.msg( editMsg ), 'toast error' );
+ toast.show( mw.msg( editMsg ), 'error' );
self.showHidden( '.save-header, .save-panel' );
} );
},
diff --git a/resources/mobile.talk.overlays/TalkSectionOverlay.js
b/resources/mobile.talk.overlays/TalkSectionOverlay.js
index 16b7c96..2962f9e 100644
--- a/resources/mobile.talk.overlays/TalkSectionOverlay.js
+++ b/resources/mobile.talk.overlays/TalkSectionOverlay.js
@@ -112,7 +112,7 @@
section: this.options.id,
appendtext: val
} ).done( function () {
- popup.show( mw.msg(
'mobile-frontend-talk-reply-success' ), 'toast' );
+ popup.show( mw.msg(
'mobile-frontend-talk-reply-success' ) );
// invalidate the cache
self.pageGateway.invalidatePage(
self.options.title );
diff --git a/resources/mobile.toast/ToastDrawer.js
b/resources/mobile.toast/ToastDrawer.js
deleted file mode 100644
index 895de33..0000000
--- a/resources/mobile.toast/ToastDrawer.js
+++ /dev/null
@@ -1,31 +0,0 @@
-( function ( M ) {
- var ToastDrawer,
- Drawer = M.require( 'mobile.drawers/Drawer' );
-
- /**
- * Auto-expiring notification.
- * @class
- * @extends Drawer
- */
- ToastDrawer = Drawer.extend( {
- className: 'toast position-fixed view-border-box',
- minHideDelay: 1000,
- /**
- * Show the toast message with a given class and content
- * @method
- * @param {String} content Content to be placed in element
- * @param {String} className class to add to element
- */
- show: function ( content, className ) {
- this.$el
- .html( content )
- .removeAttr( 'class' )
- .addClass( this.className )
- .addClass( className );
- Drawer.prototype.show.apply( this, arguments );
- }
- } );
-
- M.define( 'mobile.toast/ToastDrawer', ToastDrawer );
-
-}( mw.mobileFrontend ) );
diff --git a/resources/mobile.toast/toast.js b/resources/mobile.toast/toast.js
index 7502742..af4c984 100644
--- a/resources/mobile.toast/toast.js
+++ b/resources/mobile.toast/toast.js
@@ -1,30 +1,17 @@
( function ( M, $ ) {
var Toast,
settingsKey = 'mobileFrontend/toast',
- settings = M.require( 'mobile.settings/settings' ),
- ToastDrawer = M.require( 'mobile.toast/ToastDrawer' );
+ settings = M.require( 'mobile.settings/settings' );
+ // Load mw.notification early for later use
+ mw.loader.load( 'mediawiki.notification' );
/**
- * Wrapper for one global ToastDrawer
+ * Wrapper for one global Toast
* @class
*/
Toast = function Toast() {
// FIXME: Use mw.requestIdleCallback, once it's available
(T111456)
$( this._showPending() );
- };
-
- /**
- * Get a unique, global ToastDrawer object
- * @return {ToastDrawer}
- * @private
- * @method
- */
- Toast.prototype._getToastDrawer = function () {
- // check, if there is a ToastDrawer object already
- if ( this.drawer === undefined ) {
- this.drawer = new ToastDrawer();
- }
- return this.drawer;
};
/**
@@ -34,15 +21,20 @@
* @param {String} cssClass CSS class to add to the element
*/
Toast.prototype.show = function ( msg, cssClass ) {
- this._getToastDrawer().show( msg, cssClass );
+ this.notification = mw.notification.notify( msg, {
+ type: cssClass,
+ tag: 'minerva'
+ } );
};
/**
- * Hide the ToastDrawer if it's visible.
+ * Hide the Toast if it's visible.
* @method
*/
Toast.prototype.hide = function () {
- this._getToastDrawer().hide();
+ if ( this.notification !== undefined ) {
+ this.notification.close();
+ }
};
/**
@@ -77,7 +69,7 @@
var data = settings.get( settingsKey );
if ( data ) {
data = JSON.parse( data );
- this._getToastDrawer().show( data.content,
data.className );
+ this.show( data.content, data.className );
settings.remove( settingsKey );
}
};
diff --git a/resources/mobile.toast/toast.less
b/resources/mobile.toast/toast.less
index 6d6bea5..f61f328 100644
--- a/resources/mobile.toast/toast.less
+++ b/resources/mobile.toast/toast.less
@@ -24,29 +24,9 @@
// </div>
//
// Styleguide 3.1.
-.mw-notification-area,
-.toast,
-.drawer {
- bottom: 0;
- left: 0;
- right: 0;
- background-color: @searchBoxColorTo;
- box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.35);
- word-wrap: break-word;
- // needs to be higher than for overlays to show on top of overlays
- z-index: @z-indexOverOverlay;
- // don't use visibility: hidden in old browsers that don't support
animations
- display: none;
- &.visible {
- display: block;
- }
-}
-
-.mw-notification-area,
.animations {
- .toast,
- .drawer {
+ .mw-notification {
@duration: .25s;
display: block;
visibility: hidden;
@@ -60,7 +40,7 @@
opacity: 0;
// Only apply the transition when an animation is needed (when
drawer/toast hidden/shown)
- &.animated {
+ &.mw-notification-tag-minerva {
// delay visibility transition to make other
transitions visible
// http://fvsch.com/code/transition-fade/test5.html
// need to assign to a temporary variable to preserve
commas
@@ -69,7 +49,7 @@
.transition-transform( @transition );
}
- &.visible {
+ &.mw-notification-visible {
bottom: 0;
// need to assign to a temporary variable to preserve
commas
//
https://github.com/leafo/lessphp/issues/105#issuecomment-2872598
@@ -82,16 +62,16 @@
}
}
-.mw-notification-area,
-.toast {
+.mw-notification {
font-size: .9em;
padding: .9em 1em;
background-color: @toastNotificationColor;
color: #fff;
- margin: 0 10% 20px;
- width: 80%;
text-align: center;
border-radius: 3px;
+ bottom: 0;
+ word-wrap: break-word;
+ box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.35);
// Toast notification error state
//
@@ -103,12 +83,11 @@
// </div>
//
// Styleguide 3.2.
- &.error {
+ &.mw-notification-type-error {
.background-image('images/error.png');
background-position: 16px 50%;
background-repeat: no-repeat;
padding-left: 5%;
- width: 75%;
border: none; // FIXME: this is needed because a global .error
adds border
}
@@ -124,5 +103,14 @@
.mediawiki {
.mw-notification-area {
position: fixed;
+ margin: 0 10% 20px;
+ width: 80%;
+ text-align: center;
+ bottom: 0;
+ display: none;
+ z-index: @z-indexOverOverlay;
+ &.mw-notification-visible {
+ display: block;
+ }
}
}
diff --git a/resources/skins.minerva.editor/init.js
b/resources/skins.minerva.editor/init.js
index 09509af..5b0f52c 100644
--- a/resources/skins.minerva.editor/init.js
+++ b/resources/skins.minerva.editor/init.js
@@ -289,8 +289,7 @@
'mobile-frontend-editor-blocked-info-loggedin',
blockInfo.blockReason,
blockInfo.blockedBy
- ),
- 'toast'
+ )
);
ev.preventDefault();
} );
@@ -339,7 +338,7 @@
*/
function showSorryToast( msg ) {
$( '#ca-edit, .edit-page' ).on( 'click', function ( ev ) {
- popup.show( mw.msg( msg ), 'toast' );
+ popup.show( mw.msg( msg ) );
ev.preventDefault();
} );
}
diff --git a/resources/skins.minerva.scripts/mobileRedirect.js
b/resources/skins.minerva.scripts/mobileRedirect.js
index 7e52c07..a5b6800 100644
--- a/resources/skins.minerva.scripts/mobileRedirect.js
+++ b/resources/skins.minerva.scripts/mobileRedirect.js
@@ -21,7 +21,7 @@
if ( !cookiesEnabled() ) {
popup.show(
mw.msg( 'mobile-frontend-cookies-required' ),
- 'toast error'
+ 'error'
);
// Prevent default action
return false;
diff --git a/tests/qunit/mobile.editor.overlay/test_EditorOverlay.js
b/tests/qunit/mobile.editor.overlay/test_EditorOverlay.js
index 82d1f6a..1b06572 100644
--- a/tests/qunit/mobile.editor.overlay/test_EditorOverlay.js
+++ b/tests/qunit/mobile.editor.overlay/test_EditorOverlay.js
@@ -27,9 +27,8 @@
new EditorOverlay( {
title: 'test.css'
} );
-
assert.strictEqual(
- $( '.toast' ).text(),
+ $( '.mw-notification-content' ).text(),
'Your IP address is blocked from editing. The block was
made by Test for the following reason: Testreason.',
'There is a toast notice, that i am blocked from
editing'
);
--
To view, visit https://gerrit.wikimedia.org/r/258969
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I25669d8a28c8419534bbd3524ba1777e556a74cc
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Sumit <asthana.sumi...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
