Bartosz Dziewoński has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/394765 )
Change subject: FieldLayout: Improve alignment of multiline labels with 'help'
button
......................................................................
FieldLayout: Improve alignment of multiline labels with 'help' button
The 'help' button is floated, so moving it before the label in the DOM
allows it to align with the top of the label, rather than the bottom.
This only makes a difference when the label has multiple lines of text.
Bug: T181430
Change-Id: Ic6044760e4a4a8ae41e491855f81061f46b74a0c
---
M demos/pages/widgets.js
M php/layouts/FieldLayout.php
M src/layouts/FieldLayout.js
M src/themes/wikimediaui/layouts.less
4 files changed, 9 insertions(+), 8 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/65/394765/1
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index 713f536..8fa7587 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -2562,6 +2562,7 @@
new OO.ui.TextInputWidget(),
{
label: 'FieldLayout aligned top
with very long label. ' + loremIpsum,
+ help: loremIpsum,
align: 'top'
}
),
@@ -2569,6 +2570,7 @@
new OO.ui.CheckboxInputWidget( {
selected: true } ),
{
label: 'FieldLayout aligned
inline with very long label. ' + loremIpsum,
+ help: loremIpsum,
align: 'inline'
}
),
@@ -2576,6 +2578,7 @@
new OO.ui.TextInputWidget(),
{
label: 'FieldLayout aligned
left with very long label. ' + loremIpsum,
+ help: loremIpsum,
align: 'left'
}
),
@@ -2583,6 +2586,7 @@
new OO.ui.TextInputWidget(),
{
label: 'FieldLayout aligned
right with very long label. ' + loremIpsum,
+ help: loremIpsum,
align: 'right'
}
),
diff --git a/php/layouts/FieldLayout.php b/php/layouts/FieldLayout.php
index e070605..a1aad28 100644
--- a/php/layouts/FieldLayout.php
+++ b/php/layouts/FieldLayout.php
@@ -201,10 +201,10 @@
// Reorder elements
$this->body->clearContent();
if ( $value === 'top' ) {
- $this->header->appendContent( $this->label,
$this->help );
+ $this->header->appendContent( $this->help,
$this->label );
$this->body->appendContent( $this->header,
$this->field );
} elseif ( $value === 'inline' ) {
- $this->header->appendContent( $this->label,
$this->help );
+ $this->header->appendContent( $this->help,
$this->label );
$this->body->appendContent( $this->field,
$this->header );
} else {
$this->header->appendContent( $this->label );
diff --git a/src/layouts/FieldLayout.js b/src/layouts/FieldLayout.js
index 72b5161..502416f 100644
--- a/src/layouts/FieldLayout.js
+++ b/src/layouts/FieldLayout.js
@@ -216,10 +216,10 @@
}
// Reorder elements
if ( value === 'top' ) {
- this.$header.append( this.$label, this.$help );
+ this.$header.append( this.$help, this.$label );
this.$body.append( this.$header, this.$field );
} else if ( value === 'inline' ) {
- this.$header.append( this.$label, this.$help );
+ this.$header.append( this.$help, this.$label );
this.$body.append( this.$field, this.$header );
} else {
this.$header.append( this.$label );
diff --git a/src/themes/wikimediaui/layouts.less
b/src/themes/wikimediaui/layouts.less
index 8a4f8a2..2155be1 100644
--- a/src/themes/wikimediaui/layouts.less
+++ b/src/themes/wikimediaui/layouts.less
@@ -120,10 +120,7 @@
// HACK: This PopupButtonWidget's height extends below
the header line (with align: top),
// causing the field widget to be narrower than it
should be.
margin-top: @margin-top-fieldlayout-help;
-
- &:last-child {
- margin-right: -@padding-horizontal-frameless;
- }
+ margin-right: -@padding-horizontal-frameless;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/394765
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic6044760e4a4a8ae41e491855f81061f46b74a0c
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
