Page MenuHomePhabricator

ULS language selection dropdown partially offscreen when page is in RTL language
Closed, ResolvedPublic

Description

The new ULS-based language selection dropdown is shown partially offscreen when page is in RTL language.

image.png (980×1 px, 101 KB)

To reproduce:

  1. Visit https://commons.wikimedia.org/wiki/Special:UploadWizard?uselang=ar
  2. Work through the form to the last stage ("Describe")
  3. Click the dropdown with a language name on it

For comparison, this is how it looks like in LTR.

image.png (980×1 px, 116 KB)

Looks like the logic for displaying the popup does not flip it for RTL (it is aligned to the left edge of the dropdown, rather than the "start" edge).

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Ramsey-WMF moved this task from Untriaged to Triaged on the Multimedia board.
Ramsey-WMF added subscribers: Cparle, Ramsey-WMF.

@Cparle , if you have a moment, looks like this *might be* an easy one.

Change 393098 had a related patch set uploaded (by Cparle; owner: Cparle):
[mediawiki/extensions/UploadWizard@master] Position ULS correctly for rtl languages

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

Change 393201 had a related patch set uploaded (by Cparle; owner: Cparle):
[mediawiki/extensions/UniversalLanguageSelector@master] Add a proxy method for css() on the jquery $menu

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

Change 393201 abandoned by Cparle:
Add a proxy method for css() on the jquery $menu

Reason:
See https://github.com/wikimedia/jquery.uls/pull/277 instead

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

@Cparle You can use the onVisible callback for adjusting any property of the ULS menu. See https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/master/resources/js/ext.uls.compactlinks.js#L143 for an example. You may want to do this in your uw.UlsWidget.js

You can see this flipping of ULS by clicking the button in interlanguage link of ar.wiki and en.wiki

image.png (443×708 px, 49 KB)

@santhosh - that's exactly what I am doing in this patch https://gerrit.wikimedia.org/r/#/c/393098/ :)

The github patch I added is a method to allow me to query the ULS object about its css properties so that I don't have to access undocumented member variables

@santhosh - that's exactly what I am doing in this patch https://gerrit.wikimedia.org/r/#/c/393098/ :)

Thanks, I did not see this patch before commenting. I can understand your reasoning about accessing member variables.

In fact, ULS has MW specific customizations in various extensions, and MW ULS extensions. Some of those customizations are on CSS like you needed. Some of them are on the interface messages. Some of them are about changing the window behavior. So adding an accessor method of jQuery menu object alone does not solve the problem of accessing the member variables. For other use cases, you will need the localization handler, for some others you need to access the width, height calculation utilities. This is the reason for a single onVisible method that provide access to ULS objects for extensive customization.

So I am not convinced that we need to provide access to css of $menu alone with a new proxy method. @Nikerabbit thoughts?

Yeah wouldn't generic access to the jquery/dom element suffice?

@santhosh in the code you've linked the ULS's $menu member is accessed from the definition of CompactInterlanguageList.prototype.createSelector. I added the proxy method because I wanted to avoid accessing that member from my UploadWizard code. I'm happy to access $menu directly instead if you and @Nikerabbit think it's ok to do so

Change 393098 merged by jenkins-bot:
[mediawiki/extensions/UploadWizard@master] Position ULS correctly for rtl languages

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

ABorbaWMF subscribed.

Looks good on Beta

Screen Shot 2018-01-11 at 4.47.36 PM.png (1×2 px, 1 MB)