jenkins-bot has submitted this change and it was merged.
Change subject: Give menus of lookup widgets correct width and text size
......................................................................
Give menus of lookup widgets correct width and text size
Problems:
* The width being set in OO.ui.TextInputMenuWidget was being overridden
in OO.ui.ClippableElement
* The menu was being added to the body instead of the overlay div when
inside an OO.ui.Window
Solutions:
* Add ideal size information to OO.ui.ClippableElement rather than
hardcoding fallbacks for width and height as attribute removals
* Default $overlay to .oo-ui-window-overlay if present, ensuring correct
placement in OO.ui.Window without changing default placement in other
cases
Change-Id: I16638f40f287e02fb1f59e262635419819eb517c
---
M src/elements/OO.ui.ClippableElement.js
M src/widgets/OO.ui.LookupInputWidget.js
M src/widgets/OO.ui.TextInputMenuWidget.js
3 files changed, 22 insertions(+), 6 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/elements/OO.ui.ClippableElement.js
b/src/elements/OO.ui.ClippableElement.js
index 1295aaa..aa29967 100644
--- a/src/elements/OO.ui.ClippableElement.js
+++ b/src/elements/OO.ui.ClippableElement.js
@@ -15,6 +15,8 @@
this.$clippableContainer = null;
this.$clippableScroller = null;
this.$clippableWindow = null;
+ this.idealWidth = null;
+ this.idealHeight = null;
this.onClippableContainerScrollHandler = OO.ui.bind( this.clip, this );
this.onClippableWindowResizeHandler = OO.ui.bind( this.clip, this );
@@ -81,6 +83,18 @@
};
/**
+ * Set the ideal size.
+ *
+ * @method
+ * @param {number|string} [width] Width as a number of pixels or CSS string
with unit suffix
+ * @param {number|string} [height] Height as a number of pixels or CSS string
with unit suffix
+ */
+OO.ui.ClippableElement.prototype.setIdealSize = function ( width, height ) {
+ this.idealWidth = width;
+ this.idealHeight = height;
+};
+
+/**
* Clip element to visible boundaries and allow scrolling when needed.
*
* Element will be clipped the bottom or right of the element is within 10px
of the edge of, or
@@ -112,12 +126,12 @@
if ( clipWidth ) {
this.$clippable.css( { 'overflow-x': 'auto', 'width':
desiredWidth } );
} else {
- this.$clippable.css( { 'overflow-x': '', 'width': '' } );
+ this.$clippable.css( { 'overflow-x': '', 'width':
this.idealWidth || '' } );
}
if ( clipHeight ) {
this.$clippable.css( { 'overflow-y': 'auto', 'height':
desiredHeight } );
} else {
- this.$clippable.css( { 'overflow-y': '', 'height': '' } );
+ this.$clippable.css( { 'overflow-y': '', 'height':
this.idealHeight || '' } );
}
this.clipped = clipWidth || clipHeight;
diff --git a/src/widgets/OO.ui.LookupInputWidget.js
b/src/widgets/OO.ui.LookupInputWidget.js
index 84cd616..d77deb8 100644
--- a/src/widgets/OO.ui.LookupInputWidget.js
+++ b/src/widgets/OO.ui.LookupInputWidget.js
@@ -18,7 +18,7 @@
// Properties
this.lookupInput = input;
- this.$overlay = config.$overlay || this.$( 'body' );
+ this.$overlay = config.$overlay || this.$( 'body,.oo-ui-window-overlay'
).last();
this.lookupMenu = new OO.ui.TextInputMenuWidget( this, {
'$': OO.ui.Element.getJQuery( this.$overlay ),
'input': this.lookupInput,
diff --git a/src/widgets/OO.ui.TextInputMenuWidget.js
b/src/widgets/OO.ui.TextInputMenuWidget.js
index 1cc4ab6..ddec0fa 100644
--- a/src/widgets/OO.ui.TextInputMenuWidget.js
+++ b/src/widgets/OO.ui.TextInputMenuWidget.js
@@ -45,10 +45,11 @@
* @chainable
*/
OO.ui.TextInputMenuWidget.prototype.show = function () {
+ this.position();
+
// Parent method
OO.ui.MenuWidget.prototype.show.call( this );
- this.position();
this.$( this.getElementWindow() ).on( 'resize',
this.onWindowResizeHandler );
return this;
};
@@ -80,7 +81,6 @@
// Position under input
dimensions.top += $container.height();
- dimensions.width = $container.width();
// Compensate for frame position if in a differnt frame
if ( this.input.$.frame && this.input.$.context !==
this.$element[0].ownerDocument ) {
@@ -92,12 +92,14 @@
} else {
// Fix for RTL (for some reason, no need to fix if the
frameoffset is set)
if ( this.$element.css( 'direction' ) === 'rtl' ) {
- dimensions.right =
this.$element.parent().position().left - dimensions.width - dimensions.left;
+ dimensions.right =
this.$element.parent().position().left -
+ dimensions.width - dimensions.left;
// Erase the value for 'left':
delete dimensions.left;
}
}
this.$element.css( dimensions );
+ this.setIdealSize( $container.width() );
return this;
};
--
To view, visit https://gerrit.wikimedia.org/r/111339
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I16638f40f287e02fb1f59e262635419819eb517c
Gerrit-PatchSet: 3
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
