Page MenuHomePhabricator

Position language menu below language button
Closed, ResolvedPublic

Description

Description

Currently the language menu is positioned to the left of the language button. It should be positioned below, and right-aligned with, the language button:

currentideal
Screen Shot 2021-03-02 at 1.35.19 PM.png (652×1 px, 191 KB)
Screen Shot 2021-03-02 at 1.35.52 PM.png (650×1 px, 196 KB)

Designs

Here is how the various sizes of the menu would look with the new positioning:

4 columns2 columns1 column
Screen Shot 2021-03-02 at 1.54.59 PM.png (606×1 px, 183 KB)
Screen Shot 2021-03-02 at 1.55.35 PM.png (615×1 px, 152 KB)
Screen Shot 2021-03-02 at 1.56.38 PM.png (616×1 px, 207 KB)

QA Results - Beta

ACStatusDetails
1T276248#7042697
2T276248#7042697

QA Results - Prod

ACStatusDetails
1T276248#7068223
2T276248#7068223

Event Timeline

Jdlrobson added a subscriber: santhosh.

@santhosh I notice on Wikimedia Commons the ULS dialog appears below the button. Is this something that can be configured in ULS?

@ovasileva let's add this to our next sync with the language team.

ovasileva triaged this task as Medium priority.Mar 3 2021, 8:47 AM

Change 672738 had a related patch set uploaded (by Nikerabbit; owner: Nikerabbit):
[mediawiki/extensions/UniversalLanguageSelector@master] Change ULS content language selector positioning

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

Change 672738 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Change ULS content language selector positioning

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

Change 672979 had a related patch set uploaded (by Nikerabbit; owner: Nikerabbit):
[mediawiki/extensions/UniversalLanguageSelector@master] Improve positioning for content language selector on narrow screens

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

Change 672979 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Improve positioning for content language selector on narrow screens

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

During demo to Language team I noticed the positioning of input/display settings may go off-screen when opened from the new button. I'll see if I can fix that easily.

And another issue is that on narrow screens the dialog changes width shortly after it is shown. This is because the input/display settings are loaded asynchronously and once they inject their own buttons, the dialog becomes wider to accommodate them. There is a trade off here on avoiding the flash, or delaying its appearance under those modules are loaded. I guess maybe some trickery we could fix the width in a way that it doesn't change, but I don't have good ideas for that.

Change 673848 had a related patch set uploaded (by Nikerabbit; owner: Nikerabbit):
[mediawiki/extensions/UniversalLanguageSelector@master] Avoid content language selector dialog resize shortly after opening

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

Change 673959 had a related patch set uploaded (by Nikerabbit; owner: Nikerabbit):
[mediawiki/extensions/UniversalLanguageSelector@master] Fix positioning of input/display settings for new language selector

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

Change 673959 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Fix positioning of input/display settings for new language selector

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

Change 673848 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Avoid content language selector dialog resize shortly after opening

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

Edtadros added a subscriber: Edtadros.

@Jdlrobson In beta I can only see the 2 column version. I can confirm that the menu appears below the language button. Is there is a way to force the 1 and 4 columns? I get a two-column even with zero languages so I'm not sure if the number of languages is what would make the change.

@Jdlrobson, If i go to patchdemo everything looks right, but that's expected so I'm not sure that's more than just a second pair of eyes on it. Ignoring the multi-columns shown in the description and on patchdemo, on Beta the language menu is not positioned below or right aligned to the language button.

Screen Shot 2021-04-14 at 9.58.43 AM.png (443×860 px, 92 KB)

On beta cluster, it seems the mw-interlanguage-selector class has moved from the button to h3. The dialog is correctly positioned against the h3 now, but that's not what is desired. Any idea why/when this changed?

On beta cluster, it seems the mw-interlanguage-selector class has moved from the button to h3

The new language button has never actually used a button tag and the mw-interlanguage-selector has always been on an h3. What has changed is the styling rules for mw-ui-button to make sure text is centered.

It seems like the ULS dialog is using the span for positioning?

Change 681761 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/UniversalLanguageSelector@master] Add margin to modern Vector ULS dialog

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

Change 681761 abandoned by Jdlrobson:

[mediawiki/extensions/UniversalLanguageSelector@master] Add margin to modern Vector ULS dialog

Reason:

yip

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

Change 681762 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/UniversalLanguageSelector@master] Use ev.currentTarget not ev.target

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

Looking close, this was a problem because span.selector-open was being used as the $trigger inside ext.uls.launch instead of the heading... this should fix the problem.

Change 681762 merged by jenkins-bot:

[mediawiki/extensions/UniversalLanguageSelector@master] Use ev.currentTarget not ev.target

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

@Nikerabbit please let me know if you need any follow ups and I will take care of those first thing tomorrow.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Language menu should be position below the language button
✅ AC2: Language menu should be right-aligned with the language button.

Screen Shot 2021-04-28 at 9.48.16 AM.png (554×1 px, 125 KB)

Test Result - Prod

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Language menu should be position below the language button
✅ AC2: Language menu should be right-aligned with the language button.

Screen Shot 2021-05-06 at 4.49.33 PM.png (979×1 px, 368 KB)

Screen Shot 2021-05-06 at 4.48.54 PM.png (979×1 px, 502 KB)

All done here, thanks all!