Page MenuHomePhabricator

Align Create Translation notification dialog to follow design fundamentals and fix UI glitches
Open, MediumPublic

Description

Create Translation notification dialog features outdated styles and UI glitches:

  • Base font-size needs to be 14px in Vector – https://gerrit.wikimedia.org/r/465773
  • Excessive padding
  • Title features a widow
  • input doesn't inherit mediawiki.ui nor OOUI interaction styles like focus (Input field removed in new design - T217827)
  • Non-standard close icon – https://gerrit.wikimedia.org/r/501990 thanks @Nikitrain
  • title for new page is not a real label (not part of new design any more)
  • terms of use message fails WCAG 2.0 level AA - needs to feature #54595d
  • Create from scratch is not clearly indicated as actionable element, should feature #36c at minimum (Button removed in new design - T217827)
  • line-height of terms needs to be increased
  • font-size changed, as dialog is now child of .portal. Needs to have 14px equivalent in ems.

Details

Related Gerrit Patches:
mediawiki/extensions/ContentTranslation : masterNew Interlanguagelink: Ensure WCAG 2.0 level AA contrast on license
mediawiki/extensions/ContentTranslation : masterUpdate interlanguage link entry point
mediawiki/extensions/ContentTranslation : masterChange close icon to correct icon (from OOUI icons)

Event Timeline

Volker_E created this task.Apr 16 2018, 8:29 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 16 2018, 8:29 PM
Volker_E updated the task description. (Show Details)Apr 16 2018, 8:36 PM
Pginer-WMF triaged this task as Medium priority.Apr 26 2018, 5:29 PM
Pginer-WMF moved this task from Needs Triage to Out of Beta on the ContentTranslation board.

As part of the reviews to move out of beta, there is a new design proposed for this element with should resolve the different issues captured here: T217827: Update grey interlanguage links entry point popup

The only one, I'm not sure is "Title features a widow" which I don't know what it refers to. Can you clarify?

The only one, I'm not sure is "Title features a widow" which I don't know what it refers to. Can you clarify?

I think it means the word it? of the title being on the second line alone.

The only one, I'm not sure is "Title features a widow" which I don't know what it refers to. Can you clarify?

I think it means the word it? of the title being on the second line alone.

If that is the issue, we can try to make the issue less likely to occur, but I think it is very hard to prevent given that the length of the string depends on (a) the language the whole string is displayed in, and (b) the length of the language name selected by the user.

A smarter solution that works across languages could be supported, but I think that makes more sense as a general solution of our UI system rather than as part of this particular case.

Volker_E added a comment.EditedMar 8 2019, 8:52 PM

In this specific case I thought putting the whole question in next line seems appropriate. The effort needed to tackle this generally (JS involved, performance cost) doesn't allow a general solution as of now.

In this specific case I thought putting the whole question in next line seems appropriate. The effort needed to tackle this generally (JS involved, performance cost) doesn't allow a general solution as of now.

Awesome. Then that's something that is already covered in the proposed new version T217827: Update grey interlanguage links entry point popup

We'll use the current ticket as a checklist to review against the new version when that is completed.
Thanks for the clarifications, @Volker_E

Change 501990 had a related patch set uploaded (by VolkerE; owner: Nikitrain):
[mediawiki/extensions/ContentTranslation@master] Change close icon to correct icon (from OOUI icons)

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

Change 501990 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Change close icon to correct icon (from OOUI icons)

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

Volker_E updated the task description. (Show Details)Apr 8 2019, 8:52 PM
Volker_E added a subscriber: Nikitrain.

Change 509046 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] Update interlanguage link entry point

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

Change 509046 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Update interlanguage link entry point

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

Etonkovidova updated the task description. (Show Details)May 31 2019, 9:20 AM
Etonkovidova added a subscriber: Etonkovidova.

Checked in cx2-testing. The dialog looks as it's defined in T217827: Update grey interlanguage links entry point popup. There is still some work to be done - and, probably, it's worth @Pginer-WMF to take a look (the dialog box is smaller, some elements may need improvements).

I've marked as done

  • Excessive padding
  • Title features a widow

Moving it to In Progress column.

The dialog is now child of the .portal navigation and not appended to the body any more. Therefore it receives a wrong font-size.
Needs to be an equivalent of 14px in ems (for user size alteration)

Volker_E updated the task description. (Show Details)May 31 2019, 11:29 PM
Volker_E updated the task description. (Show Details)May 31 2019, 11:32 PM

Change 513709 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/ContentTranslation@master] New Interlanguagelink: Ensure WCAG 2.0 level AA contrast on license

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

Change 513709 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] New Interlanguagelink: Ensure WCAG 2.0 level AA contrast on license

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

Volker_E updated the task description. (Show Details)Jun 3 2019, 1:11 AM