wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-24 06:24:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

MWSaveDialog: Use MessageWidget (inline, warning) to show save dialog warnings

Browse source 
This is the same style that is recommended for form warnings.

Change-Id: I163f5180c66b9eb165a610184b153bb1da99caab
This commit is contained in:
Ed Sanders 2021-01-14 16:11:57 +00:00
parent e20decc77c
commit 1ec49384dc
3 changed files with 29 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
modules/ve-mw/init/targets/ve.init.mw.ArticleTarget.js
View file

@ -1344,7 +1344,7 @@ ve.init.mw.ArticleTarget.prototype.onSaveDialogSave = function ( saveDeferred )
) {
this.saveDialog.showMessage(
'missingsummary',
ve.init.platform.getParsedMessage( 'missingsummary' )
new OO.ui.HtmlSnippet( ve.init.platform.getParsedMessage( 'missingsummary' ) )
);
this.saveDialog.popPending();
} else {

34
modules/ve-mw/ui/dialogs/ve.ui.MWSaveDialog.js
View file

@ -467,26 +467,32 @@ ve.ui.MWSaveDialog.prototype.swapPanel = function ( panel, noFocus ) {
* Show a message in the save dialog.
*
* @param {string} name Message's unique name
* @param {string|jQuery|Array} message Message content (string of HTML, jQuery object or array of
* Node objects)
* @param {jQuery|string|Function|OO.ui.HtmlSnippet} label Message content. See OO.ui.mixin.LabelElement.
* @param {string} config MessageWidget config. Defaults to an inline warning.
* @return {jQuery.Promise} Promise which resolves when the message has been shown, rejects if no new message shown.
*/
ve.ui.MWSaveDialog.prototype.showMessage = function ( name, message ) {
var $message, promise;
ve.ui.MWSaveDialog.prototype.showMessage = function ( name, label, config ) {
var messageWidget, promise;
if ( !this.messages[ name ] ) {
$message = $( '<div>' ).addClass( 've-ui-mwSaveDialog-message' ).append( message );
this.$saveMessages.append( $message.css( 'display', 'none' ) );
messageWidget = new OO.ui.MessageWidget( ve.extendObject( {
classes: [ 've-ui-mwSaveDialog-message' ],
label: label,
inline: true,
type: 'warning'
}, config ) );
this.$saveMessages.append( messageWidget.$element.css( 'display', 'none' ) );
// FIXME: Use CSS transitions
// eslint-disable-next-line no-jquery/no-slide
promise = $message.slideDown( {
promise = messageWidget.$element.slideDown( {
duration: 250,
progress: this.updateSize.bind( this )
} ).promise();
this.swapPanel( 'save' );
this.messages[ name ] = $message;
// Can be hidden later by #clearMessage
this.messages[ name ] = messageWidget.$element;
return promise;
}
@ -499,9 +505,17 @@ ve.ui.MWSaveDialog.prototype.showMessage = function ( name, message ) {
* @param {string} name Message's unique name
*/
ve.ui.MWSaveDialog.prototype.clearMessage = function ( name ) {
if ( this.messages[ name ] ) {
this.messages[ name ].slideUp( {
var $message = this.messages[ name ],
dialog = this;
if ( $message ) {
// FIXME: Use CSS transitions
// eslint-disable-next-line no-jquery/no-slide
$message.slideUp( {
duration: 250,
progress: this.updateSize.bind( this )
} ).promise().then( function () {
$message.remove();
dialog.updateSize();
} );
delete this.messages[ name ];
}

5
modules/ve-mw/ui/styles/dialogs/ve.ui.MWSaveDialog.css
View file

@ -81,7 +81,10 @@
padding: 0.5em 1.14285714em;
border: 1px solid rgba( 0, 0, 0, 0.2 );
border-width: 1px 0;
line-height: 1.4em;
}
.ve-ui-mwSaveDialog-messages > .oo-ui-messageWidget {
font-weight: normal;
}
.ve-ui-mwSaveDialog-messages:empty {