Page MenuHomePhabricator

Show message when loading an SVG with no translations
Closed, ResolvedPublic2 Story Points

Description

When the user selects an image without translations, a message should be shown above the search box (and don't continue to the translation form).

Design 1 - When user is on search page

  • Text: This file does not have any labels available for translation. Please pick another image.
    • links to https://meta.wikimedia.org/wiki/Community_Tech/SVG_translation#FAQ (For now. Will link to a proper tool help page in future). The reason for linking to an FAQ is that the above text is not fully accurate - there will be caveats such as when the SVG has labels but they are not recognizable as text by the tool. The FAQ can have a complete rundown of caveats and will encourage users to use Inkscape (and similar tools) when they want to do something more advanced.

Design 2 - When user is on Translate page

TBD

Event Timeline

Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptNov 23 2018, 2:04 AM

@Prtksxna Assigning this to you. I think Sam's proposed solution above in the description is great. Let's get a design for it. Open to hear other ideas too, of course. :)

Niharika added a project: Community-Tech.
Niharika moved this task from Untriaged to In Design on the Community-Tech board.

Yep @Samwilson's idea makes sense, let's go with that.

That red is #b32424.

Niharika removed Prtksxna as the assignee of this task.Jan 3 2019, 1:29 AM
Niharika triaged this task as Normal priority.
Niharika updated the task description. (Show Details)
Niharika moved this task from In Design to To be estimated/discussed on the Community-Tech board.

@Prtksxna We do need another design for this ticket in the event that a user directly lands on the translation page for an image using a link and the image does not have any labels for translation. In that case, we should show them the image and a message.

@Prtksxna We do need another design for this ticket in the event that a user directly lands on the translation page for an image using a link and the image does not have any labels for translation. In that case, we should show them the image and a message.

Yep that makes sense, I'll work on this.

Is there a possibility that we don't show a link to the tool on images that have nothing to translate? A nothing to do here page will definitely be helpful because I am sure we can't safeguard against all situations, but is it possible to avoid some?

@Prtksxna We do need another design for this ticket in the event that a user directly lands on the translation page for an image using a link and the image does not have any labels for translation. In that case, we should show them the image and a message.

Yep that makes sense, I'll work on this.
Is there a possibility that we don't show a link to the tool on images that have nothing to translate? A nothing to do here page will definitely be helpful because I am sure we can't safeguard against all situations, but is it possible to avoid some?

Yes, we won't be showing the links on all images. Only on those in the "Translation possible" category. I plan to discuss this on the project page once we are closer to building the gadget/template for the links.

Niharika set the point value for this task to 2.Jan 9 2019, 12:38 AM
Niharika moved this task from To be estimated/discussed to Estimated on the Community-Tech board.
Niharika updated the task description. (Show Details)Jan 9 2019, 12:41 AM
Samwilson moved this task from Ready to In Development on the Community-Tech-Sprint board.

When the user selects an image without translations, a message should be shown above the search box (and don't continue to the translation form).

Should be 'below the search box' yes?

The default OOUI field-error display looks like this:

Is that okay or do we want the red text and no icon?

links to https://meta.wikimedia.org/wiki/Community_Tech/SVG_translation#FAQ (For now. Will link to a proper tool help page in future).

This link should now be https://commons.wikimedia.org/wiki/Special:MyLanguage/Commons:SVG_Translate_tool#FAQ shouldn't it?

Design 2 - When user is on Translate page
TBD

Is there a design for this?

@Samwilson Let's do red text and no icon, like in the design. Let's make the text 12px though. It's easy to miss.
Yep, the link should now go to https://commons.wikimedia.org/wiki/Special:MyLanguage/Commons:SVG_Translate_tool#FAQ.
And for the design for when the user is on the Translate page, I haven't really heard from Prateek and I know he's out. My design preference for that would be to just add the same message under the To and From dropdowns and in that space, show the same message as in the design above (F27636316) and in the same color. And we want to keep showing the image.

Something like this -


Same color/design as in the mock Prateek made.

Sounds great. :)

Do we want a tooltip for the helpNotice link?

The two pages are looking like this in the latest version of the above patch:

SearchTranslate

The icon is bigger than is asked for because it's the standard OOUI one... is that ok or should I update it to use the smaller one (which I guess is a Phabricator one)?

Tested and works. I'd prefer to use the smaller icon, if it's straightforward to switch to it. If not, this is fine.

I experimented with reducing the size of the OOUI help icon, but it didn't look good. The one in the description is from Font Awesome, which we're not using. I'll look into including it manually.

aezell added a subscriber: aezell.Mar 5 2019, 4:39 PM

I like the idea of using the Font Awesome icon. Nice.

So, I'm a bit meh about this; first, I don't like using bits and pieces from different libraries, but that's a minor point. The second slightly more important point is taht if we're serious in allowing users to change their interface language, then some RTL languages have a flipped question mark, which OOUI is supposed to know how to deal with, but FontAwesome doesn't.

I don't think it's a show stopper, though, so since product wants this, I'm merging it in. For the record: I am cringing while doing it. ;)

More seriously -- @Niharika, I'd keep a record of the RTL issue. I don't think it's something that will be a be-all-end-all feature, but when we do the RTL audit and get more users and translations, it might be good to double check on how that message comes through in Arabic (which has a flipped question mark).

This is now live on the staging site and is ready for QA.

I agree that the non-RTL nature of the FA icon isn't great. Maybe we can revisit this as part of T208371. We can always revert to the pure-OOUI solution for the message. We're using the same icon in T213272.

Niharika closed this task as Resolved.Mar 6 2019, 6:35 PM
Niharika moved this task from QA to Q3 2018-19 on the Community-Tech-Sprint board.

@Samwilson @Mooeypoo I have made a note of the issue in T208371: Add CSSJanus to generate the RTL stylesheet.
This works well for me. Let's put it in production.

Niharika moved this task from Backlog to Done on the SVG Translate Tool board.Mar 6 2019, 6:35 PM

This has been included in version 0.4.0 and is now in production.