Page MenuHomePhabricator
Create Task
Maniphest T192316

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

Assigned To
None
Authored By
Volker_E
Apr 16 2018, 8:29 PM
Tags
Referenced Files
F29284015: Screen Shot 2019-05-31 at 12.52.27 PM.png
May 31 2019, 9:23 AM
F17014797: T192316-CX-Create-Notifications-UI-glitches.png
Apr 16 2018, 8:36 PM
Subscribers
Aklapper
Etonkovidova
gerritbot
Liuxinyu970226
Nikerabbit
Nikitrain
• Petar.petkovic
View All 10 Subscribers

Description

Create Translation notification dialog features outdated styles and UI glitches:

T192316-CX-Create-Notifications-UI-glitches.png (452×1 px, 22 KB)

  • 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

SubjectRepoBranchLines +/-
New Interlanguagelink: Ensure WCAG 2.0 level AA contrast on licensemediawiki/extensions/ContentTranslationmaster+1 -1
Update interlanguage link entry pointmediawiki/extensions/ContentTranslationmaster+229 -443
Change close icon to correct icon (from OOUI icons)mediawiki/extensions/ContentTranslationmaster+6 -4
Customize query in gerrit

Related Objects

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.
Pginer-WMF mentioned this in T195760: Language Annual Plan 2018-2019.May 28 2018, 12:30 PM
Arrbee edited projects, added CX-out-of-beta; removed ContentTranslation.Jun 26 2018, 8:02 PM
Pginer-WMF added a project: Language-Team (Language-2019-January-March).Dec 27 2018, 9:37 AM
Pginer-WMF mentioned this in T217827: Update grey interlanguage links entry point popup.Mar 7 2019, 11:51 AM
Pginer-WMF added a comment.Mar 7 2019, 11:55 AM

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?

Nikerabbit added a comment.Mar 7 2019, 12:01 PM

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.

Pginer-WMF added a comment.Mar 8 2019, 9:28 AM
In T192316#5007927, @Nikerabbit wrote:

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.

Pginer-WMF added a comment.Mar 11 2019, 9:30 AM
In T192316#5012057, @Volker_E wrote:

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

Pginer-WMF edited projects, added Language-Team (Language-2019-April-June); removed Language-Team (Language-2019-January-March).Mar 29 2019, 11:44 PM
Pginer-WMF mentioned this in T206707: ContentTranslation callouts need to be aligned with dialog look.Apr 8 2019, 11:07 AM
Volker_E updated the task description. (Show Details)Apr 8 2019, 8:20 PM
Volker_E merged a task: T206707: ContentTranslation callouts need to be aligned with dialog look.
Volker_E added subscribers: Liuxinyu970226, gerritbot.
gerritbot added a comment.Apr 8 2019, 8:30 PM

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

gerritbot added a project: Patch-For-Review.Apr 8 2019, 8:30 PM
gerritbot added a comment.Apr 8 2019, 8:50 PM

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.
ReleaseTaggerBot added a project: MW-1.33-notes (1.33.0-wmf.25; 2019-04-09).Apr 8 2019, 9:01 PM
Nikitrain mentioned this in T218015: Proposal: Documentation improvements to the ~20 top 70 most viewed MediaWiki Action API pages on-wiki, Outreachy 18..Apr 9 2019, 3:27 AM
Volker_E added a project: UI-Standardization-Kanban.Apr 17 2019, 6:51 AM
• Petar.petkovic removed a project: Patch-For-Review.Apr 26 2019, 9:21 AM
gerritbot added a comment.May 13 2019, 10:05 AM

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

gerritbot added a project: Patch-For-Review.May 13 2019, 10:05 AM
• Petar.petkovic assigned this task to • santhosh.May 13 2019, 3:13 PM
• Petar.petkovic moved this task from Backlog to In Review on the Language-Team (Language-2019-April-June) board.
• Petar.petkovic updated the task description. (Show Details)May 16 2019, 2:58 AM
gerritbot added a comment.May 28 2019, 12:27 PM

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

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

• Petar.petkovic removed a project: Patch-For-Review.May 28 2019, 12:29 PM
• Petar.petkovic moved this task from In Review to Needs QA on the Language-Team (Language-2019-April-June) board.
Etonkovidova updated the task description. (Show Details)May 31 2019, 9:20 AM
Etonkovidova moved this task from Needs QA to Backlog on the Language-Team (Language-2019-April-June) board.May 31 2019, 9:23 AM
Etonkovidova subscribed.

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).

Screen Shot 2019-05-31 at 12.52.27 PM.png (299×558 px, 47 KB)

I've marked as done

  • Excessive padding
  • Title features a widow

Moving it to In Progress column.

Volker_E added a comment.May 31 2019, 11:28 PM

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
gerritbot added a comment.May 31 2019, 11:39 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

gerritbot added a project: Patch-For-Review.May 31 2019, 11:39 PM
gerritbot added a comment.Jun 2 2019, 8:13 AM

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

• Petar.petkovic removed a project: Patch-For-Review.Jun 2 2019, 8:22 AM
ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.8; 2019-06-04).Jun 2 2019, 11:01 AM
Volker_E updated the task description. (Show Details)Jun 3 2019, 1:11 AM
Pginer-WMF moved this task from Backlog to Basic workflow on the CX-out-of-beta board.Jun 12 2019, 4:04 PM
Pginer-WMF edited projects, added Language-Team (Language-2019-July-September); removed Language-Team (Language-2019-April-June).Jul 9 2019, 1:47 PM
Pginer-WMF removed a project: Language-Team (Language-2019-July-September).Dec 30 2019, 1:25 PM
Pginer-WMF mentioned this in T163004: New translation panel shown when clicking on grey links needs layout adjustment.Apr 28 2020, 1:19 PM
• santhosh removed • santhosh as the assignee of this task.Mar 16 2021, 9:00 AM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL