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.

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.

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

matmarex created this task.Nov 4 2017, 11:21 PM
Restricted Application added a project: Multimedia. · View Herald TranscriptNov 4 2017, 11:21 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
David added a subscriber: David.Nov 5 2017, 2:43 PM
Ramsey-WMF assigned this task to Cparle.Nov 22 2017, 9:12 PM
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.

Ramsey-WMF triaged this task as Medium priority.Nov 22 2017, 9:13 PM

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

Ramsey-WMF moved this task from Triaged to Next up on the Multimedia board.Nov 24 2017, 8:33 PM

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

@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

No problem with accessing $menu.

This comment was removed by santhosh.

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

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

ABorbaWMF closed this task as Resolved.Jan 12 2018, 12:48 AM
ABorbaWMF added a subscriber: ABorbaWMF.

Looks good on Beta