' );
this.$more = this.$( '
' );
@@ -56,6 +57,7 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config )
'tabIndex': -1
} )
.connect( this, { 'click': 'onAddButtonClick' } );
+ this.requiredIndicator = new OO.ui.IndicatorWidget( { '$': this.$ } );
// TODO: Use spec.deprecation
// TODO: Use spec.type
@@ -71,6 +73,9 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config )
this.$actions
.addClass( 've-ui-mwParameterPage-actions' )
.append( this.removeButton.$element );
+ this.$indicators
+ .addClass( 've-ui-mwParameterPage-indicators' )
+ .append( this.requiredIndicator.$element );
this.$description
.addClass( 've-ui-mwParameterPage-description' )
.text( this.spec.getParameterDescription( paramName ) || '' );
@@ -79,13 +84,21 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config )
.append( this.$description );
this.$field
.addClass( 've-ui-mwParameterPage-field' )
- .append( this.valueInput.$element, this.$actions, this.$info );
+ .append( this.valueInput.$element, this.$indicators, this.$actions, this.$info );
this.$more
.addClass( 've-ui-mwParameterPage-more' )
.append( this.addButton.$element );
this.$element
.addClass( 've-ui-mwParameterPage' )
.append( this.$label, this.$field, this.$more );
+
+ if ( this.parameter.isRequired() ) {
+ this.requiredIndicator
+ .setIndicator( 'required' )
+ .setIndicatorTitle(
+ ve.msg( 'visualeditor-dialog-transclusion-required-parameter' )
+ );
+ }
};
/* Inheritance */
diff --git a/modules/ve-mw/ui/styles/ve.ui.MWPage.css b/modules/ve-mw/ui/styles/ve.ui.MWPage.css
index ab8b15edff..3cee53fa40 100644
--- a/modules/ve-mw/ui/styles/ve.ui.MWPage.css
+++ b/modules/ve-mw/ui/styles/ve.ui.MWPage.css
@@ -24,6 +24,7 @@
.ve-ui-mwParameterPage-field,
.ve-ui-mwParameterPage-info,
.ve-ui-mwParameterPage-actions,
+.ve-ui-mwParameterPage-indicators,
.ve-ui-mwParameterPage .oo-ui-textInputWidget {
display: inline-block;
vertical-align: top;
@@ -46,20 +47,24 @@
}
.ve-ui-mwParameterPage .oo-ui-textInputWidget {
- width: 90%;
+ width: 86%;
}
.ve-ui-mwParameterPage .oo-ui-textInputWidget textarea {
height: 2.5em;
}
+.ve-ui-mwParameterPage-indicators,
.ve-ui-mwParameterPage-actions {
- display: none;
- width: 10%;
+ width: 7%;
padding: 0.33em 0;
text-align: right;
}
+.ve-ui-mwParameterPage-actions {
+ display: none;
+}
+
.ve-ui-mwParameterPage.oo-ui-pageLayout-active .ve-ui-mwParameterPage-actions {
display: inline-block;
}