jenkins-bot has submitted this change and it was merged.
Change subject: Hygiene: Use same saving indication in TalkSectionAdd like in
EditorOverlay
......................................................................
Hygiene: Use same saving indication in TalkSectionAdd like in EditorOverlay
Instead of just disable the button and a "glitchy behaviour" after the save
process
finished, use a save Header (same as in editor) to indicate, that the new
discussion
is being saved and destroy the Overlay after it finished saving.
Also:
* Change Overlay._showHidden() to be protected (Overlay.showHidden()).
Bug: T91139
Change-Id: I64467bd9e00d296452d7f75c9cb930d4a0750cde
---
M i18n/en.json
M i18n/qqq.json
M includes/Resources.php
M javascripts/Overlay.js
M javascripts/modules/categories/CategoryAddOverlay.js
M javascripts/modules/editor/EditorOverlay.js
M javascripts/modules/editor/EditorOverlayBase.js
M javascripts/modules/editor/VisualEditorOverlay.js
M javascripts/modules/talk/TalkOverlay.js
M javascripts/modules/talk/TalkSectionAddOverlay.js
M javascripts/modules/talk/talk.js
M javascripts/modules/uploads/PhotoUploadProgress.js
M templates/modules/talk/talkSectionAdd.hogan
R templates/modules/talk/talkSectionAddContentHeader.hogan
14 files changed, 88 insertions(+), 79 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
Bmansurov: Looks good to me, but someone else must approve
jenkins-bot: Verified
diff --git a/i18n/en.json b/i18n/en.json
index 4a523b7..abcab0f 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -308,6 +308,7 @@
"mobile-frontend-talk-topic-error-permission": "The topic can't be
added. You don't have the permission to edit pages.",
"mobile-frontend-talk-topic-error-spam": "The topic was refused because
it contained a spam fragment.",
"mobile-frontend-talk-topic-error-badtoken": "There was an error on the
server. Your edit can't be saved. Try reloading this page.",
+ "mobile-frontend-talk-topic-wait": "Saving your new topic, please
wait.",
"mobile-frontend-terms-text": "Terms of Use",
"mobile-frontend-terms-url": "",
"mobile-frontend-thanked-notice": "$1 was told that you liked
{{GENDER:$2|his|her|their}} edit.",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index eb4f901..e2a8b42 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -336,6 +336,7 @@
"mobile-frontend-talk-topic-error-permission": "Error message, when the
topic wasn't added to the talk page, because of a permission problem (no edit
permission e.g.).",
"mobile-frontend-talk-topic-error-spam": "Error message explain, that
the topic was rejected, because it's identified as spam.",
"mobile-frontend-talk-topic-error-badtoken": "This error message
explains, that there was an error with the server (bad edit token), so the
topic can't be saved to the talk page. The user should try to reload the page
in his browser.",
+ "mobile-frontend-talk-topic-wait": "Text that displays while a new
topic on a talk page is being saved.",
"mobile-frontend-terms-text": "\"Terms of use\" link text at the bottom
of every page.\n{{Identical|Terms of use}}",
"mobile-frontend-terms-url": "Terms of use URL. Do not localise",
"mobile-frontend-thanked-notice": "{{doc-singularthey}}\nPop-up message
that is displayed after a user has thanked another user for their
edit.\n\nParameters:\n* $1 - the username of the user that was thanked\n* $2 -
the gender of the user that was thanked",
diff --git a/includes/Resources.php b/includes/Resources.php
index 687ab73..1788827 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -649,8 +649,10 @@
'templates' => array(
// talk.js
'content.hogan' => 'templates/modules/talk/talk.hogan',
- 'SectionAddOverlay/header.hogan' =>
'templates/modules/talk/talkSectionAddHeader.hogan',
- 'SectionAddOverlay/content.hogan' =>
'templates/modules/talk/talkSectionAdd.hogan',
+ 'SectionAddOverlay/contentHeader.hogan' =>
+
'templates/modules/talk/talkSectionAddContentHeader.hogan',
+ 'SectionAddOverlay/saveHeader.hogan' =>
'templates/modules/editor/saveHeader.hogan',
+ 'SectionAddOverlay.hogan' =>
'templates/modules/talk/talkSectionAdd.hogan',
'Section/header.hogan' =>
'templates/modules/talk/talkSectionHeader.hogan',
'Section/content.hogan' =>
'templates/modules/talk/talkSection.hogan',
),
@@ -672,6 +674,7 @@
'mobile-frontend-talk-topic-error-permission',
'mobile-frontend-talk-topic-error-spam',
'mobile-frontend-talk-topic-error-badtoken',
+ 'mobile-frontend-talk-topic-wait',
// @todo FIXME: Gets loaded twice if editor and talk
both loaded.
'mobile-frontend-editor-cancel',
'mobile-frontend-editor-cancel-confirm',
diff --git a/javascripts/Overlay.js b/javascripts/Overlay.js
index 78ea0fe..f249393 100644
--- a/javascripts/Overlay.js
+++ b/javascripts/Overlay.js
@@ -294,10 +294,10 @@
* Can't use jQuery's hide() and show() because show() sets
display: block.
* And we want display: table for headers.
* @method
- * @private
+ * @protected
* @param {String} className CSS selector to show
*/
- _showHidden: function ( className ) {
+ showHidden: function ( className ) {
this.$( '.hideable' ).addClass( 'hidden' );
this.$( className ).removeClass( 'hidden' );
}
diff --git a/javascripts/modules/categories/CategoryAddOverlay.js
b/javascripts/modules/categories/CategoryAddOverlay.js
index 07554ef..bd8834c 100644
--- a/javascripts/modules/categories/CategoryAddOverlay.js
+++ b/javascripts/modules/categories/CategoryAddOverlay.js
@@ -107,8 +107,7 @@
self = this;
// show the loading spinner and disable the safe button
- // FIXME: Don't call a private method that is outside
the class.
- this._showHidden( '.saving-header' );
+ this.showHidden( '.saving-header' );
// add wikitext to add to the page
$.each( $( '.mw-ui-progressive' ), function () {
@@ -129,8 +128,7 @@
M.emit( 'category-added' );
window.location.hash = '#/categories';
} ).fail( function () {
- // FIXME: Don't call a private method
that is outside the class.
- self._showHidden( '.initial-header' );
+ self.showHidden( '.initial-header' );
self.$safeButton.prop( 'disabled',
false );
// FIXME: Should be a better error
message
toast.show( mw.msg(
'mobile-frontend-categories-nodata' ), 'toast error' );
diff --git a/javascripts/modules/editor/EditorOverlay.js
b/javascripts/modules/editor/EditorOverlay.js
index 810f856..5ae1b36 100644
--- a/javascripts/modules/editor/EditorOverlay.js
+++ b/javascripts/modules/editor/EditorOverlay.js
@@ -246,8 +246,7 @@
this.$preview.removeClass( 'error' ).hide();
this.$content.show();
window.scrollTo( 0, this.scrollTop );
- // FIXME: Don't call a private method that is outside
the class.
- this._showHidden( '.initial-header' );
+ this.showHidden( '.initial-header' );
this.abuseFilterPanel.hide();
},
@@ -317,7 +316,7 @@
*/
_showAbuseFilter: function ( type, message ) {
this.abuseFilterPanel.show( type, message );
- this._showHidden( '.save-header' );
+ this.showHidden( '.save-header' );
// disable continue and save buttons, reenabled when
user changes content
this.$( '.continue, .submit' ).prop( 'disabled',
this.abuseFilterPanel.isDisallowed );
},
@@ -345,8 +344,7 @@
options.captchaWord = this.$( '.captcha-word'
).val();
}
- // FIXME: Don't call a private method that is outside
the class.
- this._showHidden( '.saving-header' );
+ this.showHidden( '.saving-header' );
this.api.save( options )
.done( function () {
@@ -389,8 +387,7 @@
}
self.reportError( msg,
data.details );
- // FIXME: Don't call a private
method that is outside the class.
- self._showHidden(
'.save-header, .save-panel' );
+ self.showHidden( '.save-header,
.save-panel' );
}
} );
},
diff --git a/javascripts/modules/editor/EditorOverlayBase.js
b/javascripts/modules/editor/EditorOverlayBase.js
index a27c47e..7e1e110 100644
--- a/javascripts/modules/editor/EditorOverlayBase.js
+++ b/javascripts/modules/editor/EditorOverlayBase.js
@@ -201,8 +201,7 @@
* @method
*/
onStageChanges: function () {
- // FIXME: Don't call a private method that is outside
the class.
- this._showHidden( '.save-header, .save-panel' );
+ this.showHidden( '.save-header, .save-panel' );
this.log( 'save' );
// Scroll to the top of the page, so that the summary
input is visible
// (even if overlay was scrolled down when editing) and
weird iOS header
@@ -243,8 +242,7 @@
this.nextStep = 'onStageChanges';
}
Overlay.prototype.postRender.apply( this, arguments );
- // FIXME: Don't call a private method that is outside
the class.
- this._showHidden( '.initial-header' );
+ this.showHidden( '.initial-header' );
},
/**
* Back button click handler
@@ -402,8 +400,7 @@
}
this.$( '.captcha-panel img' ).attr( 'src', url );
- // FIXME: Don't call a private method that is outside
the class.
- this._showHidden( '.save-header, .captcha-panel' );
+ this.showHidden( '.save-header, .captcha-panel' );
this.captchaShown = true;
}
diff --git a/javascripts/modules/editor/VisualEditorOverlay.js
b/javascripts/modules/editor/VisualEditorOverlay.js
index 7e33dd7..f45a9f1 100644
--- a/javascripts/modules/editor/VisualEditorOverlay.js
+++ b/javascripts/modules/editor/VisualEditorOverlay.js
@@ -140,8 +140,7 @@
* @method
*/
switchToEditor: function () {
- // FIXME: Don't call a private method that is outside
the class.
- this._showHidden( '.initial-header' );
+ this.showHidden( '.initial-header' );
this.$( '.surface' ).show();
this.docToSave = false;
},
@@ -169,8 +168,7 @@
if ( this.confirmAborted ) {
return;
}
- // FIXME: Don't call a private method that is outside
the class.
- this._showHidden( '.saving-header' );
+ this.showHidden( '.saving-header' );
// Stop the confirmation message from being thrown when
you hit save.
this._hasChanged = false;
this.$( '.surface, .summary-area' ).hide();
diff --git a/javascripts/modules/talk/TalkOverlay.js
b/javascripts/modules/talk/TalkOverlay.js
index 340a803..4a3b170 100644
--- a/javascripts/modules/talk/TalkOverlay.js
+++ b/javascripts/modules/talk/TalkOverlay.js
@@ -60,7 +60,7 @@
this._loadContent( options );
}
this._setupAddDiscussionButton( options );
- this._showHidden( '.initial-header' );
+ this.showHidden( '.initial-header' );
},
/**
diff --git a/javascripts/modules/talk/TalkSectionAddOverlay.js
b/javascripts/modules/talk/TalkSectionAddOverlay.js
index 33214a3..f9b1138 100644
--- a/javascripts/modules/talk/TalkSectionAddOverlay.js
+++ b/javascripts/modules/talk/TalkSectionAddOverlay.js
@@ -5,6 +5,7 @@
api = M.require( 'api' ),
pageApi = M.require( 'pageApi' ),
toast = M.require( 'toast' ),
+ Icon = M.require( 'Icon' ),
TalkSectionAddOverlay;
/**
@@ -29,11 +30,19 @@
cancelMsg: mw.msg( 'mobile-frontend-editor-cancel' ),
topicTitlePlaceHolder: mw.msg(
'mobile-frontend-talk-add-overlay-subject-placeholder' ),
topicContentPlaceHolder: mw.msg(
'mobile-frontend-talk-add-overlay-content-placeholder' ),
- editingMsg: mw.msg(
'mobile-frontend-talk-add-overlay-submit' )
+ editingMsg: mw.msg(
'mobile-frontend-talk-add-overlay-submit' ),
+ waitMsg: mw.msg( 'mobile-frontend-talk-topic-wait' ),
+ // icons.spinner can't be used, .loading has a fixed
height, which breaks overlay-header
+ waitIcon: new Icon( {
+ tagName: 'button',
+ name: 'spinner',
+ additionalClassNames: 'savespinner loading'
+ } ).toHtmlString()
} ),
+ template: mw.template.get( 'mobile.talk.overlays',
'SectionAddOverlay.hogan' ),
templatePartials: {
- header: mw.template.get( 'mobile.talk.overlays',
'SectionAddOverlay/header.hogan' ),
- content: mw.template.get( 'mobile.talk.overlays',
'SectionAddOverlay/content.hogan' )
+ contentHeader: mw.template.get( 'mobile.talk.overlays',
'SectionAddOverlay/contentHeader.hogan' ),
+ saveHeader: mw.template.get( 'mobile.talk.overlays',
'SectionAddOverlay/saveHeader.hogan' )
},
events: $.extend( {}, Overlay.prototype.events, {
'input .wikitext-editor, .summary': 'onTextInput',
@@ -65,6 +74,7 @@
/** @inheritdoc */
postRender: function ( options ) {
Overlay.prototype.postRender.call( this, options );
+ this.showHidden( '.initial-header' );
this.$confirm = this.$( 'button.confirm-save' );
this.$subject = this.$( '.summary' );
this.$ta = this.$( '.wikitext-editor' );
@@ -102,45 +112,45 @@
onSaveClick: function () {
var self = this;
- if ( !$( this ).prop( 'disabled' ) ) {
- this.save().done( function ( status ) {
- if ( status === 'ok' ) {
- // Check if the user was
previously on the talk overlay
- if ( self.title !==
mw.config.get( 'wgPageName' ) ) {
- pageApi.invalidatePage(
self.title );
- toast.show( mw.msg(
'mobile-frontend-talk-topic-feedback' ), 'toast' );
- M.emit(
'talk-discussion-added' );
- self.hide();
- } else {
- M.emit(
'talk-added-wo-overlay' );
- }
+ this.showHidden( '.saving-header' );
+ this.save().done( function ( status ) {
+ if ( status === 'ok' ) {
+ // Check if the user was previously on
the talk overlay
+ if ( self.title !== mw.config.get(
'wgPageName' ) ) {
+ pageApi.invalidatePage(
self.title );
+ toast.show( mw.msg(
'mobile-frontend-talk-topic-feedback' ), 'toast' );
+ M.emit( 'talk-discussion-added'
);
+ window.history.back();
+ } else {
+ M.emit( 'talk-added-wo-overlay'
);
}
- } ).fail( function ( error ) {
- var editMsg =
'mobile-frontend-talk-topic-error';
+ }
+ } ).fail( function ( error ) {
+ var editMsg =
'mobile-frontend-talk-topic-error';
- self.$confirm.prop( 'disabled', false );
- switch ( error.details ) {
- case 'protectedpage':
- editMsg =
'mobile-frontend-talk-topic-error-protected';
- break;
- case 'noedit':
- case 'blocked':
- editMsg =
'mobile-frontend-talk-topic-error-permission';
- break;
- case 'spamdetected':
- editMsg =
'mobile-frontend-talk-topic-error-spam';
- break;
- case 'badtoken':
- editMsg =
'mobile-frontend-talk-topic-error-badtoken';
- break;
- default:
- editMsg =
'mobile-frontend-talk-topic-error';
- break;
- }
+ self.$confirm.prop( 'disabled', false );
+ switch ( error.details ) {
+ case 'protectedpage':
+ editMsg =
'mobile-frontend-talk-topic-error-protected';
+ break;
+ case 'noedit':
+ case 'blocked':
+ editMsg =
'mobile-frontend-talk-topic-error-permission';
+ break;
+ case 'spamdetected':
+ editMsg =
'mobile-frontend-talk-topic-error-spam';
+ break;
+ case 'badtoken':
+ editMsg =
'mobile-frontend-talk-topic-error-badtoken';
+ break;
+ default:
+ editMsg =
'mobile-frontend-talk-topic-error';
+ break;
+ }
- toast.show( mw.msg( editMsg ), 'toast
error' );
- } );
- }
+ toast.show( mw.msg( editMsg ), 'toast error' );
+ self.showHidden( '.save-header, .save-panel' );
+ } );
},
/**
* Save new talk section
@@ -159,9 +169,7 @@
// propagate, that we save an edit and want to close
the Overlay without any interruption (user questions e.g.)
this._saveHit = true;
- this.$confirm.prop( 'disabled', true );
this.$( '.content' ).empty().addClass( 'loading' );
- this.$( '.buttonBar' ).hide();
// FIXME: while saving: a spinner would be nice
api.postWithToken( 'edit', {
action: 'edit',
diff --git a/javascripts/modules/talk/talk.js b/javascripts/modules/talk/talk.js
index 458051a..b2232a0 100644
--- a/javascripts/modules/talk/talk.js
+++ b/javascripts/modules/talk/talk.js
@@ -26,7 +26,7 @@
loader.loadModule( 'mobile.talk.overlays' ).done( function () {
var Overlay;
- if ( id === 'new' ) {
+ if ( id === 'new' ) {
Overlay = M.require(
'modules/talk/TalkSectionAddOverlay' );
} else if ( id ) {
talkOptions.id = id;
diff --git a/javascripts/modules/uploads/PhotoUploadProgress.js
b/javascripts/modules/uploads/PhotoUploadProgress.js
index cbc4547..214d748 100644
--- a/javascripts/modules/uploads/PhotoUploadProgress.js
+++ b/javascripts/modules/uploads/PhotoUploadProgress.js
@@ -46,8 +46,7 @@
showAbuseFilter: function ( type, message ) {
new AbuseFilterPanel().appendTo( this.$(
'.overlay-header-container' ) )
.show( type, message );
- // FIXME: Don't call a private method that is outside
the class.
- this._showHidden( '.save-header' );
+ this.showHidden( '.save-header' );
},
/** @inheritdoc */
diff --git a/templates/modules/talk/talkSectionAdd.hogan
b/templates/modules/talk/talkSectionAdd.hogan
index 472f538..e95e1c8 100644
--- a/templates/modules/talk/talkSectionAdd.hogan
+++ b/templates/modules/talk/talkSectionAdd.hogan
@@ -1,9 +1,16 @@
-<div class="save-panel panel">
- <p class="license">{{{licenseMsg}}}</p>
+<div class="overlay-header-container position-fixed">
+ {{>contentHeader}}
+ {{>saveHeader}}
</div>
-<div class="panel">
- <input type="text" class="summary"
placeholder="{{topicTitlePlaceHolder}}">
-</div>
-<div class="panel">
- <textarea class="wikitext-editor" cols="40" rows="10"
placeholder="{{topicContentPlaceHolder}}"></textarea>
-</div>
+
+<div class="overlay-content">
+ <div class="save-panel panel">
+ <p class="license">{{{licenseMsg}}}</p>
+ </div>
+ <div class="panel">
+ <input type="text" class="summary"
placeholder="{{topicTitlePlaceHolder}}">
+ </div>
+ <div class="panel">
+ <textarea class="wikitext-editor" cols="40" rows="10"
placeholder="{{topicContentPlaceHolder}}"></textarea>
+ </div>
+</div>
\ No newline at end of file
diff --git a/templates/modules/talk/talkSectionAddHeader.hogan
b/templates/modules/talk/talkSectionAddContentHeader.hogan
similarity index 76%
rename from templates/modules/talk/talkSectionAddHeader.hogan
rename to templates/modules/talk/talkSectionAddContentHeader.hogan
index 6f2eb97..8017635 100644
--- a/templates/modules/talk/talkSectionAddHeader.hogan
+++ b/templates/modules/talk/talkSectionAddContentHeader.hogan
@@ -1,4 +1,4 @@
-<div class="overlay-header initial-header hideable">
+<div class="overlay-header initial-header save-header hideable">
<ul>
<li>{{{backButton}}}</li>
</ul>
--
To view, visit https://gerrit.wikimedia.org/r/193522
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I64467bd9e00d296452d7f75c9cb930d4a0750cde
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Bmansurov <[email protected]>
Gerrit-Reviewer: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Phuedx <[email protected]>
Gerrit-Reviewer: Siebrand <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
