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:

cx-refresh-suggestions.png (322×780 px, 102 KB)

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:

cx-dashboard-reviewed-refresh.png (315×689 px, 66 KB)

cx-dashboard-refresh-layout.png (282×796 px, 54 KB)

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.
Pginer-WMF edited projects, added User-Petar.petkovic; removed Design.

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?

Screen Shot 2017-08-28 at 3.49.56 PM.png (350×1 px, 64 KB)

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?

Screen Shot 2017-08-28 at 3.49.56 PM.png (350×1 px, 64 KB)

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.

Screen Shot 2017-09-05 at 3.14.03 PM.png (244×907 px, 35 KB)