jenkins-bot has submitted this change and it was merged. ( https://gerrit.wikimedia.org/r/330462 )
Change subject: PopupButtonWidget: Add $overlay config option ...................................................................... PopupButtonWidget: Add $overlay config option Code in PopupButtonWidget / PopupWidget based on DropdownWidget / FloatingMenuSelectWidget. Bug: T146531 Change-Id: Ibab4be23b20edef23686e4563db2acc0d69f52b6 --- M build/modules.yaml M demos/pages/dialogs.js M src/themes/apex/widgets.less M src/themes/mediawiki/widgets.less M src/widgets/PopupButtonWidget.js M src/widgets/PopupWidget.js 6 files changed, 56 insertions(+), 14 deletions(-) Approvals: Catrope: Looks good to me, approved jenkins-bot: Verified Jforrester: Looks good to me, but someone else must approve diff --git a/build/modules.yaml b/build/modules.yaml index 70381b1..df434bc 100644 --- a/build/modules.yaml +++ b/build/modules.yaml @@ -37,8 +37,10 @@ # The JavaScript-specific dependencies of the basic widgets. It's sad how many there are :( # TextInputWidget "src/mixins/PendingElement.js", - # FieldLayout, FieldsetLayout + # ComboBoxInputWidget, DropdownWidget, PopupWidget + "src/mixins/FloatableElement.js", "src/mixins/ClippableElement.js", + # FieldLayout, FieldsetLayout "src/widgets/PopupWidget.js", "src/mixins/PopupElement.js", "src/widgets/PopupButtonWidget.js", @@ -62,7 +64,6 @@ "src/widgets/CheckboxMultioptionWidget.js", "src/widgets/CheckboxMultiselectWidget.js", # ComboBoxInputWidget - "src/mixins/FloatableElement.js", "src/widgets/FloatingMenuSelectWidget.js", # ProgressBarWidget "src/widgets/ProgressBarWidget.js", diff --git a/demos/pages/dialogs.js b/demos/pages/dialogs.js index ef5c62d..e6108ff 100644 --- a/demos/pages/dialogs.js +++ b/demos/pages/dialogs.js @@ -632,6 +632,28 @@ items: this.makeItems() } ), $spacer.clone() ] } ), + new SamplePage( 'popupbutton', { + label: 'PopupButtonWidget', + content: [ $spacer.clone(), new OO.ui.PopupButtonWidget( { + $overlay: this.$overlay, + label: 'Popup button', + popup: { + padded: true, + $content: $( '<p>' ).text( 'Popup contents.' ) + } + } ), $spacer.clone() ] + } ), + new SamplePage( 'popupbutton2', { + label: 'PopupButtonWidget', + icon: 'alert', + content: [ $spacer.clone(), new OO.ui.PopupButtonWidget( { + label: 'Popup button', + popup: { + padded: true, + $content: $( '<p>' ).text( 'Popup contents.' ) + } + } ), $spacer.clone() ] + } ), new SamplePage( 'capsule', { label: 'CapsuleMultiselectWidget', content: [ $spacer.clone(), new OO.ui.CapsuleMultiselectWidget( { @@ -652,7 +674,7 @@ } ) ]; this.bookletLayout.on( 'set', function ( page ) { - page.$element[ 0 ].scrollTop = 300; + page.$element[ 0 ].scrollTop = 325; } ); this.bookletLayout.addPages( this.pages ); this.$body.append( this.bookletLayout.$element ); diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less index f076a7a..9498355 100644 --- a/src/themes/apex/widgets.less +++ b/src/themes/apex/widgets.less @@ -63,17 +63,17 @@ } .theme-oo-ui-popupButtonWidget () { - &.oo-ui-buttonElement-frameless > .oo-ui-popupWidget { + .oo-ui-popupWidget&-frameless-popup { // Compensate for icon being inset /* @noflip */ - left: @size-icon / 2; + margin-left: @size-icon / 2; } - &.oo-ui-buttonElement-framed > .oo-ui-popupWidget { + .oo-ui-popupWidget&-framed-popup { // Compensate for icon being inset // Button has padding-left: 0.8em;, icon has margin-left: -0.5em; /* @noflip */ - left: @size-icon / 2 + 0.8em - 0.5em; + margin-left: @size-icon / 2 + 0.8em - 0.5em; } } diff --git a/src/themes/mediawiki/widgets.less b/src/themes/mediawiki/widgets.less index 534283f..6cfb94d 100644 --- a/src/themes/mediawiki/widgets.less +++ b/src/themes/mediawiki/widgets.less @@ -85,18 +85,18 @@ .theme-oo-ui-actionWidget () {} .theme-oo-ui-popupButtonWidget () { - &.oo-ui-buttonElement-frameless > .oo-ui-popupWidget { + .oo-ui-popupWidget&-frameless-popup { // Compensate for icon being inset /* @noflip */ - left: @size-icon / 2; + margin-left: @size-icon / 2; } - &.oo-ui-buttonElement-framed > .oo-ui-popupWidget { + .oo-ui-popupWidget&-framed-popup { // Compensate for icon being inset // elements.less positions the icon with left: 1.5em - @size-icon / 2; , so we need: // @size-icon / 2 + ( 1.5em - @size-icon / 2 ) which is 1.5em. /* @noflip */ - left: 1.5em; + margin-left: 1.5em; } } diff --git a/src/widgets/PopupButtonWidget.js b/src/widgets/PopupButtonWidget.js index 0c0e08b..a272a1b 100644 --- a/src/widgets/PopupButtonWidget.js +++ b/src/widgets/PopupButtonWidget.js @@ -22,13 +22,23 @@ * * @constructor * @param {Object} [config] Configuration options + * @cfg {jQuery} [$overlay] Render the popup into a separate layer. This configuration is useful in cases where + * the expanded popup is larger than its containing `<div>`. The specified overlay layer is usually on top of the + * containing `<div>` and has a larger area. By default, the popup uses relative positioning. */ OO.ui.PopupButtonWidget = function OoUiPopupButtonWidget( config ) { // Parent constructor OO.ui.PopupButtonWidget.parent.call( this, config ); // Mixin constructors - OO.ui.mixin.PopupElement.call( this, config ); + OO.ui.mixin.PopupElement.call( this, $.extend( true, {}, config, { + popup: { + $floatableContainer: this.$element + } + } ) ); + + // Properties + this.$overlay = config.$overlay || this.$element; // Events this.connect( this, { click: 'onAction' } ); @@ -36,8 +46,12 @@ // Initialization this.$element .addClass( 'oo-ui-popupButtonWidget' ) - .attr( 'aria-haspopup', 'true' ) - .append( this.popup.$element ); + .attr( 'aria-haspopup', 'true' ); + this.popup.$element + .addClass( 'oo-ui-popupButtonWidget-popup' ) + .toggleClass( 'oo-ui-popupButtonWidget-framed-popup', this.isFramed() ) + .toggleClass( 'oo-ui-popupButtonWidget-frameless-popup', !this.isFramed() ); + this.$overlay.append( this.popup.$element ); }; /* Setup */ diff --git a/src/widgets/PopupWidget.js b/src/widgets/PopupWidget.js index d0c28f5..5aa33b4 100644 --- a/src/widgets/PopupWidget.js +++ b/src/widgets/PopupWidget.js @@ -21,6 +21,7 @@ * @extends OO.ui.Widget * @mixins OO.ui.mixin.LabelElement * @mixins OO.ui.mixin.ClippableElement + * @mixins OO.ui.mixin.FloatableElement * * @constructor * @param {Object} [config] Configuration options @@ -66,6 +67,7 @@ $clippable: this.$body, $clippableContainer: this.$popup } ) ); + OO.ui.mixin.FloatableElement.call( this, config ); // Properties this.$anchor = $( '<div>' ); @@ -130,6 +132,7 @@ OO.inheritClass( OO.ui.PopupWidget, OO.ui.Widget ); OO.mixinClass( OO.ui.PopupWidget, OO.ui.mixin.LabelElement ); OO.mixinClass( OO.ui.PopupWidget, OO.ui.mixin.ClippableElement ); +OO.mixinClass( OO.ui.PopupWidget, OO.ui.mixin.FloatableElement ); /* Methods */ @@ -253,6 +256,8 @@ OO.ui.PopupWidget.parent.prototype.toggle.call( this, show ); if ( change ) { + this.togglePositioning( show && this.$floatableContainer ); + if ( show ) { if ( this.autoClose ) { this.bindMouseDownListener(); -- To view, visit https://gerrit.wikimedia.org/r/330462 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: Ibab4be23b20edef23686e4563db2acc0d69f52b6 Gerrit-PatchSet: 3 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com> Gerrit-Reviewer: Anomie <bjor...@wikimedia.org> Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com> Gerrit-Reviewer: Catrope <r...@wikimedia.org> Gerrit-Reviewer: Esanders <esand...@wikimedia.org> Gerrit-Reviewer: Gergő Tisza <gti...@wikimedia.org> Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org> Gerrit-Reviewer: Prtksxna <psax...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits