Bartosz Dziewoński has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/332078 )
Change subject: FieldLayout, FieldsetLayout: Limit width of label+help to 50em
......................................................................
FieldLayout, FieldsetLayout: Limit width of label+help to 50em
* Change the structure to add a $header wrapper around the label
(and help, depending on the alignment).
* Give that wrapper max-width: 50em.
* Update lots of styles to match the new structure.
Change-Id: I3396bc53a7c2f2f5ea98c9a1a511cf14824e2dce
---
M php/layouts/FieldLayout.php
M php/layouts/FieldsetLayout.php
M src/layouts/FieldLayout.js
M src/layouts/FieldsetLayout.js
M src/styles/layouts/FieldLayout.less
M src/styles/layouts/FieldsetLayout.less
M src/themes/apex/layouts.less
M src/themes/mediawiki/layouts.less
8 files changed, 110 insertions(+), 42 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/78/332078/1
diff --git a/php/layouts/FieldLayout.php b/php/layouts/FieldLayout.php
index f22f3d7..c3fdf1e 100644
--- a/php/layouts/FieldLayout.php
+++ b/php/layouts/FieldLayout.php
@@ -52,7 +52,7 @@
*/
protected $help;
- protected $field, $body, $messages;
+ protected $field, $header, $body, $messages;
/**
* @param Widget $fieldWidget Field widget
@@ -91,6 +91,7 @@
$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( [
@@ -112,11 +113,12 @@
$this
->addClasses( [ 'oo-ui-fieldLayout' ] )
->toggleClasses( [ 'oo-ui-fieldLayout-disable' ],
$this->fieldWidget->isDisabled() )
- ->appendContent( $this->help, $this->body );
+ ->appendContent( $this->body );
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
->addClasses( [ 'oo-ui-fieldLayout-field' ] )
@@ -176,10 +178,15 @@
}
// Reorder elements
$this->body->clearContent();
- if ( $value === 'inline' ) {
- $this->body->appendContent( $this->field,
$this->label );
+ if ( $value === 'top' ) {
+ $this->header->appendContent( $this->label,
$this->help );
+ $this->body->appendContent( $this->header,
$this->field );
+ } elseif ( $value === 'inline' ) {
+ $this->header->appendContent( $this->label,
$this->help );
+ $this->body->appendContent( $this->field,
$this->header );
} else {
- $this->body->appendContent( $this->label,
$this->field );
+ $this->header->appendContent( $this->label );
+ $this->body->appendContent( $this->header,
$this->help, $this->field );
}
// Set classes. The following classes can be used here:
// * oo-ui-fieldLayout-align-left
diff --git a/php/layouts/FieldsetLayout.php b/php/layouts/FieldsetLayout.php
index 74182eb..e59ebad 100644
--- a/php/layouts/FieldsetLayout.php
+++ b/php/layouts/FieldsetLayout.php
@@ -16,6 +16,8 @@
public static $tagName = 'fieldset';
+ protected $header;
+
/**
* @param array $config Configuration options
* @param FieldLayout[] $config['items'] Items to add
@@ -31,11 +33,17 @@
] ) );
$this->initializeGroupElement( $config );
+ // Properties
+ $this->header = new Tag( 'div' );
+
// Initialization
+ $this->header
+ ->addClasses( [ 'oo-ui-fieldsetLayout-header' ] )
+ ->appendContent( $this->icon, $this->label );
$this->group->addClasses( [ 'oo-ui-fieldsetLayout-group' ] );
$this
->addClasses( [ 'oo-ui-fieldsetLayout' ] )
- ->prependContent( $this->label, $this->icon,
$this->group );
+ ->prependContent( $this->header, $this->group );
if ( isset( $config['items'] ) ) {
$this->addItems( $config['items'] );
}
diff --git a/src/layouts/FieldLayout.js b/src/layouts/FieldLayout.js
index 0a425d5..e91bd09 100644
--- a/src/layouts/FieldLayout.js
+++ b/src/layouts/FieldLayout.js
@@ -70,6 +70,7 @@
this.notices = [];
this.$field = $( '<div>' );
this.$messages = $( '<ul>' );
+ this.$header = $( '<div>' );
this.$body = $( '<' + ( hasInputWidget ? 'label' : 'div' ) + '>' );
this.align = null;
if ( config.help ) {
@@ -103,8 +104,9 @@
this.$element
.addClass( 'oo-ui-fieldLayout' )
.toggleClass( 'oo-ui-fieldLayout-disabled',
this.fieldWidget.isDisabled() )
- .append( this.$help, this.$body );
+ .append( this.$body );
this.$body.addClass( 'oo-ui-fieldLayout-body' );
+ this.$header.addClass( 'oo-ui-fieldLayout-header' );
this.$messages.addClass( 'oo-ui-fieldLayout-messages' );
this.$field
.addClass( 'oo-ui-fieldLayout-field' )
@@ -190,10 +192,15 @@
value = 'left';
}
// Reorder elements
- if ( value === 'inline' ) {
- this.$body.append( this.$field, this.$label );
+ if ( value === 'top' ) {
+ this.$header.append( this.$label, this.$help );
+ this.$body.append( this.$header, this.$field );
+ } else if ( value === 'inline' ) {
+ this.$header.append( this.$label, this.$help );
+ this.$body.append( this.$field, this.$header );
} else {
- this.$body.append( this.$label, this.$field );
+ this.$header.append( this.$label );
+ this.$body.append( 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/FieldsetLayout.js b/src/layouts/FieldsetLayout.js
index 2974b27..63253cf 100644
--- a/src/layouts/FieldsetLayout.js
+++ b/src/layouts/FieldsetLayout.js
@@ -57,6 +57,8 @@
OO.ui.mixin.LabelElement.call( this, $.extend( {}, config, { $label: $(
'<div>' ) } ) );
OO.ui.mixin.GroupElement.call( this, config );
+ // Properties
+ this.$header = $( '<div>' );
if ( config.help ) {
this.popupButtonWidget = new OO.ui.PopupButtonWidget( {
classes: [ 'oo-ui-fieldsetLayout-help' ],
@@ -79,10 +81,13 @@
}
// Initialization
+ this.$header
+ .addClass( 'oo-ui-fieldsetLayout-header' )
+ .append( this.$icon, this.$label, this.$help );
this.$group.addClass( 'oo-ui-fieldsetLayout-group' );
this.$element
.addClass( 'oo-ui-fieldsetLayout' )
- .prepend( this.$label, this.$help, this.$icon, this.$group );
+ .prepend( this.$header, this.$group );
if ( Array.isArray( config.items ) ) {
this.addItems( config.items );
}
diff --git a/src/styles/layouts/FieldLayout.less
b/src/styles/layouts/FieldLayout.less
index cb066bd..fbdf98a 100644
--- a/src/styles/layouts/FieldLayout.less
+++ b/src/styles/layouts/FieldLayout.less
@@ -16,7 +16,7 @@
&.oo-ui-fieldLayout-align-left,
&.oo-ui-fieldLayout-align-right {
> .oo-ui-fieldLayout-body {
- > .oo-ui-labelElement-label,
+ > .oo-ui-fieldLayout-header,
> .oo-ui-fieldLayout-field {
display: block;
float: left;
@@ -24,25 +24,22 @@
}
}
- &.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body >
.oo-ui-labelElement-label {
+ &.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body >
.oo-ui-fieldLayout-header {
text-align: right;
}
&.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
display: table;
+ width: 100%;
- > .oo-ui-labelElement-label,
+ > .oo-ui-fieldLayout-header,
> .oo-ui-fieldLayout-field {
display: table-cell;
vertical-align: middle;
}
}
- &.oo-ui-labelElement.oo-ui-fieldLayout-align-top >
.oo-ui-fieldLayout-body > .oo-ui-labelElement-label {
- display: inline-block;
- }
-
- > .oo-ui-fieldLayout-help {
+ .oo-ui-fieldLayout-help {
float: right;
> .oo-ui-popupWidget > .oo-ui-popupWidget-popup {
@@ -55,5 +52,13 @@
}
}
+ &.oo-ui-fieldLayout-align-top {
+ .oo-ui-fieldLayout-help {
+ // HACK: The height of this ButtonWidget extends below
the header line (with align: top),
+ // causing the field widget to be narrower than it
should be. 0.3em chosen experimentally.
+ margin-top: -0.3em;
+ }
+ }
+
.theme-oo-ui-fieldLayout();
}
diff --git a/src/styles/layouts/FieldsetLayout.less
b/src/styles/layouts/FieldsetLayout.less
index bf42f1a..b63f700 100644
--- a/src/styles/layouts/FieldsetLayout.less
+++ b/src/styles/layouts/FieldsetLayout.less
@@ -11,12 +11,12 @@
display: table-cell; // Prevent overflowing content in Firefox
(responsive layouts)
}
- &.oo-ui-iconElement > .oo-ui-iconElement-icon {
+ &.oo-ui-iconElement > .oo-ui-fieldsetLayout-header >
.oo-ui-iconElement-icon {
display: block;
position: absolute;
}
- &.oo-ui-labelElement > .oo-ui-labelElement-label {
+ &.oo-ui-labelElement > .oo-ui-fieldsetLayout-header {
color: inherit; // Correct the color inheritance from
`fieldset` elements in IE
display: inline-table; // Correct the text wrapping in Edge and
IE
box-sizing: border-box; // Correct the text wrapping in Edge
and IE
@@ -25,7 +25,7 @@
white-space: normal; // Correct the text wrapping in Edge and IE
float: left; // Prevent positioning problems in Firefox, see
T146462
- &:empty {
+ > .oo-ui-labelElement-label:empty {
display: none;
}
}
@@ -34,7 +34,7 @@
clear: both;
}
- > .oo-ui-fieldsetLayout-help {
+ .oo-ui-fieldsetLayout-help {
float: right;
> .oo-ui-popupWidget > .oo-ui-popupWidget-popup {
diff --git a/src/themes/apex/layouts.less b/src/themes/apex/layouts.less
index adaf8c3..01d4434 100644
--- a/src/themes/apex/layouts.less
+++ b/src/themes/apex/layouts.less
@@ -35,10 +35,14 @@
&.oo-ui-fieldLayout-align-left,
&.oo-ui-fieldLayout-align-right {
- &.oo-ui-labelElement > .oo-ui-fieldLayout-body >
.oo-ui-labelElement-label {
- padding-top: 0.5em;
+ &.oo-ui-labelElement > .oo-ui-fieldLayout-body >
.oo-ui-fieldLayout-header {
margin-right: 5%;
width: 35%;
+
+ > .oo-ui-labelElement-label {
+ display: block;
+ padding-top: 0.5em;
+ }
}
> .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
@@ -48,14 +52,18 @@
&.oo-ui-fieldLayout-align-inline {
margin-bottom: 1.25em;
+ & > .oo-ui-fieldLayout-body {
+ max-width: 50em;
+ }
- &.oo-ui-labelElement > .oo-ui-fieldLayout-body >
.oo-ui-labelElement-label {
+ &.oo-ui-labelElement > .oo-ui-fieldLayout-body >
.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-labelElement-label {
+ &.oo-ui-labelElement > .oo-ui-fieldLayout-body >
.oo-ui-fieldLayout-header {
+ max-width: 50em;
padding: 0.5em 0;
}
}
@@ -65,7 +73,7 @@
margin-top: 0.25em;
}
- &-disabled > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label {
+ &-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header >
.oo-ui-labelElement-label {
color: #ccc;
}
@@ -104,30 +112,34 @@
}
.theme-oo-ui-fieldsetLayout () {
+ .oo-ui-fieldsetLayout-header {
+ width: 50em;
+ }
+ .oo-ui-fieldsetLayout,
+ .oo-ui-formLayout {
margin-top: 2em;
}
- &.oo-ui-labelElement > .oo-ui-labelElement-label {
+ &.oo-ui-labelElement > .oo-ui-fieldsetLayout-header >
.oo-ui-labelElement-label {
+ display: inline-block;
font-size: 1.1em;
margin-bottom: 0.5em;
padding: 0.25em 0;
font-weight: bold;
}
- &.oo-ui-iconElement > .oo-ui-labelElement-label {
+ &.oo-ui-iconElement > .oo-ui-fieldsetLayout-header >
.oo-ui-labelElement-label {
padding-left: 2em;
line-height: 1.8em;
}
- &.oo-ui-iconElement > .oo-ui-iconElement-icon {
+ &.oo-ui-iconElement > .oo-ui-fieldsetLayout-header >
.oo-ui-iconElement-icon {
left: 0;
top: 0.25em;
}
- > .oo-ui-popupButtonWidget {
+ > .oo-ui-fieldsetLayout-header > .oo-ui-popupButtonWidget {
.oo-ui-inline-spacing(0);
}
}
diff --git a/src/themes/mediawiki/layouts.less
b/src/themes/mediawiki/layouts.less
index 8e6b0e8..f0be27e 100644
--- a/src/themes/mediawiki/layouts.less
+++ b/src/themes/mediawiki/layouts.less
@@ -52,22 +52,41 @@
}
&.oo-ui-labelElement {
- & > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label {
+ & > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
padding-bottom: 0.3125em; // equals `4px` at base
`font-size: 12.8px`
- line-height: @line-height-form-element;
+
+ > .oo-ui-labelElement-label {
+ line-height: @line-height-form-element;
+ }
}
- &.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body >
.oo-ui-labelElement-label {
+ &.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body >
.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;
+ }
+ }
+
+ &.oo-ui-fieldLayout-align-top {
+ & > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header
{
+ max-width: 50em;
+ }
+ }
+
&.oo-ui-fieldLayout-align-left,
&.oo-ui-fieldLayout-align-right {
- & > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label
{
+ & > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header
{
width: 35%;
margin-right: 5%;
- padding-top: 0.3125em;
+
+ > .oo-ui-labelElement-label {
+ display: block;
+ padding-top: 0.3125em;
+ }
}
> .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
@@ -76,7 +95,7 @@
}
}
- &-disabled > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label {
+ &-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header >
.oo-ui-labelElement-label {
color: @color-disabled;
}
@@ -115,29 +134,34 @@
}
.theme-oo-ui-fieldsetLayout () {
+ .oo-ui-fieldsetLayout-header {
+ width: 50em;
+ }
+
+ .oo-ui-fieldsetLayout,
+ .oo-ui-formLayout {
margin-top: 2em;
}
- &.oo-ui-labelElement > .oo-ui-labelElement-label {
+ &.oo-ui-labelElement > .oo-ui-fieldsetLayout-header >
.oo-ui-labelElement-label {
+ display: inline-block;
margin-bottom: 0.56818em; // equals `8px` due to `font-size:
1.1em` below
font-size: 1.1em;
font-weight: bold;
line-height: @line-height-form-element;
}
- &.oo-ui-iconElement > .oo-ui-labelElement-label {
+ &.oo-ui-iconElement > .oo-ui-fieldsetLayout-header >
.oo-ui-labelElement-label {
padding-left: 2em;
line-height: 1.8;
}
- &.oo-ui-iconElement > .oo-ui-iconElement-icon {
+ &.oo-ui-iconElement > .oo-ui-fieldsetLayout-header >
.oo-ui-iconElement-icon {
top: 0;
left: 0;
}
- > .oo-ui-popupButtonWidget {
+ > .oo-ui-fieldsetLayout-header > .oo-ui-popupButtonWidget {
.oo-ui-inline-spacing( 0 );
}
}
--
To view, visit https://gerrit.wikimedia.org/r/332078
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I3396bc53a7c2f2f5ea98c9a1a511cf14824e2dce
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
