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
