[Planning] Translation System Refinement

[imajit]

I have not completely planned this out yet but these are some parts I'll work on :

• [x] UI Issues with Translation icon
  • [x] Fix position of icon
  • [x] Improve pop-up
  • [x] Fix UI
• [ ] Translation function improvement
  • [x] Handle inline function calls
  • [x] Positioning and visibility of icon
  • [x] Reduce Icon Count
  • [x] Handle empty strings in translation files
  • [ ] Dialect Support [Discussion #9809 ]
• [ ] Tests for translation function
  • [x] Tests for new changes in Translation function
  • [x] Tests for UI changes
  • [ ] Tests for FTO related changes
• [x] Setting up workflow to import translations
  • [x] Create a dummy project to safely test integration
  • [x] Export Strings from Github Repo to Transifex
  • [x] Importing Reviewed strings from Transifex
• [ ] Translation Dashboard and Community box section
  • [x] Add FAQ section to existing wiki page
• [x] Test for FTOs issue
  • [x] Verify UI changes in Gitpod
  • [x] FTO issue template
  • [ ] Launch Browser in Gitpod
• [x] Add Documentation
  • [x] New Translation Function
  • [x] UI verification in Gitpod
  • [x] Transifex integration I'll add subtasks and other tasks. Feel free to add new ideas/tasks :smile:

[jywarren]

These are looking good! Many may break out into subtasks, agreed! As you go, you might convert some into headings instead of tasks. Cool!

[jywarren]

I also linked you to https://github.com/publiclab/plots2/milestone/22, and if you want we can make this issue the new "lead" issue there by reordering and mentioning it in the description!

[Tlazypanda]

Hey @imajit Nice breakdown 💯 Here is a comment that I made on @Manasa2850 planning issue that might be helpful - https://github.com/publiclab/plots2/issues/9694#issuecomment-850962289

Also It might be helpful for both of you to go through each other's planning issue and help brainstorm. Brownie points for finding overlap if any and handling that or expanding your proposals a bit to get some new ideas onboard. Thank you! Have fun 🎊

[imajit]

On the site there a lot of buttons where the translation function is called as we cannot nest one button inside another, the globe icon occurs besides the button. I can change it such that both text and globe icon is inside a single button but I read on the internet that nesting two anchor tags is not considered a good practice and I would have to restyle every button where this happens which would be a lot of changes site-wide. In some cases the buttons are also too small and having a nested globe icon would make things even more compact. If I remove the nested globe then there will be a considerable reduction in the number of globe icons from the site. So wanted to know your views. Should I change each button or just have make it a simple button with no nesting? @jywarren @Tlazypanda @RuthNjeri @cesswairimu @grvsachdeva @keshavsethi

[ebarry]

Thank you Ajit, nice to chat through forum ideas today. Interested to hear if you developed any more perspectives?

[imajit]

Thank you Ajit, nice to chat through forum ideas today. Interested to hear if you developed any more perspectives?

Hey! I think the existing Translation process works well for recruiting new translators, can we get an opinion from the existing translators about what they feel can be added or what they feel is missing, I can work on that. Also, I think we can get more contributors for translation if we advertise about it https://github.com/publiclab/plots2/issues/9659#issuecomment-848229600 , would love to hear your views on that too

[imajit]

Also, there are some simple string replacement changes that can be very good candidates for ftos, I'll make some ftos for this, this can be helpful in understanding what tests I need to add to make translation based ftos easy to review and merge. Thanks @grvsachdeva for this suggestion :100:

[RuthNjeri]

On the site there a lot of buttons where the translation function is called as we cannot nest one button inside another, the globe icon occurs besides the button. I can change it such that both text and globe icon is inside a single button but I read on the internet that nesting two anchor tags is not considered a good practice and I would have to restyle every button where this happens which would be a lot of changes site-wide. In some cases the buttons are also too small and having a nested globe icon would make things even more compact. If I remove the nested globe then there will be a considerable reduction in the number of globe icons from the site. So wanted to know your views. Should I change each button or just have make it a simple button with no nesting? @jywarren @Tlazypanda @RuthNjeri @cesswairimu @grvsachdeva @keshavsethi

Hi @imajit From what you are saying, is that currently, the global icon and the button, is not nested? And that from your research it is not a good practise to nest them?

At the end of the comment, you do mention

If I remove the nested globe then there will be a considerable reduction in the number of globe icons from the site. So wanted to know your views. Should I change each button or just have make it a simple button with no nesting?

I am confused, is there nesting on the site currently? What do you mean by removing the nested globe and it leading to a reduction in the number of globe icons? Does removing the nesting mean that you are completely removing the globe icon?

[imajit]

On the site there a lot of buttons where the translation function is called as we cannot nest one button inside another, the globe icon occurs besides the button. I can change it such that both text and globe icon is inside a single button but I read on the internet that nesting two anchor tags is not considered a good practice and I would have to restyle every button where this happens which would be a lot of changes site-wide. In some cases the buttons are also too small and having a nested globe icon would make things even more compact. If I remove the nested globe then there will be a considerable reduction in the number of globe icons from the site. So wanted to know your views. Should I change each button or just have make it a simple button with no nesting? @jywarren @Tlazypanda @RuthNjeri @cesswairimu @grvsachdeva @keshavsethi

Hi @imajit From what you are saying, is that currently, the global icon and the button, is not nested? And that from your research it is not a good practise to nest them?

At the end of the comment, you do mention

If I remove the nested globe then there will be a considerable reduction in the number of globe icons from the site. So wanted to know your views. Should I change each button or just have make it a simple button with no nesting?

I am confused, is there nesting on the site currently? What do you mean by removing the nested globe and it leading to a reduction in the number of globe icons? Does removing the nesting mean that you are completely removing the globe icon?

No, there is no nesting in buttons, a globe icon is rendered outside the button which breaks the styling, you can see how it is rendered by comparing this screenshot to the previous one

Sorry if my comment was confusing, what I meant was either I can remove globe icons from buttons, but as many strings for translation are button texts it will reduce the number of globe icons on site considerably, or as globe icons are only visible to translation team members I can change styling for each button by nesting globe icon inside the button such that there is not much difference in UI for normal user vs Translation team member. Here is an example how a nested button might look

[RuthNjeri]

Thanks for the clarification @imajit, I am beginning to understand what you are saying....for this part

what I meant was either I can remove globe icons from buttons, but as many strings for translation are button texts it will reduce the number of globe icons on site considerably

The reduction in the number of globe icons means that translators might miss out on texts to translate because of the reduced number of globe icons?

The idea to nest the globe icon makes much more sense to me at the moment

[imajit]

Thanks for the clarification @imajit, I am beginning to understand what you are saying....for this part

what I meant was either I can remove globe icons from buttons, but as many strings for translation are button texts it will reduce the number of globe icons on site considerably

The reduction in the number of globe icons means that translators might miss out on texts to translate because of the reduced number of globe icons?

The idea to nest the globe icon makes much more sense to me at the moment

The strings will be there on the Transifex site, just its quick link which is provided by the globe icon will not be there, translators can find all strings on site which looks like this

[RuthNjeri]

oh, I see... thanks @imajit, that makes it very clear...

I personally prefer that the global icons stay present on the site since it is an easier way for translators to quickly see what needs to be translated in addition to the Transifex site...

If the globe icon is nested in the button like the screenshot below,

will the user be able to click the globe icon without it creating a new post? perhaps the globe icon should be outside and inline and not nested in it...

[imajit]

Yes only if user clicks on the globe it will redirect to translation site else anywhere on the button will create new post ,but I agree it will be a bit hard to click for smaller buttons and smaller screens. So I guess it's best to change the styling to make globe icon inline with the button but outside it

[RuthNjeri]

Yes only if user clicks on the globe it will redirect to translation site else anywhere on the button will create new post ,but I agree it will be a bit hard to click for smaller buttons and smaller screens. So I guess it's best to change the styling to make globe icon inline with the button but outside it

I totally agree...

[jywarren]

I like the idea of the globe icon remaining and being inline with the button but just outside. I appreciate the care going into this! One other possibility is that the globe icon would create a popover that is itself clickable, distinct from the button. But if you're able to consistently get the globe icon outside the button, that sounds great.

I can imagine that it might cause some trouble in very small spaces, but to be honest, we have to be prepared for languages where the button text is quite long anyways. So let's just work to adapt any designs of places where widening the button area by adding this globe icon next to it causes layout issues, and make sure our page designs can accommodate this smoothly. This can be done in follow-up unless we notice any particularly urgent ones like on signup/login buttons!

Thanks @imajit and @RuthNjeri for thinking through this!

[jywarren]

Hi @imajit -- i like https://publiclab.org/notes/ajitmujumdar25999/07-18-2021/importing-new-translations-from-transifex-project -- looking nice and great screenshots! I do think though that we need to set a little more context and explanation for folks -- something like:

The Public Lab website is available in different languages, with translation provided by community members. As the website menus, buttons, and other interfaces change, those new texts must be imported back into the translation system to be shown to translators. This activity shows how that process works; it can be done by Transifex managers only.

or something.

Lower on the page, we should more clearly explain the reverse --

Once texts are translated and reviewed (link to that activity), we can export them back to the website, either automatically (with conditions x, y, z) or manually. Read below to see how.

Manual export of finished translations to PublicLab.org

Automated export of finished translations to PublicLab.org

etc etc

Does this makes sense?

[jywarren]

Hi @imajit! This is looking great. I wanted to ask if you'd spend some time in your final week to write up notes and documentation in a single place for how to run all this. If you'd like to write it from a technical perspective, it could go in the READMEs in /doc/. If you'd like to write it for non-technical readers, it could go at https://publiclab.org/translation. I'd like if you could try to comprehensively answer questions like "what is the complete lifecycle of translation" and "how do newly texts in the code enter the translation system" and "when are translations imported back into the code and by whom" and "what are some spots where this lifecycle can get stuck?" and all those sorts of questions a new person might have when coming to the system. You can definitely link to the answers where they already exist, but let's emphasize legibility and simplicity where we can.

How does this sound? I think it'll be an excellent way to round out the summer's work. Thank you so much!!