jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/355823 )
Change subject: PopupWidget: Sensibly position anchor-less popups
......................................................................
PopupWidget: Sensibly position anchor-less popups
Don't adjust the position for the anchor that isn't there.
Also make backwards-aligned above/below-positioned popups
with no anchor align slightly differently. When anchored,
backwards popups move as far to the start edge as possible
while still keeping the anchor (which points to the center
of the reference element) inside the popup. When unanchored,
backwards popups now align their end edge with the reference
element's end edge.
Bug: T159906
Change-Id: I14c65f115c704114ba2387d6a89ed7aed44f8238
---
M demos/pages/widgets.js
M src/widgets/PopupWidget.js
2 files changed, 63 insertions(+), 23 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, approved
jenkins-bot: Verified
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index c185350..9aaa7a0 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -2226,11 +2226,44 @@
popup: {
$content: $( '<p>'
).text( loremIpsum ),
padded: true,
- anchor: false
+ anchor: false,
+ align: 'center'
}
} ),
{
- label: 'PopupButtonWidget (no
anchor)\u200E',
+ label: 'PopupButtonWidget (no
anchor, align: center)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.PopupButtonWidget( {
+ icon: 'menu',
+ label: 'Options',
+ popup: {
+ $content: $( '<p>'
).text( loremIpsum ),
+ padded: true,
+ anchor: false,
+ align: 'forwards'
+ }
+ } ),
+ {
+ label: 'PopupButtonWidget (no
anchor, align: forwards)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.PopupButtonWidget( {
+ icon: 'menu',
+ label: 'Options',
+ popup: {
+ $content: $( '<p>'
).text( loremIpsum ),
+ padded: true,
+ anchor: false,
+ align: 'backwards'
+ }
+ } ),
+ {
+ label: 'PopupButtonWidget (no
anchor, align: backwards)\u200E',
align: 'top'
}
),
diff --git a/src/widgets/PopupWidget.js b/src/widgets/PopupWidget.js
index e5f8abe..c9f2658 100644
--- a/src/widgets/PopupWidget.js
+++ b/src/widgets/PopupWidget.js
@@ -417,7 +417,7 @@
hPosMap = {
forwards: 'start',
center: 'center',
- backwards: 'before'
+ backwards: this.anchored ? 'before' : 'end'
},
vPosMap = {
forwards: 'top',
@@ -474,22 +474,26 @@
popupPos[ near ] = popupPos[ far ] - popupSize;
}
- // Position the anchor (which is positioned relative to the popup) to
point to $floatableContainer
- anchorPos = ( floatablePos[ start ] + floatablePos[ end ] ) / 2;
- anchorOffset = ( start === far ? -1 : 1 ) * ( anchorPos - popupPos[
start ] );
+ if ( this.anchored ) {
+ // Position the anchor (which is positioned relative to the
popup) to point to $floatableContainer
+ anchorPos = ( floatablePos[ start ] + floatablePos[ end ] ) / 2;
+ anchorOffset = ( start === far ? -1 : 1 ) * ( anchorPos -
popupPos[ start ] );
- // If the anchor is less than 2*anchorSize from either edge, move the
popup to make more space
- // this.$anchor.width()/height() returns 0 because of the CSS trickery
we use, so use scrollWidth/Height
- anchorSize = this.$anchor[ 0 ][ 'scroll' + sizeProp ];
- anchorMargin = parseFloat( this.$anchor.css( 'margin-' + start ) );
- if ( anchorOffset + anchorMargin < 2 * anchorSize ) {
- // Not enough space for the anchor on the start side; pull the
popup startwards
- positionAdjustment = ( positionProp === start ? -1 : 1 ) *
- ( 2 * anchorSize - ( anchorOffset + anchorMargin ) );
- } else if ( anchorOffset + anchorMargin > popupSize - 2 * anchorSize ) {
- // Not enough space for the anchor on the end side; pull the
popup endwards
- positionAdjustment = ( positionProp === end ? -1 : 1 ) *
- ( anchorOffset + anchorMargin - ( popupSize - 2 *
anchorSize ) );
+ // If the anchor is less than 2*anchorSize from either edge,
move the popup to make more space
+ // this.$anchor.width()/height() returns 0 because of the CSS
trickery we use, so use scrollWidth/Height
+ anchorSize = this.$anchor[ 0 ][ 'scroll' + sizeProp ];
+ anchorMargin = parseFloat( this.$anchor.css( 'margin-' + start
) );
+ if ( anchorOffset + anchorMargin < 2 * anchorSize ) {
+ // Not enough space for the anchor on the start side;
pull the popup startwards
+ positionAdjustment = ( positionProp === start ? -1 : 1
) *
+ ( 2 * anchorSize - ( anchorOffset +
anchorMargin ) );
+ } else if ( anchorOffset + anchorMargin > popupSize - 2 *
anchorSize ) {
+ // Not enough space for the anchor on the end side;
pull the popup endwards
+ positionAdjustment = ( positionProp === end ? -1 : 1 ) *
+ ( anchorOffset + anchorMargin - ( popupSize - 2
* anchorSize ) );
+ } else {
+ positionAdjustment = 0;
+ }
} else {
positionAdjustment = 0;
}
@@ -510,12 +514,15 @@
( popupPos[ far ] - ( containerPos[ far ] -
this.containerPadding ) );
}
- // Adjust anchorOffset for positionAdjustment
- anchorOffset += ( positionProp === start ? -1 : 1 ) *
positionAdjustment;
+ if ( this.anchored ) {
+ // Adjust anchorOffset for positionAdjustment
+ anchorOffset += ( positionProp === start ? -1 : 1 ) *
positionAdjustment;
- // Position the anchor
- anchorCss[ start ] = anchorOffset;
- this.$anchor.css( anchorCss );
+ // Position the anchor
+ anchorCss[ start ] = anchorOffset;
+ this.$anchor.css( anchorCss );
+ }
+
// Move the popup if needed
parentPosition[ positionProp ] += positionAdjustment;
--
To view, visit https://gerrit.wikimedia.org/r/355823
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I14c65f115c704114ba2387d6a89ed7aed44f8238
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Catrope <r...@wikimedia.org>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
