Page MenuHomePhabricator

Add gravity option to OO.ui.PopupWidget
Closed, ResolvedPublic

Description

I tried to update a gadget of mine from jquery.ui to oojs.ui. The PopupWidget seems like a candiate to replace tipsy, but I can't find a way to set the anchor on the left side of the popup (pointing to the left), like I can with tipsy by setting gravity: 'w'

The gravity option is needed because the popover is shown upon hovering a (vertical) list of elements, and you should be able to hover up and down over the list elements without the popover stealing focus all the time, which it does when it's situated below, not to the right.

Event Timeline

Danmichaelo raised the priority of this task from to Needs Triage.
Danmichaelo updated the task description. (Show Details)
Danmichaelo added a project: OOUI.
Danmichaelo subscribed.

a gadget of mine

So why does it block "all Wikimedia-deployed extensions and core"?

So why does it block "all Wikimedia-deployed extensions and core"?

Sorry, I've removed that. I initially read it as just "Replace use of jQuery UI and MW UI with OOjs UI across all Wikimedia".

Jdforrester-WMF set Security to None.

Change 338272 had a related patch set uploaded (by Catrope):
FloatableElement: Support positioning relative to all edges

https://gerrit.wikimedia.org/r/338272

I>>! In T114612#3034740, @gerritbot wrote:

Change 338272 had a related patch set uploaded (by Catrope):
FloatableElement: Support positioning relative to all edges

https://gerrit.wikimedia.org/r/338272

This allows you to pass config options like { verticalPosition: 'center', horizontalPosition: 'before' } to a PopupWidget which will make it stick to the left (or right, in RTL) edge of the reference element. What this patch doesn't do yet, though, is changing the anchor to point in the right direction, I'll work on that next.

Change 338629 had a related patch set uploaded (by Catrope):
PopupWidget: Make popups able to actually pop *up*, as well as sideways

https://gerrit.wikimedia.org/r/338629

Change 338272 merged by jenkins-bot:
FloatableElement: Support positioning relative to all edges

https://gerrit.wikimedia.org/r/338272

Change 338629 merged by jenkins-bot:
[oojs/ui] PopupWidget: Make popups able to actually pop *up*, as well as sideways

https://gerrit.wikimedia.org/r/338629

Starting with OOjs UI v0.19.5 (to be released this Tuesday, and to reach Wikimedia sites next week), the following 12 popup positioning options are available:

pasted_file (682×1 px, 115 KB)

(screenshot slightly doctored from the "PopupButtonWidget test" dialogs demo)

For example, to create a button which, when clicked, displays a popup centered below (this is also the default):

var popupButton = new OO.ui.PopupButtonWidget( {
    label: 'Button',
    popup: {
        $content: $( '<p>' ).text( 'Popup contents go here.' ),
        padded: true,
        position: 'below',
        align: 'center'
    }
} );
$( 'body' ).append( popupButton.$element );

pasted_file (104×344 px, 3 KB)

Note that the before/after and backwards/forwards are automatically flipped on sites using right-to-left languages.

Volker_E edited projects, added OOUI (OOjs-UI-0.19.5); removed OOUI.