Page MenuHomePhabricator

Adjust the visual style of the refresh action from the list of suggested translations
Closed, ResolvedPublic

Description

The list of suggestions has a "refresh" action, currently looks as shown below:

There are several aspects to adjust to better align with the design guidelines:

  • Blue color should be used for the action to better convey interactivity.
  • A reload icon should be added to clarify the action.
  • There should be no gap between the last item in the list and the reload action, just a regular line as between any other item in the list. This makes the whole list a single piece of paper, following the same visual style described for cards (T158410).
  • There should be a minimum margin below the refresh action in order not to be at the edge of the browser window as currently does.

The mockup below illustrates the adjustments descried above:

Event Timeline

Pginer-WMF renamed this task from Adjust the refresh action from the suggestion list to Adjust the visual style of the refresh action from the list of suggested translations.Feb 22 2017, 9:38 AM
Pginer-WMF created this task.
Amire80 moved this task from Needs Triage to Bugs on the ContentTranslation board.
Pginer-WMF removed Pginer-WMF as the assignee of this task.Jun 27 2017, 8:00 AM
Pginer-WMF edited projects, added User-Petar.petkovic; removed Design.
Pginer-WMF updated the task description. (Show Details)Jul 31 2017, 8:39 AM

Change 368738 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Adjust styling for refresh action

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

Change 368738 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Adjust styling for refresh action

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

Change 373102 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Fix suggestionlist margin

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

Change 373102 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Fix suggestionlist margin

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

Checked in cx-testing (for additional margin fix) and in wmf.15. The icon looks a little bit bigger than in the mockup screenshot.

@Pginer-WMF, can you take a look?

Checked in cx-testing (for additional margin fix) and in wmf.15. The icon looks a little bit bigger than in the mockup screenshot.
@Pginer-WMF, can you take a look?

Both the icon and the text should be 16px. In the screenshot it seems the icon is a bit bigger than the text.

Change 374504 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Make refresh icon smaller

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

Change 374504 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Make refresh icon smaller

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

Checked in testwiki wmf.17 - the size of the refresh icon is adjusted.

Etonkovidova closed this task as Resolved.Sep 5 2017, 10:15 PM