diff --git a/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js b/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js index efc0db3e90..2b2f488e89 100644 --- a/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js +++ b/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js @@ -42,73 +42,17 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config ) this.$more = $( '
' ).text( this.spec.getParameterDescription( paramName ) || '' ) ); @@ -164,15 +108,85 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config ) ); } - if ( this.$description.text().trim() === '' ) { - this.infoButton - .setDisabled( true ) - .setTitle( - ve.msg( 'visualeditor-dialog-transclusion-param-info-missing' ) - ); - } else { - this.infoButton.getPopup().$body.append( this.$description ); + // Construct the action buttons + + if ( !this.rawValueInput ) { + this.rawFallbackButton = new OO.ui.ButtonWidget( { + framed: false, + icon: 'wikiText', + title: ve.msg( 'visualeditor-dialog-transclusion-raw-fallback' ) + } ) + .connect( this, { click: 'onRawFallbackButtonClick' } ); + + this.$actions.append( this.rawFallbackButton.$element ); } + + if ( this.$description.text().trim() === '' ) { + this.infoButton = new OO.ui.ButtonWidget( { + disabled: true, + title: ve.msg( 'visualeditor-dialog-transclusion-param-info-missing' ), + framed: false, + icon: 'info', + classes: [ 've-ui-mwParameterPage-infoButton' ] + } ); + } else { + this.infoButton = new OO.ui.PopupButtonWidget( { + popup: { + $content: this.$description + }, + title: ve.msg( 'visualeditor-dialog-transclusion-param-info' ), + framed: false, + icon: 'info', + classes: [ 've-ui-mwParameterPage-infoButton' ] + } ); + } + + this.$actions.append( this.infoButton.$element ); + + if ( !this.parameter.isRequired() ) { + this.removeButton = new OO.ui.ButtonWidget( { + framed: false, + icon: 'remove', + title: ve.msg( 'visualeditor-dialog-transclusion-remove-param' ), + flags: [ 'destructive' ], + classes: [ 've-ui-mwParameterPage-removeButton' ] + } ) + .connect( this, { click: 'onRemoveButtonClick' } ); + + this.$actions.append( this.removeButton.$element ); + } + + this.addButton = new OO.ui.ButtonWidget( { + framed: false, + icon: 'parameter', + label: ve.msg( 'visualeditor-dialog-transclusion-add-param' ), + tabIndex: -1 + } ) + .connect( this, { click: 'onAddButtonFocus' } ); + + // Events + this.$labelElement.on( 'click', this.onLabelClick.bind( this ) ); + + // Initialization + this.$info + .addClass( 've-ui-mwParameterPage-info' ) + .append( this.$labelElement, this.statusIndicator.$element ); + this.$actions + .addClass( 've-ui-mwParameterPage-actions' ); + this.$labelElement + .addClass( 've-ui-mwParameterPage-label' ) + .text( this.spec.getParameterLabel( paramName ) ); + this.$field + .addClass( 've-ui-mwParameterPage-field' ) + .append( + this.valueInput.$element + ); + this.$more + .addClass( 've-ui-mwParameterPage-more' ) + .append( this.addButton.$element ); + this.$element + .addClass( 've-ui-mwParameterPage' ) + .append( this.$info, this.$field, this.$actions, this.$more ); }; /* Inheritance */ @@ -265,7 +279,6 @@ ve.ui.MWParameterPage.prototype.createValueInput = function () { } else if ( type !== 'line' ) { this.rawValueInput = true; valueInputConfig.multiline = true; - this.rawFallbackButton.$element.toggle( false ); } return new OO.ui.TextInputWidget( valueInputConfig );