Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/214364
Change subject: Client side code should use message boxes rather than alert
......................................................................
Client side code should use message boxes rather than alert
Introduces MessageBox class
Remove all traces of .alert
Change-Id: Id2613f4670c2979832f67b46a23e3853c5e27345
---
M includes/MobileUI.php
M includes/Resources.php
M resources/mobile.editor.common/EditorOverlayAnonWarning.hogan
M resources/mobile.editor.overlay/EditorOverlay.js
A resources/mobile.messageBox/MessageBox.js
A resources/mobile.messageBox/messagebox.mustache
M resources/mobile.nearby/Nearby.js
M resources/mobile.nearby/nearby.hogan
M resources/mobile.pagelist/PageList.hogan
M resources/skins.minerva.base.styles/ui.less
M resources/skins.minerva.special.userlogin.styles/userlogin.less
M tests/browser/features/support/pages/article_page.rb
12 files changed, 92 insertions(+), 40 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/64/214364/1
diff --git a/includes/MobileUI.php b/includes/MobileUI.php
index 7461c8f..2210e8f 100644
--- a/includes/MobileUI.php
+++ b/includes/MobileUI.php
@@ -67,8 +67,12 @@
* @return string of html representing a box.
*/
public static function messageBox( $html, $className ) {
- return Html::openElement( 'div', array( 'class' => $className )
) .
- $html . Html::closeElement( 'div' );
+ $templateParser = new TemplateParser( __DIR__ .
'/../resources/mobile.messageBox/' );
+
+ return $templateParser->processTemplate( 'messageBox', array(
+ 'className' => $className,
+ 'msg' => $html
+ ) );
}
/**
diff --git a/includes/Resources.php b/includes/Resources.php
index 4a71ef0..0b6aa5a 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -301,6 +301,18 @@
'resources/mobile.mainMenu/MainMenu.js',
),
),
+ 'mobile.messageBox' => $wgMFResourceFileModuleBoilerplate + array(
+ 'dependencies' => array(
+ 'mobile.view',
+ ),
+ 'position' => 'top',
+ 'templates' => array(
+ 'MessageBox.hogan' =>
'resources/mobile.messageBox/messagebox.mustache',
+ ),
+ 'scripts' => array(
+ 'resources/mobile.messageBox/MessageBox.js',
+ ),
+ ),
'mobile.modifiedBar' => $wgMFResourceFileModuleBoilerplate + array(
'dependencies' => array(
'mobile.modules',
@@ -587,6 +599,7 @@
'mobile.settings',
'mobile.drawers',
'mobile.toast',
+ 'mobile.messageBox',
'mediawiki.confirmCloseWindow',
),
'scripts' => array(
@@ -1179,6 +1192,7 @@
'mobile.loggingSchemas',
'mobile.pagelist.scripts',
'mobile.foreignApi',
+ 'mobile.messageBox',
),
'messages' => array(
// NearbyApi.js
diff --git a/resources/mobile.editor.common/EditorOverlayAnonWarning.hogan
b/resources/mobile.editor.common/EditorOverlayAnonWarning.hogan
index 66d20f1..5a116d5 100644
--- a/resources/mobile.editor.common/EditorOverlayAnonWarning.hogan
+++ b/resources/mobile.editor.common/EditorOverlayAnonWarning.hogan
@@ -1,5 +1,5 @@
<div>
- <p class="anonMsg warningbox">{{{anonMsg}}}</p>
+ {{#warningOptions}}{{>messageBox}}{{/warningOptions}}
<div class="actions">
{{#anonButton}}{{>button}}{{/anonButton}}
{{#loginButton}}{{>button}}{{/loginButton}}
diff --git a/resources/mobile.editor.overlay/EditorOverlay.js
b/resources/mobile.editor.overlay/EditorOverlay.js
index f2b5827..c503609 100644
--- a/resources/mobile.editor.overlay/EditorOverlay.js
+++ b/resources/mobile.editor.overlay/EditorOverlay.js
@@ -1,5 +1,6 @@
( function ( M, $ ) {
- var EditorOverlayBase = M.require( 'modules/editor/EditorOverlayBase' ),
+ var EditorOverlay,
+ EditorOverlayBase = M.require(
'modules/editor/EditorOverlayBase' ),
Section = M.require( 'Section' ),
EditorApi = M.require( 'modules/editor/EditorApi' ),
AbuseFilterPanel = M.require( 'modules/editor/AbuseFilterPanel'
),
@@ -8,7 +9,7 @@
browser = M.require( 'browser' ),
overlayManager = M.require( 'overlayManager' ),
toast = M.require( 'toast' ),
- EditorOverlay;
+ MessageBox = M.require( 'mobile.messageBox/MessageBox' );
/**
* Overlay that shows an editor
@@ -22,6 +23,7 @@
EditorOverlay = EditorOverlayBase.extend( {
templatePartials: $.extend( {},
EditorOverlayBase.prototype.templatePartials, {
content: mw.template.get( 'mobile.editor.overlay',
'content.hogan' ),
+ messageBox: MessageBox.prototype.template,
anonWarning: mw.template.get( 'mobile.editor.common',
'EditorOverlayAnonWarning.hogan' )
} ),
/**
@@ -49,7 +51,10 @@
additionalClassNames: 'continue anonymous',
progressive: true
} ).options,
- anonMsg: mw.msg( 'mobile-frontend-editor-anonwarning' )
+ warningOptions: {
+ className: 'warningbox anon-msg',
+ msg: mw.msg(
'mobile-frontend-editor-anonwarning' )
+ }
} ),
editor: 'SourceEditor',
sectionLine: '',
diff --git a/resources/mobile.messageBox/MessageBox.js
b/resources/mobile.messageBox/MessageBox.js
new file mode 100644
index 0000000..1f3710d
--- /dev/null
+++ b/resources/mobile.messageBox/MessageBox.js
@@ -0,0 +1,25 @@
+( function ( M ) {
+ var MessageBox,
+ View = M.require( 'View' );
+
+ /**
+ * @class MessageBox
+ * @extends View
+ */
+ MessageBox = View.extend( {
+ /**
+ * @cfg {Object} defaults Default options hash.
+ * @cfg {String} [defaults.heading] heading to show along with
message (text)
+ * @cfg {String} defaults.msg message to show (html)
+ * @cfg {String} defaults.className either errorbox, warningbox
or successbox
+ */
+ defaults: {},
+ template: mw.template.get( 'mobile.messageBox',
'MessageBox.hogan' ),
+ /** @inheritdoc */
+ postRender: function () {
+ this.$el = this.$el.children( 0 );
+ },
+ } );
+
+ M.define( 'mobile.messageBox/MessageBox', MessageBox );
+}( mw.mobileFrontend ) );
diff --git a/resources/mobile.messageBox/messagebox.mustache
b/resources/mobile.messageBox/messagebox.mustache
new file mode 100644
index 0000000..188a76c
--- /dev/null
+++ b/resources/mobile.messageBox/messagebox.mustache
@@ -0,0 +1,4 @@
+<div class="{{className}}">
+ {{#heading}}<h2>{{heading}}</h2>{{/heading}}
+ {{{msg}}}
+</div>
diff --git a/resources/mobile.nearby/Nearby.js
b/resources/mobile.nearby/Nearby.js
index b4ee12c..07f9730 100644
--- a/resources/mobile.nearby/Nearby.js
+++ b/resources/mobile.nearby/Nearby.js
@@ -1,7 +1,8 @@
( function ( M, $ ) {
- var NearbyApi = M.require( 'modules/nearby/NearbyApi' ),
+ var Nearby,
+ MessageBox = M.require( 'mobile.messageBox/MessageBox' ),
+ NearbyApi = M.require( 'modules/nearby/NearbyApi' ),
WatchstarPageList = M.require( 'modules/WatchstarPageList' ),
- Nearby,
browser = M.require( 'browser' ),
icons = M.require( 'icons' );
@@ -16,36 +17,39 @@
errorMessages: {
empty: {
heading: mw.msg(
'mobile-frontend-nearby-noresults' ),
- guidance: mw.msg(
'mobile-frontend-nearby-noresults-guidance' )
+ msg: mw.msg(
'mobile-frontend-nearby-noresults-guidance' )
},
- location: {
+ locating: {
heading: mw.msg(
'mobile-frontend-nearby-lookup-ui-error' ),
- guidance: mw.msg(
'mobile-frontend-nearby-lookup-ui-error-guidance' )
+ msg: mw.msg(
'mobile-frontend-nearby-lookup-ui-error-guidance' )
},
permission: {
heading: mw.msg(
'mobile-frontend-nearby-permission' ),
- guidance: mw.msg(
'mobile-frontend-nearby-permission-guidance' )
+ msg: mw.msg(
'mobile-frontend-nearby-permission-guidance' )
},
server: {
heading: mw.msg( 'mobile-frontend-nearby-error'
),
- guidance: mw.msg(
'mobile-frontend-nearby-error-guidance' )
+ msg: mw.msg(
'mobile-frontend-nearby-error-guidance' )
},
incompatible: {
heading: mw.msg(
'mobile-frontend-nearby-requirements' ),
- guidance: mw.msg(
'mobile-frontend-nearby-requirements-guidance' )
+ msg: mw.msg(
'mobile-frontend-nearby-requirements-guidance' )
}
},
templatePartials: {
- pageList: WatchstarPageList.prototype.template
+ pageList: WatchstarPageList.prototype.template,
+ messageBox: MessageBox.prototype.template
},
template: mw.template.get( 'mobile.nearby', 'Nearby.hogan' ),
/**
* @inheritdoc
* @cfg {Object} defaults Default options hash.
+ * @cfg {Object} defaults.errorOptions options to pass to a
messagebox template
* @cfg {String} defaults.spinner HTML of the spinner icon with
a tooltip that
* tells the user that their location is being looked up
*/
defaults: {
+ errorOptions: undefined,
spinner: icons.spinner( {
title: mw.msg( 'mobile-frontend-nearby-loading'
)
} ).toHtmlString()
@@ -72,7 +76,7 @@
if ( err.code === 1 ) {
err = 'permission';
} else {
- err = 'location';
+ err = 'locating';
}
result.reject( err );
},
@@ -98,7 +102,7 @@
this.nearbyApi = new NearbyApi();
if ( options.errorType ) {
- options.error = this.errorMessages[
options.errorType ];
+ options.errorOptions = self._errorOptions(
options.errorType );
}
// Re-run after api/geolocation request
@@ -151,7 +155,7 @@
function pagesSuccess( pages ) {
options.pages = pages;
if ( pages && pages.length === 0 ) {
- options.error =
self.errorMessages.empty;
+ options.errorOptions =
self._errorOptions( 'empty' );
}
self._isLoading = false;
result.resolve( options );
@@ -163,7 +167,7 @@
*/
function pagesError() {
self._isLoading = false;
- options.error = self.errorMessages.server;
+ options.errorOptions = self._errorOptions(
'server' );
result.resolve( options );
}
@@ -182,12 +186,26 @@
.fail( pagesError );
} else {
if ( options.errorType ) {
- options.error = this.errorMessages[
options.errorType ];
+ options.errorOptions =
this._errorOptions( options.errorType );
}
result.resolve( options );
}
return result;
},
+ /**
+ * Generate a list of options that can be passed to a
messagebox template.
+ * @private
+ * @param {String} key to a defined error message
+ * @returns {Object}
+ */
+ _errorOptions: function ( msg ) {
+ var html,
+ opts = this.errorMessages[ msg ];
+
+ return $.extend( {
+ className: 'errorbox'
+ }, opts );
+ },
/** @inheritdoc */
postRender: function () {
if ( !this._isLoading ) {
diff --git a/resources/mobile.nearby/nearby.hogan
b/resources/mobile.nearby/nearby.hogan
index 19737a0..aa6c704 100644
--- a/resources/mobile.nearby/nearby.hogan
+++ b/resources/mobile.nearby/nearby.hogan
@@ -1,2 +1,3 @@
+{{#errorOptions}}{{>messageBox}}{{/errorOptions}}
{{{spinner}}}
{{>pageList}}
diff --git a/resources/mobile.pagelist/PageList.hogan
b/resources/mobile.pagelist/PageList.hogan
index 98b40cb..13eb2db 100644
--- a/resources/mobile.pagelist/PageList.hogan
+++ b/resources/mobile.pagelist/PageList.hogan
@@ -1,9 +1,3 @@
-{{#error}}
-<div class="alert error">
- {{#heading}}<h2>{{heading}}</h2>{{/heading}}
- <p>{{guidance}}</p>
-</div>
-{{/error}}
<ul class="page-list thumbs actionable">
{{#pages}}
{{>item}}
diff --git a/resources/skins.minerva.base.styles/ui.less
b/resources/skins.minerva.base.styles/ui.less
index bd02e58..f926d78 100644
--- a/resources/skins.minerva.base.styles/ui.less
+++ b/resources/skins.minerva.base.styles/ui.less
@@ -80,12 +80,6 @@
}
}
-// Used for messages on page lists and uploads and when showing old revisions
-.alert.warning {
- color: @colorWarningText;
- background: @colorWarningBackground;
-}
-
// Used for messages on login screen (They're more informational than actual
warnings.)
.warningbox {
border: 1px solid @colorGray12;
diff --git a/resources/skins.minerva.special.userlogin.styles/userlogin.less
b/resources/skins.minerva.special.userlogin.styles/userlogin.less
index c273218..72e0a7f 100644
--- a/resources/skins.minerva.special.userlogin.styles/userlogin.less
+++ b/resources/skins.minerva.special.userlogin.styles/userlogin.less
@@ -63,13 +63,6 @@
}
}
- #mw-mf-accountcreate {
- .alert {
- margin-left: 0;
- margin-right: 0;
- }
- }
-
/* sign up form */
form.user-login {
padding-bottom: 12px;
diff --git a/tests/browser/features/support/pages/article_page.rb
b/tests/browser/features/support/pages/article_page.rb
index 405c27e..5257642 100644
--- a/tests/browser/features/support/pages/article_page.rb
+++ b/tests/browser/features/support/pages/article_page.rb
@@ -27,7 +27,7 @@
li(:upload_page_action, id: 'ca-upload')
a(:edit_link, text: 'Edit')
- p(:anon_editor_warning, css: '.anonMsg')
+ p(:anon_editor_warning, css: '.anon-msg')
div(:editor_overlay, class: 'editor-overlay')
button(:editor_overlay_close_button) do |page|
page.editor_overlay_element.button_element(css: '.back')
--
To view, visit https://gerrit.wikimedia.org/r/214364
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id2613f4670c2979832f67b46a23e3853c5e27345
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
