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 <matma....@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits