Page MenuHomePhabricator

Add help texts to map UI in VE
Open, Needs TriagePublic3 Estimated Story Points

Description

Requirements

  • Add PopupButtonWidget (quiet) to each header in the map interface options tab in Visual Editor. No header or footer. If possible, pop-up should open on the right hand side of label.

Note: both T318813 and T318815 have a bit of related follow-up work.

Texts for info icon pop-ups

Display

Set the horizontal position of the map on the page. Other page content will only flow around the map if set to right or left, not center.

Language

Kartographer uses the content language of the wiki as the default for label language. This can be changed with this setting for just this map.

Use `local` instead of a language name to show all labels in the language local to that location. For example, city names in Mexico would be displayed in Spanish, while city names in Japan would be displayed in Japanese.

When labels are not available in the language chosen, Kartographer follows a fallback process. For more information on how this works see [[ https://www.mediawiki.org/wiki/Help:Extension:Kartographer#Languages_and_fallbacks | the Kartographer help page ]].
Mock and specs

See epic: T318834

Example of pop-up

Maps options tab - with popup example.png (636×711 px, 207 KB)

Technical implementation

Follow OOUI but align left with labels with 8px spacing between

Event Timeline

lilients_WMDE set the point value for this task to 3.Sep 28 2022, 2:41 PM

Change 843503 had a related patch set uploaded (by Svantje Lilienthal; author: Svantje Lilienthal):

[mediawiki/extensions/Kartographer@master] Add help texts to map UI in VE

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

ECohen_WMDE added a subscriber: ECohen_WMDE.

Moved caption help text to the caption ticket

I think we want to avoid this, but I don't know if it's easy?

image.png (303×725 px, 30 KB)

Currently we are using a build in help feature of the field element. The styling comes from there. We can try to change the styling of the help element in the OOUI field or create and include PopupButtonWidget from scratch. I am simply not sure if the the effort is worth it ... but we can talk about that.

Update: Looks like the popup windows size is depending on the available space. See following example with more elements in the dialog:

Screenshot from 2022-10-21 16-17-01.png (592×1 px, 125 KB)

Change 843503 merged by jenkins-bot:

[mediawiki/extensions/Kartographer@master] Add help texts for align/language settings in VE maps dialog

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

Change 849477 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] Allow the large language help pupup to utilize the entire dialog

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

Change 849498 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] [POC] Don't focus help icon when switching tabs in VE dialog

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

Change 849477 merged by jenkins-bot:

[mediawiki/extensions/Kartographer@master] Allow the large language help popup to utilize the entire dialog

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

thiemowmde added a subscriber: thiemowmde.

The only remaining issues I can see:

  1. The (i) icons are on the very right. This is different from the initial mock, but consistent with OOUI. See https://doc.wikimedia.org/oojs-ui/master/demos/?page=layouts&theme=wikimediaui&direction=ltr&platform=desktop. I tried to change it with a little bit of CSS but it ends being somewhat fragile, unfortunately. I would prefer if we could stick to the OOUI default. Solved, see below.
  2. The keyboard focus starts on the (i) icon. We can easily change this, see https://gerrit.wikimedia.org/r/849498. Problem: You have to press + to find the help text. This doesn't feel right.

Leaving open until UX (or PM) had the chance to look at this.

I already talked about the position of the icons with Elisha and she adapted the spec in the epic accordingly. I guess the mock in this ticket is just a left over.