[MediaWiki-commits] [Gerrit] oojs/ui[master]: PopupWidget: Sensibly position anchor-less popups
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: $( ''
).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: $( ''
).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: $( ''
).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 ) {
+
[MediaWiki-commits] [Gerrit] oojs/ui[master]: PopupWidget: Sensibly position anchor-less popups
Catrope has uploaded a new change for review. (
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(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/23/355823/1
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: $( ''
).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: $( ''
).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: $( ''
).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 ) {
+ //
