Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/108958
Change subject: FieldLayout support
......................................................................
FieldLayout support
- Switch to using FieldLayout for laying out forms
- Update OOUI
Change-Id: I757aecf3485673f54aa9e7f38e88c079dda4451d
---
M lib/ve
M modules/ve-mw/i18n/en.json
M modules/ve-mw/ui/dialogs/ve.ui.MWReferenceDialog.js
M modules/ve-mw/ui/dialogs/ve.ui.MWReferenceListDialog.js
M modules/ve-mw/ui/dialogs/ve.ui.MWSaveDialog.js
M modules/ve-mw/ui/pages/ve.ui.MWCategoriesPage.js
M modules/ve-mw/ui/pages/ve.ui.MWSettingsPage.js
M modules/ve-mw/ui/pages/ve.ui.MWTemplateParameterPage.js
M modules/ve-mw/ui/styles/ve.ui.MWWidget.css
M modules/ve-mw/ui/widgets/ve.ui.MWCategoryItemWidget.js
M modules/ve-mw/ui/widgets/ve.ui.MWCategoryPopupWidget.js
11 files changed, 88 insertions(+), 78 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/58/108958/1
diff --git a/lib/ve b/lib/ve
index e7e2833..577fad4 160000
--- a/lib/ve
+++ b/lib/ve
-Subproject commit e7e283316e1b3e98706fb9051db7964321e6d300
+Subproject commit 577fad4fdce3dfe3ddae9e3c9fa69cba9fb08917
diff --git a/modules/ve-mw/i18n/en.json b/modules/ve-mw/i18n/en.json
index 206d719..ec996d3 100644
--- a/modules/ve-mw/i18n/en.json
+++ b/modules/ve-mw/i18n/en.json
@@ -60,9 +60,9 @@
"visualeditor-dialog-meta-settings-label": "Page settings",
"visualeditor-dialog-meta-settings-noeditsection-label": "Disable the edit
links next to each heading on this page.",
"visualeditor-dialog-meta-settings-section": "Page settings",
- "visualeditor-dialog-meta-settings-toc-default": "Show if needed",
- "visualeditor-dialog-meta-settings-toc-disable": "Never show",
- "visualeditor-dialog-meta-settings-toc-force": "Always show",
+ "visualeditor-dialog-meta-settings-toc-default": "If needed",
+ "visualeditor-dialog-meta-settings-toc-disable": "Never",
+ "visualeditor-dialog-meta-settings-toc-force": "Always",
"visualeditor-dialog-meta-settings-toc-label": "Show the Table of
Contents",
"visualeditor-dialog-meta-title": "Options",
"visualeditor-dialog-reference-insert-button": "Insert reference",
diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWReferenceDialog.js
b/modules/ve-mw/ui/dialogs/ve.ui.MWReferenceDialog.js
index ff5814c..7497af6 100644
--- a/modules/ve-mw/ui/dialogs/ve.ui.MWReferenceDialog.js
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWReferenceDialog.js
@@ -211,9 +211,9 @@
} );
// TODO: Use a drop-down or something, and populate with existing
groups instead of free-text
this.referenceGroupInput = new OO.ui.TextInputWidget( { '$': this.$ } );
- this.referenceGroupLabel = new OO.ui.InputLabelWidget( {
+ this.referenceGroupField = new OO.ui.FieldLayout(
this.referenceGroupInput, {
'$': this.$,
- 'input': this.referenceGroupInput,
+ 'align': 'top',
'label': ve.msg(
'visualeditor-dialog-reference-options-group-label' )
} );
this.search = new ve.ui.MWReferenceSearchWidget(
@@ -242,7 +242,7 @@
// Initialization
this.panels.addItems( [ this.editPanel, this.searchPanel ] );
this.editPanel.$element.append( this.contentFieldset.$element,
this.optionsFieldset.$element );
- this.optionsFieldset.$element.append(
this.referenceGroupLabel.$element, this.referenceGroupInput.$element );
+ this.optionsFieldset.addItems( [ this.referenceGroupField ] );
this.searchPanel.$element.append( this.search.$element );
this.$body.append( this.panels.$element );
this.$foot.append(
diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWReferenceListDialog.js
b/modules/ve-mw/ui/dialogs/ve.ui.MWReferenceListDialog.js
index 412d52d..6391001 100644
--- a/modules/ve-mw/ui/dialogs/ve.ui.MWReferenceListDialog.js
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWReferenceListDialog.js
@@ -52,9 +52,9 @@
} );
this.groupInput = new OO.ui.TextInputWidget( { '$': this.$ } );
- this.groupLabel = new OO.ui.InputLabelWidget( {
+ this.groupField = new OO.ui.FieldLayout( this.groupInput, {
'$': this.$,
- 'input': this.groupInput,
+ 'align': 'top',
'label': ve.msg(
'visualeditor-dialog-reference-options-group-label' )
} );
@@ -68,7 +68,7 @@
this.applyButton.connect( this, { 'click': [ 'close', { 'action':
'apply' } ] } );
// Initialization
- this.optionsFieldset.$element.append( this.groupLabel.$element,
this.groupInput.$element );
+ this.optionsFieldset.addItems( [ this.groupField ] );
this.editPanel.$element.append( this.optionsFieldset.$element );
this.$body.append( this.editPanel.$element );
this.$foot.append( this.applyButton.$element );
diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWSaveDialog.js
b/modules/ve-mw/ui/dialogs/ve.ui.MWSaveDialog.js
index d99c188..698fc52 100644
--- a/modules/ve-mw/ui/dialogs/ve.ui.MWSaveDialog.js
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWSaveDialog.js
@@ -302,7 +302,7 @@
this.$saveOptions = this.$( '<div>' ).addClass(
've-ui-mwSaveDialog-options' ).append(
this.$( '<div>' ).addClass( 've-ui-mwSaveDialog-checkboxes' ),
- new OO.ui.InputLabelWidget( { '$': this.$, 'label': 'text' }
).$element
+ new OO.ui.LabelWidget( { '$': this.$, 'label': 'text' }
).$element
.addClass( 've-ui-mwSaveDialog-editSummary-count'
).text( this.editSummaryByteLimit )
);
this.$saveMessages = this.$( '<div>' );
diff --git a/modules/ve-mw/ui/pages/ve.ui.MWCategoriesPage.js
b/modules/ve-mw/ui/pages/ve.ui.MWCategoriesPage.js
index 86b9eb8..19bafce 100644
--- a/modules/ve-mw/ui/pages/ve.ui.MWCategoriesPage.js
+++ b/modules/ve-mw/ui/pages/ve.ui.MWCategoriesPage.js
@@ -47,11 +47,14 @@
this.defaultSortInput = new OO.ui.TextInputWidget( {
'$': this.$, 'placeholder': this.fallbackDefaultSortKey
} );
- this.defaultSortLabel = new OO.ui.InputLabelWidget( {
- '$': this.$,
- 'input': this.defaultSortInput,
- 'label': ve.msg(
'visualeditor-dialog-meta-categories-defaultsort-label' )
- } );
+ this.defaultSort = new OO.ui.FieldLayout(
+ this.defaultSortInput,
+ {
+ '$': this.$,
+ 'align': 'top',
+ 'label': ve.msg(
'visualeditor-dialog-meta-categories-defaultsort-label' )
+ }
+ );
// Events
this.metaList.connect( this, {
@@ -69,10 +72,7 @@
// Initialization
this.categoryWidget.addItems( this.getCategoryItems() );
this.categoriesFieldset.$element.append( this.categoryWidget.$element );
- this.categoryOptionsFieldset.$element.append(
- this.defaultSortLabel.$element,
- this.defaultSortInput.$element
- );
+ this.categoryOptionsFieldset.addItems( [ this.defaultSort ] );
this.$element.append( this.categoriesFieldset.$element,
this.categoryOptionsFieldset.$element );
};
diff --git a/modules/ve-mw/ui/pages/ve.ui.MWSettingsPage.js
b/modules/ve-mw/ui/pages/ve.ui.MWSettingsPage.js
index cee8161..c873510 100644
--- a/modules/ve-mw/ui/pages/ve.ui.MWSettingsPage.js
+++ b/modules/ve-mw/ui/pages/ve.ui.MWSettingsPage.js
@@ -25,7 +25,7 @@
// Properties
this.metaList = surface.getModel().metaList;
- this.tocOptionTouched = false;
+ this.tableOfContentsTouched = false;
this.label = ve.msg( 'visualeditor-dialog-meta-settings-section' );
this.settingsFieldset = new OO.ui.FieldsetLayout( {
@@ -37,36 +37,41 @@
// Initialization
// Table of Contents items
- this.tocOptionSelector = new OO.ui.SelectWidget( { '$': this.$ } );
- this.tocOptionWidgets = {
- 'default': new OO.ui.OptionWidget(
- 'default',
- { 'label': ve.msg(
'visualeditor-dialog-meta-settings-toc-default' ) }
- ),
- 'mwTOCForce': new OO.ui.OptionWidget(
- 'mwTOCForce',
- { 'label': ve.msg(
'visualeditor-dialog-meta-settings-toc-force' ) }
- ),
- 'mwTOCDisable': new OO.ui.OptionWidget(
- 'mwTOCDisable',
- { 'label': ve.msg(
'visualeditor-dialog-meta-settings-toc-disable' ) }
- )
- };
- this.tocOptionSelector.addItems( ve.getObjectValues(
this.tocOptionWidgets ) );
- this.settingsFieldset.$element.append(
- this.$( '<span>' )
- .text( ve.msg(
'visualeditor-dialog-meta-settings-toc-label' ) ),
- this.tocOptionSelector.$element
+ this.tableOfContents = new OO.ui.FieldLayout(
+ new OO.ui.ButtonSelectWidget( { '$': this.$ } )
+ .addItems( [
+ new OO.ui.ButtonOptionWidget(
+ 'mwTOCForce',
+ { 'label': ve.msg(
'visualeditor-dialog-meta-settings-toc-force' ) }
+ ),
+ new OO.ui.ButtonOptionWidget(
+ 'default',
+ { 'label': ve.msg(
'visualeditor-dialog-meta-settings-toc-default' ) }
+ ),
+ new OO.ui.ButtonOptionWidget(
+ 'mwTOCDisable',
+ { 'label': ve.msg(
'visualeditor-dialog-meta-settings-toc-disable' ) }
+ )
+ ] )
+ .connect( this, { 'select':
'onTableOfContentsFieldChange' } ),
+ {
+ '$': this.$,
+ 'align': 'top',
+ 'label': ve.msg(
'visualeditor-dialog-meta-settings-toc-label' )
+ }
);
- this.tocOptionSelector.connect( this, { 'select': 'onTOCOptionChange' }
);
// Disable section edit links items
- this.disableSectionEditLinksInput = new OO.ui.CheckboxWidget( {
- '$': this.$,
- 'label': ve.msg(
'visualeditor-dialog-meta-settings-noeditsection-label' )
- } );
- this.settingsFieldset.$element.append(
this.disableSectionEditLinksInput.$element );
+ this.disabledSectionEditLinks = new OO.ui.FieldLayout(
+ new OO.ui.CheckboxInputWidget( { '$': this.$ } ),
+ {
+ '$': this.$,
+ 'align': 'inline',
+ 'label': ve.msg(
'visualeditor-dialog-meta-settings-noeditsection-label' ),
+ }
+ );
+ this.settingsFieldset.addItems( [ this.tableOfContents,
this.disabledSectionEditLinks ] );
this.$element.append( this.settingsFieldset.$element );
};
@@ -81,8 +86,8 @@
*
* @method
*/
-ve.ui.MWSettingsPage.prototype.onTOCOptionChange = function () {
- this.tocOptionTouched = true;
+ve.ui.MWSettingsPage.prototype.onTableOfContentsFieldChange = function () {
+ this.tableOfContentsTouched = true;
};
/**
@@ -90,7 +95,7 @@
*
* @returns {ve.dm.MetaItem|null} TOC option, if any
*/
-ve.ui.MWSettingsPage.prototype.getTOCOptionItem = function () {
+ve.ui.MWSettingsPage.prototype.getTableOfContentsMetaItem = function () {
return this.metaList.getItemsInGroup( 'mwTOC' )[0] || null;
};
@@ -109,15 +114,17 @@
* @param {Object} [data] Dialog setup data
*/
ve.ui.MWSettingsPage.prototype.setup = function () {
- var tocOption = this.getTOCOptionItem(),
- tocType = tocOption && tocOption.element.type || 'default';
+ var tableOfContentsMetaItem = this.getTableOfContentsMetaItem(),
+ tableOfContentsField = this.tableOfContents.getField(),
+ tableOfContentsMode = tableOfContentsMetaItem &&
+ tableOfContentsMetaItem.getType() || 'default';
// Table of Contents items
- this.tocOptionSelector.selectItem( this.tocOptionWidgets[tocType] );
- this.tocOptionTouched = false;
+ tableOfContentsField.selectItem( tableOfContentsField.getItemFromData(
tableOfContentsMode ) );
+ this.tableOfContentsTouched = false;
// Disable section edit links items
- this.disableSectionEditLinksInput.setValue(
!!this.getDisableSectionEditLinksItem() );
+ this.disabledSectionEditLinks.getField().setValue(
!!this.getDisableSectionEditLinksItem() );
};
/**
@@ -130,27 +137,28 @@
data = data || {};
var // Table of Contents items
- currentTOCItem = this.getTOCOptionItem(),
- newTOCData = this.tocOptionSelector.getSelectedItem(),
+ tableOfContentsMetaItem = this.getTableOfContentsMetaItem(),
+ tableOfContentsSelectedItem =
this.tableOfContents.getField().getSelectedItem(),
+ tableOfContentsValue = tableOfContentsSelectedItem &&
tableOfContentsSelectedItem.getData(),
// Disable section edit links items
currentDisableSectionEditLinksItem =
this.getDisableSectionEditLinksItem(),
- newDisableSectionEditState =
this.disableSectionEditLinksInput.getValue();
+ newDisableSectionEditState =
this.disabledSectionEditLinks.getField().getValue();
// Alter the TOC option flag iff it's been touched & is actually
different
- if ( this.tocOptionTouched ) {
- if ( newTOCData.data === 'default' ) {
- if ( currentTOCItem ) {
- currentTOCItem.remove();
+ if ( this.tableOfContentsTouched ) {
+ if ( tableOfContentsValue === 'default' ) {
+ if ( tableOfContentsMetaItem ) {
+ tableOfContentsMetaItem.remove();
}
} else {
- if ( !currentTOCItem ) {
- this.metaList.insertMeta( { 'type':
newTOCData.data } );
- } else if ( currentTOCItem.getType() !==
newTOCData.data ) {
- currentTOCItem.replaceWith(
+ if ( !tableOfContentsMetaItem ) {
+ this.metaList.insertMeta( { 'type':
tableOfContentsValue } );
+ } else if ( tableOfContentsMetaItem.getType() !==
tableOfContentsValue ) {
+ tableOfContentsMetaItem.replaceWith(
ve.extendObject( true, {},
- currentTOCItem.getElement(),
- { 'type': newTOCData.data }
+
tableOfContentsMetaItem.getElement(),
+ { 'type': tableOfContentsValue }
)
);
}
diff --git a/modules/ve-mw/ui/pages/ve.ui.MWTemplateParameterPage.js
b/modules/ve-mw/ui/pages/ve.ui.MWTemplateParameterPage.js
index b23c9b8..d3bc62b 100644
--- a/modules/ve-mw/ui/pages/ve.ui.MWTemplateParameterPage.js
+++ b/modules/ve-mw/ui/pages/ve.ui.MWTemplateParameterPage.js
@@ -34,16 +34,16 @@
this.parameter = parameter;
this.spec = parameter.getTemplate().getSpec();
this.label = this.spec.getParameterLabel( this.parameter.getName() );
- this.textInput = new OO.ui.TextInputWidget( {
+ this.valueInput = new OO.ui.TextInputWidget( {
'$': this.$,
'multiline': true,
'classes': [ 've-ui-mwTransclusionDialog-input' ]
} )
.setValue( this.parameter.getValue() )
.connect( this, { 'change': 'onTextInputChange' } );
- this.inputLabel = new OO.ui.InputLabelWidget( {
+ this.valueField = new OO.ui.FieldLayout( this.valueInput, {
'$': this.$,
- 'input': this.textInput,
+ 'align': 'top',
'label': this.spec.getParameterDescription(
this.parameter.getName() ) || ''
} );
this.removeButton = new OO.ui.ButtonWidget( {
@@ -59,7 +59,7 @@
'$': this.$,
'label': this.spec.getParameterLabel( this.parameter.getName()
),
'icon': 'parameter',
- '$content': this.inputLabel.$element.add(
this.textInput.$element )
+ 'items': [ this.valueInput ]
} );
// TODO: Use spec.required
@@ -78,7 +78,7 @@
/* Methods */
ve.ui.MWTemplateParameterPage.prototype.onTextInputChange = function () {
- this.parameter.setValue( this.textInput.getValue() );
+ this.parameter.setValue( this.valueInput.getValue() );
};
ve.ui.MWTemplateParameterPage.prototype.onRemoveButtonClick = function () {
diff --git a/modules/ve-mw/ui/styles/ve.ui.MWWidget.css
b/modules/ve-mw/ui/styles/ve.ui.MWWidget.css
index 3e361f9..53e4224 100644
--- a/modules/ve-mw/ui/styles/ve.ui.MWWidget.css
+++ b/modules/ve-mw/ui/styles/ve.ui.MWWidget.css
@@ -179,7 +179,7 @@
display: block;
}
-.ve-ui-mwCategoryPopupWidget-sortKeyForm .oo-ui-inputLabelWidget {
+.ve-ui-mwCategoryPopupWidget-sortKeyForm .oo-ui-labelWidget {
padding: 0 0.125em 0.5em 0.125em;
}
diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWCategoryItemWidget.js
b/modules/ve-mw/ui/widgets/ve.ui.MWCategoryItemWidget.js
index a1ffb6a..3521014 100644
--- a/modules/ve-mw/ui/widgets/ve.ui.MWCategoryItemWidget.js
+++ b/modules/ve-mw/ui/widgets/ve.ui.MWCategoryItemWidget.js
@@ -41,7 +41,7 @@
// Initialization
this.$label.text( this.value );
- this.$arrow.addClass( 've-ui-mwCategoryItemControl oo-ui-icon-down' );
+ this.$arrow.addClass( 've-ui-mwCategoryItemControl
oo-ui-indicator-down' );
this.$categoryItem
.addClass( 've-ui-mwCategoryItemButton' )
.append( this.$label, this.$arrow, this.$( '<div>' ).css(
'clear', 'both' ) );
diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWCategoryPopupWidget.js
b/modules/ve-mw/ui/widgets/ve.ui.MWCategoryPopupWidget.js
index 2a92ed7..7b6255f 100644
--- a/modules/ve-mw/ui/widgets/ve.ui.MWCategoryPopupWidget.js
+++ b/modules/ve-mw/ui/widgets/ve.ui.MWCategoryPopupWidget.js
@@ -34,11 +34,13 @@
'title': ve.msg( 'visualeditor-inspector-remove-tooltip' )
} );
this.sortKeyInput = new OO.ui.TextInputWidget( { '$': this.$ } );
- this.sortKeyLabel = new OO.ui.InputLabelWidget(
- { '$': this.$, '$input': this.sortKeyInput, 'label': ve.msg (
'visualeditor-dialog-meta-categories-sortkey-label' ) }
- );
+ this.sortKeyField = new OO.ui.FieldLayout( this.sortKeyInput, {
+ '$': this.$,
+ 'align': 'top',
+ 'label': ve.msg (
'visualeditor-dialog-meta-categories-sortkey-label' )
+ } );
this.$sortKeyForm = this.$( '<form>' ).addClass(
've-ui-mwCategoryPopupWidget-sortKeyForm' )
- .append( this.sortKeyLabel.$element, this.sortKeyInput.$element
);
+ .append( this.sortKeyField.$element );
// Events
this.connect( this, { 'hide': 'onHide' } );
--
To view, visit https://gerrit.wikimedia.org/r/108958
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I757aecf3485673f54aa9e7f38e88c079dda4451d
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
