jenkins-bot has submitted this change and it was merged.
Change subject: Redesign template parameter pages to be more space efficient
......................................................................
Redesign template parameter pages to be more space efficient
* Show label, input and remove control on a single line
* Right align label to conserve vertical space without sacrificing
fill-out speed
* Show description in gray text below the input
* Show remove button only when page is active
* Make description lighter when page is innactive
Change-Id: Iaa09f3bf909ccd415de7af8f428495fef3046893
---
M VisualEditor.php
M modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js
M modules/ve-mw/ui/styles/ve.ui.MWDialog.css
A modules/ve-mw/ui/styles/ve.ui.MWPage.css
4 files changed, 161 insertions(+), 40 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/VisualEditor.php b/VisualEditor.php
index 323434f..9197fcb 100644
--- a/VisualEditor.php
+++ b/VisualEditor.php
@@ -563,6 +563,7 @@
'modules/ve-mw/ui/styles/ve.ui.MWWidget.css',
'modules/ve-mw/ui/styles/ve.ui.MWDialog.css',
'modules/ve-mw/ui/styles/ve.ui.MWExtensionInspector.css',
+ 'modules/ve-mw/ui/styles/ve.ui.MWPage.css',
),
'dependencies' => array(
'ext.visualEditor.core',
diff --git a/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js
b/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js
index 28a0833..65218e5 100644
--- a/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js
+++ b/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js
@@ -17,50 +17,64 @@
* @param {Object} [config] Configuration options
*/
ve.ui.MWParameterPage = function VeUiMWParameter( parameter, name, config ) {
- var spec = parameter.getTemplate().getSpec();
+ var paramName = parameter.getName();
// Parent constructor
OO.ui.PageLayout.call( this, name, config );
// Properties
this.parameter = parameter;
- this.spec = spec;
+ this.spec = parameter.getTemplate().getSpec();
+ this.defaultValue = this.spec.getParameterDefaultValue( paramName );
+ this.$label = this.$( '<div>' );
+ this.$field = this.$( '<div>' );
+ this.$actions = this.$( '<div>' );
+ this.$info = this.$( '<div>' );
+ this.$description = this.$( '<div>' );
this.valueInput = new OO.ui.TextInputWidget( {
'$': this.$,
'multiline': true,
'autosize': true,
- 'classes': [ 've-ui-mwTransclusionDialog-input' ]
+ 'placeholder': this.defaultValue
} )
.setValue( this.parameter.getValue() )
- .connect( this, { 'change': 'onTextInputChange' } );
- this.valueField = new OO.ui.FieldLayout( this.valueInput, {
- '$': this.$,
- 'align': 'top',
- 'label': this.spec.getParameterDescription(
this.parameter.getName() ) || ''
- } );
+ .connect( this, { 'change': 'onValueInputChange' } );
this.removeButton = new OO.ui.ButtonWidget( {
'$': this.$,
'frameless': true,
'icon': 'remove',
'title': ve.msg(
'visualeditor-dialog-transclusion-remove-param' ),
- 'flags': ['destructive'],
- 'classes': [ 've-ui-mwTransclusionDialog-removeButton' ]
+ 'tabIndex': -1
} )
.connect( this, { 'click': 'onRemoveButtonClick' } );
- this.valueFieldset = new OO.ui.FieldsetLayout( {
- '$': this.$,
- 'label': this.spec.getParameterLabel( this.parameter.getName()
),
- 'icon': 'parameter',
- 'items': [ this.valueInput ]
- } );
// TODO: Use spec.required
// TODO: Use spec.deprecation
- // TODO: Use spec.default
// TODO: Use spec.type
+ // Events
+ this.$label.on( 'click', ve.bind( this.onLabelClick, this ) );
+ this.$description.on( 'click', ve.bind( this.onDescriptionClick, this )
);
+
// Initialization
- this.$element.append( this.valueFieldset.$element,
this.removeButton.$element );
+ this.$label
+ .addClass( 've-ui-mwParameterPage-label' )
+ .text( this.spec.getParameterLabel( paramName ) );
+ this.$actions
+ .addClass( 've-ui-mwParameterPage-actions' )
+ .append( this.removeButton.$element );
+ this.$description
+ .addClass( 've-ui-mwParameterPage-description' )
+ .text( this.spec.getParameterDescription( paramName ) || '' );
+ this.$info
+ .addClass( 've-ui-mwParameterPage-info' )
+ .append( this.$description );
+ this.$field
+ .addClass( 've-ui-mwParameterPage-field' )
+ .append( this.valueInput.$element, this.$actions, this.$info );
+ this.$element
+ .addClass( 've-ui-mwParameterPage' )
+ .append( this.$label, this.$field );
};
/* Inheritance */
@@ -68,6 +82,33 @@
OO.inheritClass( ve.ui.MWParameterPage, OO.ui.PageLayout );
/* Methods */
+
+ve.ui.MWParameterPage.prototype.isEmpty = function () {
+ return this.valueInput.getValue() === '' && this.defaultValue === '';
+};
+
+ve.ui.MWParameterPage.prototype.onValueInputChange = function () {
+ var value = this.valueInput.getValue();
+
+ this.parameter.setValue( value );
+
+ if ( this.outlineItem ) {
+ this.outlineItem.setFlags( { 'empty': this.isEmpty() } );
+ }
+};
+
+ve.ui.MWParameterPage.prototype.onRemoveButtonClick = function () {
+ this.parameter.remove();
+};
+
+ve.ui.MWParameterPage.prototype.onLabelClick = function () {
+ this.valueInput.simulateLabelClick();
+};
+
+ve.ui.MWParameterPage.prototype.onDescriptionClick = function () {
+ this.valueInput.simulateLabelClick();
+ this.$description.toggleClass( 've-ui-mwParameterPage-description-all'
);
+};
/**
* @inheritdoc
@@ -82,20 +123,15 @@
.setMovable( false )
.setRemovable( true )
.setLevel( 1 )
+ .setFlags( { 'empty': this.isEmpty() } )
.setLabel( this.spec.getParameterLabel(
this.parameter.getName() ) );
if ( this.parameter.isRequired() ) {
this.outlineItem
.setIndicator( 'required' )
- .setIndicatorTitle( ve.msg(
'visualeditor-dialog-transclusion-required-parameter' ) );
+ .setIndicatorTitle(
+ ve.msg(
'visualeditor-dialog-transclusion-required-parameter' )
+ );
}
}
-};
-
-ve.ui.MWParameterPage.prototype.onTextInputChange = function () {
- this.parameter.setValue( this.valueInput.getValue() );
-};
-
-ve.ui.MWParameterPage.prototype.onRemoveButtonClick = function () {
- this.parameter.remove();
};
diff --git a/modules/ve-mw/ui/styles/ve.ui.MWDialog.css
b/modules/ve-mw/ui/styles/ve.ui.MWDialog.css
index 91359fb..8f8ed39 100644
--- a/modules/ve-mw/ui/styles/ve.ui.MWDialog.css
+++ b/modules/ve-mw/ui/styles/ve.ui.MWDialog.css
@@ -7,24 +7,12 @@
/* ve.ui.MWTransclusionDialog */
-.ve-ui-mwTransclusionDialog-input {
- width: 100%;
-}
-
-.ve-ui-mwTransclusionDialog-input textarea {
- height: 2.5em;
-}
-
.ve-ui-mwTransclusionDialog-addTemplateFieldset .oo-ui-widget {
display: inline-block;
}
.ve-ui-mwTransclusionDialog-addTemplateFieldset .oo-ui-buttonedElement-framed {
margin-left: 0.5em;
-}
-
-.oo-ui-fieldsetLayout + .ve-ui-mwTransclusionDialog-addParameterFieldset {
- margin-top: 0;
}
.ve-ui-mwTransclusionDialog-addParameterFieldset
.ve-ui-mwParameterSearchWidget {
@@ -46,6 +34,7 @@
}
/* ve.ui.MWMediaDialog */
+
.ve-ui-mwMediaEditDialog-altText {
width: auto;
}
diff --git a/modules/ve-mw/ui/styles/ve.ui.MWPage.css
b/modules/ve-mw/ui/styles/ve.ui.MWPage.css
new file mode 100644
index 0000000..83cbaef
--- /dev/null
+++ b/modules/ve-mw/ui/styles/ve.ui.MWPage.css
@@ -0,0 +1,95 @@
+/*!
+ * VisualEditor MediaWiki UserInterface Inspector styles.
+ *
+ * @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/* ve.ui.MWParameterPage */
+
+.ve-ui-mwParameterPage.oo-ui-pageLayout {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+.ve-ui-mwParameterPage.oo-ui-pageLayout:last-of-type {
+ margin-bottom: 1.5em;
+}
+
+.ve-ui-mwParameterPage.oo-ui-pageLayout-active .ve-ui-mwParameterPage {
+ background-color: #f3f3f3;
+}
+
+.ve-ui-mwParameterPage-label,
+.ve-ui-mwParameterPage-field,
+.ve-ui-mwParameterPage-info,
+.ve-ui-mwParameterPage-actions,
+.ve-ui-mwParameterPage .oo-ui-textInputWidget {
+ display: inline-block;
+ vertical-align: top;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.ve-ui-mwParameterPage-label {
+ width: 20%;
+ padding: 1.33em 1em;
+ text-align: right;
+ cursor: default;
+}
+
+.ve-ui-mwParameterPage-field {
+ width: 80%;
+ position: relative;
+ padding-top: 0.75em;
+}
+
+.ve-ui-mwParameterPage .oo-ui-textInputWidget {
+ width: 90%;
+}
+
+.ve-ui-mwParameterPage .oo-ui-textInputWidget textarea {
+ height: 2.5em;
+}
+
+.ve-ui-mwParameterPage-actions {
+ display: none;
+ width: 10%;
+ padding: 0.33em 0;
+ text-align: right;
+}
+
+.ve-ui-mwParameterPage.oo-ui-pageLayout-active .ve-ui-mwParameterPage-actions {
+ display: inline-block;
+}
+
+.ve-ui-mwParameterPage-info {
+ position: relative;
+ width: 90%;
+ padding-bottom: 0.75em;
+ cursor: default;
+}
+
+.ve-ui-mwParameterPage-description {
+ color: #ddd;
+ font-size: 0.9em;
+ line-height: 1.5em;
+ height: 1.5em;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ -webkit-transition: color 200ms;
+ -moz-transition: color 200ms;
+ -o-transition: color 200ms;
+ transition: color 200ms;
+}
+
+.ve-ui-mwParameterPage-description-all {
+ height: auto;
+ white-space: normal;
+}
+
+.ve-ui-mwParameterPage.oo-ui-pageLayout-active
.ve-ui-mwParameterPage-description {
+ color: #999;
+}
--
To view, visit https://gerrit.wikimedia.org/r/115548
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Iaa09f3bf909ccd415de7af8f428495fef3046893
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <tpars...@wikimedia.org>
Gerrit-Reviewer: Catrope <roan.katt...@gmail.com>
Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
