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
