Plots2: [Planning] Translation System Refinement

[imajit]

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

• [ ] 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
  
  
  • [ ] Dialect Support [Discussion #9809 ]
  
  
• [ ] Tests for translation function
  
  
  
  • [ ] Tests for new changes in Translation function
  
  
  • [ ] Tests for UI changes
  
  
• [ ] Setting up workflow to import translations
  
  
  
  • [ ] Merging reviewed string using Transifex bot
  
  
• [ ] Translation Dashboard and Community box section
  
  
  
  • [ ] Add FAQ section to existing wiki page
  
  
• [ ] Test for FTOs issue
• [ ] Add Documentation
  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!