Mooeypoo has uploaded a new change for review. https://gerrit.wikimedia.org/r/187447
Change subject: Add help icon for FieldsetLayout ...................................................................... Add help icon for FieldsetLayout The help icon/popup was added to FieldLayout, but sometimes we may need a help popup for the entire field group through FieldsetLayout. Bug: T75731 Change-Id: If9ef783ba808e163efe9f942ead168fb9c5e4fb1 --- M demos/pages/widgets.js M src/layouts/FieldsetLayout.js M src/styles/layouts/FieldsetLayout.less 3 files changed, 37 insertions(+), 2 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/47/187447/1 diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js index 29f6403..c8be243 100644 --- a/demos/pages/widgets.js +++ b/demos/pages/widgets.js @@ -1070,7 +1070,11 @@ ); } ); - fieldset = new OO.ui.FieldsetLayout( { label: 'Widgets' } ); + fieldset = new OO.ui.FieldsetLayout( { + label: 'Widgets', + help: 'I am an additional, helpful information. Lorem ipsum dolor sit amet, cibo definiebas pri ' + + 'in, duo ex inimicus perpetua complectitur, mel periculis similique at.\u200E' + } ); fieldset.addItems( fieldLayouts ); $demo.append( $( '<div class="oo-ui-demo-container">' ).append( fieldset.$element ) ); }; diff --git a/src/layouts/FieldsetLayout.js b/src/layouts/FieldsetLayout.js index 2026f0f..68a1477 100644 --- a/src/layouts/FieldsetLayout.js +++ b/src/layouts/FieldsetLayout.js @@ -25,10 +25,28 @@ OO.ui.LabelElement.call( this, config ); OO.ui.GroupElement.call( this, config ); + if ( config.help ) { + this.popupButtonWidget = new OO.ui.PopupButtonWidget( { + $: this.$, + classes: [ 'oo-ui-fieldsetLayout-help' ], + framed: false, + icon: 'info' + } ); + + this.popupButtonWidget.getPopup().$body.append( + this.$( '<div>' ) + .text( config.help ) + .addClass( 'oo-ui-fieldsetLayout-help-content' ) + ); + this.$help = this.popupButtonWidget.$element; + } else { + this.$help = this.$( [] ); + } + // Initialization this.$element .addClass( 'oo-ui-fieldsetLayout' ) - .prepend( this.$icon, this.$label, this.$group ); + .prepend( this.$help, this.$icon, this.$label, this.$group ); if ( $.isArray( config.items ) ) { this.addItems( config.items ); } diff --git a/src/styles/layouts/FieldsetLayout.less b/src/styles/layouts/FieldsetLayout.less index aee7216..726b931 100644 --- a/src/styles/layouts/FieldsetLayout.less +++ b/src/styles/layouts/FieldsetLayout.less @@ -14,5 +14,18 @@ display: inline-block; } + > .oo-ui-fieldsetLayout-help { + float: right; + + > .oo-ui-popupWidget > .oo-ui-popupWidget-popup { + z-index: 1; + } + + .oo-ui-fieldsetLayout-help-content { + padding: 0.5em 0.75em; + line-height: 1.5em; + } + } + .theme-oo-ui-fieldsetLayout(); } -- To view, visit https://gerrit.wikimedia.org/r/187447 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: If9ef783ba808e163efe9f942ead168fb9c5e4fb1 Gerrit-PatchSet: 1 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: Mooeypoo <mor...@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits