Page MenuHomePhabricator

Adjust translation headers in the translation dashboard
Closed, ResolvedPublic

Description

Currently, the translation dashboard shows different lists (suggestions, ongoing translations, and published articles). Some of those lists do not have an explicit label, but those in the suggestions section do which is not part of the list.

In order to better align with the design styleguide, we propose to provide all lists with a header that is part of the same piece of paper as the content displayed. The header will include:

  • The list title. This is the name that identifies the list (e.g., "For later"). Titles proposed:
    • Suggested pages
    • For later
    • Translations in progress
    • Translations published
  • Optionally, the language selector. Depending on the case:
    • The suggestions list has a language selector that requires a specific source and target language.
    • The "for later" list does not need a language selector. The list will show all items the user added, regardless of the source and target languages.
    • In-progress and published have a language selector with the "any -> any" option as default, allowing the user to filter the list.

Here are some examples:

SuggestionsSuggestions & for laterIn-progress

For lists, regardless of them including a language selector or not, the spacing needs to be consistent. A diagram below illustrates the distances used in each case:

This ticket is focused on the list headers, there are other styling adjustments related to lists:

  • T160356 Adjust the style of list items.
  • T158961 A general ticket about rearranging selectors (including the language one).

Event Timeline

Amire80 moved this task from Needs Triage to Bugs on the ContentTranslation board.Jun 27 2017, 5:06 PM
Nikerabbit updated the task description. (Show Details)Jun 30 2017, 8:27 AM
Pginer-WMF updated the task description. (Show Details)Jun 30 2017, 9:42 AM
Pginer-WMF triaged this task as Normal priority.Jun 30 2017, 9:54 AM

Change 363234 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Adjust translation headers in the dashboard

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

santhosh updated the task description. (Show Details)Jul 5 2017, 4:35 AM
santhosh updated the task description. (Show Details)
Nikerabbit updated the task description. (Show Details)Jul 5 2017, 6:30 AM

[mediawiki/extensions/ContentTranslation@master] Adjust translation headers in the dashboard

This is not expected right?

The button label for starting new translation should be "New Translation" as per T160067: Rename new translation call to action and should not be changes as shown in screenshots in this image. @Pginer-WMF Please confirm.

Yes @santhosh, Niklas has pointed that out, and it was changed in the new patchset.
Screenshots should probably be updated by @Pginer-WMF

The button label for starting new translation should be "New Translation" as per T160067: Rename new translation call to action and should not be changes as shown in screenshots in this image. @Pginer-WMF Please confirm.

Yes. You are right.

In the process of review different changes were captured at different points in time, so it is possible that there are some outdated parts out of the main topic of the ticket (the headers in this case).

@Petar.petkovic I see some issues with new PS6 also. Since you had issues in reproducing this, I will try to get some hints where the issue is.

Change 363234 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Adjust translation headers in the dashboard

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

@Petar.petkovic
https://gerrit.wikimedia.org/r/#/c/363234/ shows that the patch has been merged to master, but I still see 'More suggestions' instead of "Suggested pages" in cx-testing.wmflabs.org
Both :
"cx-translation-label-published": "Published translations" and "cx-translation-label-draft": "Translations in progress" are not displayed in cx-testing.

Checked in betalabs.
@Pginer-WMF, please take a look:
The styling of the headers
.cx-suggestionlistheader, .cx-translationlistheader {

background-color: #fff;
color: #54595d;
height: 3.667em;
padding: 0 16px;
font-size: 1.125em;
font-weight: bold;
line-height: 1;

With long language names


With "From/To any language"

@Petar.petkovic
https://gerrit.wikimedia.org/r/#/c/363234/ shows that the patch has been merged to master, but I still see 'More suggestions' instead of "Suggested pages" in cx-testing.wmflabs.org
Both :
"cx-translation-label-published": "Published translations" and "cx-translation-label-draft": "Translations in progress" are not displayed in cx-testing.

Me and @KartikMistry checked on cx-testing.wmflabs.org and all labels are displayed correctly.

Following screenshots are taken on cx-testing.wmflabs.org for Suggestions and In progress lists.

Checked in betalabs.
@Pginer-WMF, please take a look:
The styling of the headers
.cx-suggestionlistheader, .cx-translationlistheader {

background-color: #fff;
color: #54595d;
height: 3.667em;
padding: 0 16px;
font-size: 1.125em;
font-weight: bold;
line-height: 1;

With long language names


With "From/To any language"

Truncating language names is discussed briefly in T158961#3492562 and following comments, and more discussions are taking place outside Phabricator, as many folks are unhappy with current state. Current implementation follows design details of T169967.

Any suggestions on how to deal with long language names (with smaller screens in mind) are welcome and I suggest creating separate ticket for that. Easiest and most obvious thing would be to allow more space for language selector, so longer names fit larger screens.
T157212 should be taken in consideration, and design on small screen with following mockup especially F6557922, where language names are substituted with two letter language codes.

Checked in betalabs.
@Pginer-WMF, please take a look:

Looks good in general. A small detail to consider: the overall list should use a 2px radius for their corners. That means that the top left/right corners of the header should be rounded. As well as the bottom left/right of the last element in the list.

Regarding the language selector, one of the issues is the font is a big too large. I created a ticket (T173403). Once that is solved we can evaluate how much room is needed.

Change 372216 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/ContentTranslation@master] Replace greys, most blues and reds with WikimediaUI palette ones

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

Checked in cx-testing.wmflabs.org (and in wmf.15). I assume that the changes were deployed already since the task has wmf.13 tag.
(1) All new labels are in place - 'New translation', 'Translations in progress', 'Suggested pages',
'For later' and, instead of 'Translation published', 'Published translations'.

(2) There are couple of issues:

  • (It might be a known issue) the layout in wmf.15 is different from cx-testing - no division between 'For later' and 'Suggested pages'.

Compare:
wmf.15

cx-testing

The above issues are not related to the ticket, so the ticket is closed as Resolved.

Etonkovidova closed this task as Resolved.Aug 28 2017, 10:01 PM

Change 372216 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Replace greys, most blues and reds with WikimediaUI palette ones

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