Bartosz Dziewoński has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/332080 )
Change subject: FieldLayout: Remove the $body wrapper
......................................................................
FieldLayout: Remove the $body wrapper
Follow-up to I3396bc53a7c2f2f5ea98c9a1a511cf14824e2dce.
I'm submitting this as a separate change in case it causes
unforeseen problems and needs to be backed out.
It should be safe, but it could break some weird unsupported
customizations of FieldLayout (in particular, it messes up the
"console" in our demos a bit).
Change-Id: Icbcc27f63443e0285d86833e2dc98ab213c98111
---
M php/layouts/FieldLayout.php
M src/layouts/FieldLayout.js
M src/styles/layouts/FieldLayout.less
M src/themes/apex/layouts.less
M src/themes/mediawiki/layouts.less
M src/themes/mediawiki/widgets.less
6 files changed, 53 insertions(+), 56 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/80/332080/1
diff --git a/php/layouts/FieldLayout.php b/php/layouts/FieldLayout.php
index c3fdf1e..744e5b2 100644
--- a/php/layouts/FieldLayout.php
+++ b/php/layouts/FieldLayout.php
@@ -52,7 +52,7 @@
*/
protected $help;
- protected $field, $header, $body, $messages;
+ protected $field, $header, $messages;
/**
* @param Widget $fieldWidget Field widget
@@ -77,22 +77,21 @@
throw new Exception( 'Widget not found' );
}
- $hasInputWidget = $fieldWidget::$supportsSimpleLabel;
-
// Config initialization
$config = array_merge( [ 'align' => 'left' ], $config );
+
+ // Properties (must be set before parent constructor which
calls getTagName())
+ $this->fieldWidget = $fieldWidget;
// Parent constructor
parent::__construct( $config );
// Properties
- $this->fieldWidget = $fieldWidget;
$this->errors = isset( $config['errors'] ) ? $config['errors']
: [];
$this->notices = isset( $config['notices'] ) ?
$config['notices'] : [];
$this->field = new Tag( 'div' );
$this->messages = new Tag( 'ul' );
$this->header = new Tag( 'div' );
- $this->body = new Tag( $hasInputWidget ? 'label' : 'div' );
if ( isset( $config['help'] ) ) {
$this->help = new ButtonWidget( [
'classes' => [ 'oo-ui-fieldLayout-help' ],
@@ -112,12 +111,10 @@
// Initialization
$this
->addClasses( [ 'oo-ui-fieldLayout' ] )
- ->toggleClasses( [ 'oo-ui-fieldLayout-disable' ],
$this->fieldWidget->isDisabled() )
- ->appendContent( $this->body );
+ ->toggleClasses( [ 'oo-ui-fieldLayout-disable' ],
$this->fieldWidget->isDisabled() );
if ( count( $this->errors ) || count( $this->notices ) ) {
$this->appendContent( $this->messages );
}
- $this->body->addClasses( [ 'oo-ui-fieldLayout-body' ] );
$this->header->addClasses( [ 'oo-ui-fieldLayout-header' ] );
$this->messages->addClasses( [ 'oo-ui-fieldLayout-messages' ] );
$this->field
@@ -132,6 +129,10 @@
}
$this->setAlignment( $config['align'] );
+ }
+
+ public function getTagName() {
+ return $this->fieldWidget::$supportsSimpleLabel ? 'label' :
'div';
}
/**
@@ -176,17 +177,15 @@
if ( !in_array( $value, [ 'left', 'right', 'top',
'inline' ] ) ) {
$value = 'left';
}
- // Reorder elements
- $this->body->clearContent();
if ( $value === 'top' ) {
$this->header->appendContent( $this->label,
$this->help );
- $this->body->appendContent( $this->header,
$this->field );
+ $this->prependContent( $this->header,
$this->field );
} elseif ( $value === 'inline' ) {
$this->header->appendContent( $this->label,
$this->help );
- $this->body->appendContent( $this->field,
$this->header );
+ $this->prependContent( $this->field,
$this->header );
} else {
$this->header->appendContent( $this->label );
- $this->body->appendContent( $this->header,
$this->help, $this->field );
+ $this->prependContent( $this->header,
$this->help, $this->field );
}
// Set classes. The following classes can be used here:
// * oo-ui-fieldLayout-align-left
diff --git a/src/layouts/FieldLayout.js b/src/layouts/FieldLayout.js
index e91bd09..217b896 100644
--- a/src/layouts/FieldLayout.js
+++ b/src/layouts/FieldLayout.js
@@ -39,7 +39,7 @@
* @throws {Error} An error is thrown if no widget is specified
*/
OO.ui.FieldLayout = function OoUiFieldLayout( fieldWidget, config ) {
- var hasInputWidget, $div;
+ var $div;
// Allow passing positional parameters inside the config object
if ( OO.isPlainObject( fieldWidget ) && config === undefined ) {
@@ -52,10 +52,11 @@
throw new Error( 'Widget not found' );
}
- hasInputWidget = fieldWidget.constructor.static.supportsSimpleLabel;
-
// Configuration initialization
config = $.extend( { align: 'left' }, config );
+
+ // Properties (must be set before parent constructor which calls
getTagName())
+ this.fieldWidget = fieldWidget;
// Parent constructor
OO.ui.FieldLayout.parent.call( this, config );
@@ -65,13 +66,11 @@
OO.ui.mixin.TitledElement.call( this, $.extend( {}, config, { $titled:
this.$label } ) );
// Properties
- this.fieldWidget = fieldWidget;
this.errors = [];
this.notices = [];
this.$field = $( '<div>' );
this.$messages = $( '<ul>' );
this.$header = $( '<div>' );
- this.$body = $( '<' + ( hasInputWidget ? 'label' : 'div' ) + '>' );
this.align = null;
if ( config.help ) {
this.popupButtonWidget = new OO.ui.PopupButtonWidget( {
@@ -95,7 +94,7 @@
}
// Events
- if ( hasInputWidget ) {
+ if ( this.fieldWidget.constructor.static.supportsSimpleLabel ) {
this.$label.on( 'click', this.onLabelClick.bind( this ) );
}
this.fieldWidget.connect( this, { disable: 'onFieldDisable' } );
@@ -103,9 +102,7 @@
// Initialization
this.$element
.addClass( 'oo-ui-fieldLayout' )
- .toggleClass( 'oo-ui-fieldLayout-disabled',
this.fieldWidget.isDisabled() )
- .append( this.$body );
- this.$body.addClass( 'oo-ui-fieldLayout-body' );
+ .toggleClass( 'oo-ui-fieldLayout-disabled',
this.fieldWidget.isDisabled() );
this.$header.addClass( 'oo-ui-fieldLayout-header' );
this.$messages.addClass( 'oo-ui-fieldLayout-messages' );
this.$field
@@ -124,6 +121,13 @@
OO.mixinClass( OO.ui.FieldLayout, OO.ui.mixin.TitledElement );
/* Methods */
+
+/**
+ * @inheritdoc
+ */
+OO.ui.FieldLayout.prototype.getTagName = function () {
+ return this.fieldWidget.constructor.static.supportsSimpleLabel ?
'label' : 'div';
+};
/**
* Handle field disable events.
@@ -194,13 +198,13 @@
// Reorder elements
if ( value === 'top' ) {
this.$header.append( this.$label, this.$help );
- this.$body.append( this.$header, this.$field );
+ this.$element.prepend( this.$header, this.$field );
} else if ( value === 'inline' ) {
this.$header.append( this.$label, this.$help );
- this.$body.append( this.$field, this.$header );
+ this.$element.prepend( this.$field, this.$header );
} else {
this.$header.append( this.$label );
- this.$body.append( this.$header, this.$help,
this.$field );
+ this.$element.prepend( this.$header, this.$help,
this.$field );
}
// Set classes. The following classes can be used here:
// * oo-ui-fieldLayout-align-left
@@ -253,7 +257,7 @@
this.$messages.empty();
if ( this.errors.length || this.notices.length ) {
- this.$body.after( this.$messages );
+ this.$element.append( this.$messages );
} else {
this.$messages.remove();
return;
diff --git a/src/styles/layouts/FieldLayout.less
b/src/styles/layouts/FieldLayout.less
index 455a00b..b79b986 100644
--- a/src/styles/layouts/FieldLayout.less
+++ b/src/styles/layouts/FieldLayout.less
@@ -15,21 +15,19 @@
&.oo-ui-fieldLayout-align-left,
&.oo-ui-fieldLayout-align-right {
- > .oo-ui-fieldLayout-body {
- > .oo-ui-fieldLayout-header,
- > .oo-ui-fieldLayout-help,
- > .oo-ui-fieldLayout-field {
- display: block;
- float: left;
- }
+ > .oo-ui-fieldLayout-header,
+ > .oo-ui-fieldLayout-help,
+ > .oo-ui-fieldLayout-field {
+ display: block;
+ float: left;
}
}
- &.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body >
.oo-ui-fieldLayout-header {
+ &.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-header {
text-align: right;
}
- &.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
+ &.oo-ui-fieldLayout-align-inline {
display: table;
width: 100%;
diff --git a/src/themes/apex/layouts.less b/src/themes/apex/layouts.less
index 986446c..1605b3f 100644
--- a/src/themes/apex/layouts.less
+++ b/src/themes/apex/layouts.less
@@ -35,7 +35,7 @@
&.oo-ui-fieldLayout-align-left,
&.oo-ui-fieldLayout-align-right {
- &.oo-ui-labelElement > .oo-ui-fieldLayout-body >
.oo-ui-fieldLayout-header {
+ &.oo-ui-labelElement > .oo-ui-fieldLayout-header {
margin-right: 5%;
width: 35%;
@@ -45,31 +45,29 @@
}
}
- > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-help {
+ > .oo-ui-fieldLayout-help {
// Override the default
margin-right: 0;
// Move into the space of 'margin-right' of header
margin-left: -@size-icon;
}
- > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
+ > .oo-ui-fieldLayout-field {
width: 60%;
}
}
&.oo-ui-fieldLayout-align-inline {
margin-bottom: 1.25em;
- & > .oo-ui-fieldLayout-body {
- max-width: 50em;
- }
+ max-width: 50em;
- &.oo-ui-labelElement > .oo-ui-fieldLayout-body >
.oo-ui-fieldLayout-header > .oo-ui-labelElement-label {
+ &.oo-ui-labelElement > .oo-ui-fieldLayout-header >
.oo-ui-labelElement-label {
padding: 0.25em 0.25em 0.25em 0.5em;
}
}
&.oo-ui-fieldLayout-align-top {
- &.oo-ui-labelElement > .oo-ui-fieldLayout-body >
.oo-ui-fieldLayout-header {
+ &.oo-ui-labelElement > .oo-ui-fieldLayout-header {
max-width: 50em;
padding: 0.5em 0;
}
@@ -80,7 +78,7 @@
margin-top: 0.25em;
}
- &-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header >
.oo-ui-labelElement-label {
+ &-disabled > .oo-ui-fieldLayout-header > .oo-ui-labelElement-label {
color: #ccc;
}
diff --git a/src/themes/mediawiki/layouts.less
b/src/themes/mediawiki/layouts.less
index 60fcb32..5eeaa8b 100644
--- a/src/themes/mediawiki/layouts.less
+++ b/src/themes/mediawiki/layouts.less
@@ -52,7 +52,7 @@
}
&.oo-ui-labelElement {
- & > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
+ & > .oo-ui-fieldLayout-header {
padding-bottom: 0.3125em; // equals `4px` at base
`font-size: 12.8px`
> .oo-ui-labelElement-label {
@@ -60,26 +60,24 @@
}
}
- &.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body >
.oo-ui-fieldLayout-header > .oo-ui-labelElement-label {
+ &.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-header >
.oo-ui-labelElement-label {
padding: 0.3125em 0.46875em; // equals `4px 6px` at
base `font-size: 12.8px`
// `6px` is not aligned to M101 design guideline, as
checkbox and radios sizes aren't either
}
&.oo-ui-fieldLayout-align-inline {
- & > .oo-ui-fieldLayout-body {
- max-width: 50em;
- }
+ max-width: 50em;
}
&.oo-ui-fieldLayout-align-top {
- & > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header
{
+ & > .oo-ui-fieldLayout-header {
max-width: 50em;
}
}
&.oo-ui-fieldLayout-align-left,
&.oo-ui-fieldLayout-align-right {
- & > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header
{
+ & > .oo-ui-fieldLayout-header {
width: 35%;
margin-right: 5%;
@@ -89,20 +87,20 @@
}
}
- > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-help {
+ > .oo-ui-fieldLayout-help {
// Override the default
margin-right: 0;
// Move into the space of 'margin-right' of
header
margin-left: -@size-icon;
}
- > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
+ > .oo-ui-fieldLayout-field {
width: 60%;
}
}
}
- &-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header >
.oo-ui-labelElement-label {
+ &-disabled > .oo-ui-fieldLayout-header > .oo-ui-labelElement-label {
color: @color-disabled;
}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 80ad348..1874bb0 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -512,7 +512,7 @@
.oo-ui-fieldLayout {
margin-top: 0;
- .oo-ui-fieldLayout-body {
+ .oo-ui-fieldLayout {
padding: 0.25em 0;
.oo-ui-labelElement-label {
@@ -698,7 +698,7 @@
.oo-ui-fieldLayout {
margin-top: 0;
- .oo-ui-fieldLayout-body {
+ .oo-ui-fieldLayout {
padding: 0.25em 0;
.oo-ui-labelElement-label {
--
To view, visit https://gerrit.wikimedia.org/r/332080
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Icbcc27f63443e0285d86833e2dc98ab213c98111
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
