Translation prompt improvement

[grvsachdeva]

Currently, we show Translation prompts on /subscriptions page, some on /dashboard and /blog page.

Conditions for translation prompt:

1. translated_string.length > 3 - If translated string has length greater than 3
2. current_user &.has_tag('translation-helper') - User has tag translation-helper on their profile
3. !translated_string.include?("translation missing") - There shouldn't be "translation missing" in the translated_string. This effectively means we show translation prompt only in case where translation is present.

The condition 3 is buggy or I would say totally wrong. Why? Because, previously we were running only 3 langs and in those while testing I got a span with translation missing, something like "<span class=\"translation_missing\" title=\"translation missing: ru.home.subscriptions.notes, fallback: false\">Notes</span>" but this would be returned when the translation key is not found in any locale yes, not in en.yml too but in all other cases we would get something i.e., either a translated value in the Russian. japan, etc or a English string because we fallback to English.

Let's say, we want to show prompt only in case a translation is missing in the language we are browsing publiclab.org

then, it would be something like:

Subscription page in English:

Subscription page in Russian:

So, you can see so many prompts because we have less Russian translations. So, what should be the conditions in which prompt should be visible?

Bugs to solve: currently, we directly wrap the returned translation in the span(prompt is made using span element), but we don't get string always in translated value some times it is code too and in those cases, 💥 👇 😅

Let's collect ideas and issues about improving translation prompts here. Thanks!

[grvsachdeva]

@jywarren @ebarry @steviepubliclab

[jywarren]

Ooh, good observations! A couple ideas. 1. We might limit the # of prompts to 5 per page, using css pseudo selectors. 2. We could exempt any string that includes < or > for now?

…

On Thu, May 2, 2019, 2:51 PM Gaurav Sachdeva ***@***.***> wrote: Currently, we show Translation prompts on /subscriptions page, some on /dashboard and /blog page. Conditions for translation prompt: 1. translated_string.length > 3 - If translated string has length greater than 3 2. current_user &.has_tag('translation-helper') - User has tag translation-helper on their profile 3. !translated_string.include?("translation missing") - There shouldn't be "translation missing" in the translated_string. This effectively means we show translation prompt only in case where translation is present. The condition 3 is buggy or I would say totally wrong. Why? Because, previously we were running only 3 langs and in those while testing I got a span with translation missing, something like "<span class=\"translation_missing\" title=\"translation missing: ru.home.subscriptions.notes, fallback: false\">Notes</span>" but this would be returned when the translation key is not found in any locale yes, not in en.yml too but in all other cases we would get something i.e., either a translated value in the Russian. japan, etc or a English string because we fallback to English. Let's say, we want to show prompt only in case a translation is missing in the language we are browsing publiclab.org then, it would be something like: Subscription page in English: [image: eng_as_lang] <https://user-images.githubusercontent.com/20878070/57098593-1d60f380-6d38-11e9-960f-bd9a3455a295.png> Subscription page in Russian: [image: russian_as_a_lang] <https://user-images.githubusercontent.com/20878070/57098645-42556680-6d38-11e9-8d26-1cbec91932b9.png> So, you can see so many prompts because we have less Russian translations. So, what should be the conditions in which prompt should be visible? Bugs to solve: currently, we directly wrap the returned translation in the span(prompt is made using span element), but we don't get string always in translated value some times it is code too and in those cases, 💥 👇 😅 [image: bug] <https://user-images.githubusercontent.com/20878070/57099061-2acaad80-6d39-11e9-9720-147f9e8126fa.png> Let's collect ideas and issues about improving translation prompts here. Thanks! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#5651>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAF6J5FQLGOWIQFOB34U63PTMZZ7ANCNFSM4HKEEXWA> .

[grvsachdeva]

2. We could exempt any string that includes < or > for now?

Ok. Sounds good!

1. We might limit the # of prompts to 5 per page, using css pseudo
   selectors.

Will give it a try.

Also, we want to show prompt only if a translation is not present for the current language in which we're browsing the website. Right?
Thanks!

[grvsachdeva]

Reopening as limiting the prompt number on screen part is remaining @jywarren

[jywarren]

Hi @gauravano! If you can point me at where the JS is for selecting all the prompt insertion points on the page, I can add code to get only the first 5. We could do this in jQuery with an array range or with a pseudo selector (http://nthmaster.com/, kind of cool). Should be pretty easy!

For wrapping up #5737 , would we then want to gradually convert all pages' translation texts to the new system?

And then begin finding untranslated texts that can be added into the system? This would be a great task for GCI! cc @publiclab/reviewers @SidharthBansal @coderjolly

[jywarren]

Ah, i see, it's in Ruby, not JS. We could set an instance variable like @translations_count ||= 0; @translations_count += 1 and then skip any where it's >5?

plots2/app/helpers/application_helper.rb

Lines 140 to 151 in 547339f

	def translation(key, options = {})
	translated_string = t(key, options)
	options[:fallback] = false
	translated_string2 = t(key, options)
	if current_user&.has_tag('translation-helper') && translated_string2.include?("translation missing") && !translated_string.include?("<")
	%(<span>#{translated_string} <a href="https://www.transifex.com/publiclab/publiclaborg/translate/#de/$?q=text%3A#{translated_string}">
	<i data-toggle='tooltip' data-placement='top' title='Needs translation? Click to help translate this text.' style='position:relative; right:2px; color:#bbb; font-size: 15px;' class='fa fa-globe'></i></a>
	</span>)
	else
	translated_string
	end

[jywarren]

Hi @gauravano do you think this would work? It seems an easy addition and I'm happy to make it!