Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Basic localization support #972

Draft
wants to merge 53 commits into
base: master
Choose a base branch
from

Conversation

woutersamaey
Copy link
Contributor

@woutersamaey woutersamaey commented Aug 17, 2019

@NicolasDorier please review the code in this PR as a basis for localization.

It is fully working with:

  • Language switcher put in an easily visible place
  • Locale stored in cookie as per .NET's best-practise, remembers for 1 year
  • Fully compatible with .NET's IStringLocalizer (so no parallel solution - we can use native stuff)
  • Data is stored in JSON files in a "Resources" folder, compatible with the Transiflex format
  • Currently I have translated the main menu and left sidebar menus for the Dutch language so you can test and see content change
  • English content is not affected as we discussed.
  • All translation is done through 2 TagHelpers: 1 is for HTML content, and 1 is for translating HTML attributes like "title" and "alt".

Todo's are:

  • Automatically detect the user's language based on the Accept request header as a last resort (if he doesn't have the cookie & no language stored in his user profile)
  • Automatically append missing translations to a en.json file during development, so the file can be easily uploaded to Transiflex without needing to manually copy-paste keys. This is a pain.
  • Automatically detect available languages (which JSON files are in the Resources dir?) - should be relatively easy
  • More translations need to be added - also easy
  • No translations with parameters encountered yet - not sure what to expect here
  • No number formatting encountered yet - not sure what to expect here
  • Text right-to-left support (like for Arabic) - appears not to be supported in Bootstrap HTML. Unofficial workarounds exist, but not sure which is best
  • Sending localized emails in the user's language
  • Translating form validation messages

Some things I'd like some help with are:

  • Store the user's "preferred locale" in his profile. Would be essential for sending emails to the user in his language. Default to the language the user was using when creating his account or English for already existing users.
  • I'm not 100% sure the translations are kept in memory and the JSON file isn't re-read. Maybe you could help me find out? There is a flag to "reload on change" and that is set to "true", so maybe it's decent. I dunno.

I'm planning to address all of these TODOs, but would like to get your thought so far.

I don't expect you to approve the PR in this current state, though you probably can!! After all it is functional, just not 100% translated yet.

@NicolasDorier
Copy link
Member

awesome work. reviewing

@NicolasDorier
Copy link
Member

I think you should add a selenium test. This is quite easy to do and will properly test it works.

@NicolasDorier
Copy link
Member

NicolasDorier commented Aug 18, 2019

This is dope. So yes, only thing missing is the selenium test that will ensure your tagHelpers and the
AddDataAnnotationsLocalization works as desired.

@woutersamaey
Copy link
Contributor Author

woutersamaey commented Aug 18, 2019

@NicolasDorier I have just committed the Selenium test but cannot run it myself. The selenium tests only run on Chrome 74, but I have 76. Not sure how to handle this.
Can you check again please?

I also did a major performance improvement: Previously each translate call would re-create the translator and read the JSON file again and again, causing very slow page load. No longer an issue.

@NicolasDorier
Copy link
Member

@woutersamaey that's strange, you should be able to run the tests. I will check.

@NicolasDorier
Copy link
Member

You also need to fix the warnings by the way.

@woutersamaey
Copy link
Contributor Author

woutersamaey commented Aug 19, 2019

@NicolasDorier I'm seeing a lot of Address not available messages in CircleCI, but I don't think this has anything to do with this PR, am I right?

The warnings have been fixed.

The Selenium test still fails. Not sure why.
Since I can't debug (ChromeDriver version issue) it's hard to proceed from here. Any ideas so far?

@NicolasDorier
Copy link
Member

Ignore Address not available.

@woutersamaey
Copy link
Contributor Author

@NicolasDorier Where do you suggest I put it?

I can put it in the footer if you prefer that, but in that case I'll make sure to add automatic language detection based on the Accept header since the switcher won't be as visible as below the fold for most users.

@woutersamaey
Copy link
Contributor Author

Pulled the code and it is working! Tnx for your help!

@NicolasDorier
Copy link
Member

NicolasDorier commented Aug 20, 2019

@woutersamaey idea: (fa-globe)

image

@woutersamaey
Copy link
Contributor Author

woutersamaey commented Aug 20, 2019

@NicolasDorier I like the minimalistic presentation, but don't think the globe is well recognized for translation.

Why not keep the dropdown but with:

  • The language code EN / NL as labels
  • Use CSS to make the <select> blend with the background so you can only see the 2 letter label (no white background, no border, uppercase)

I prefer to keep the dropdown as it triggers a form HTTP POST + it is convenient on mobile devices thanks to native input controls.

Having a traditional menu dropdown or a pop-up modal would be a problem once we get like 40 languages.

If you think changing the CSS is sufficient, I would prefer to keep the languages names in full form and not 2 letter codes. Maybe add a separator on the left, that could also help set it aside from the main menu.

What do you think?

@NicolasDorier
Copy link
Member

I am not good in html/css but I think that you can make the globe (or any other logo you like in font awesome) show a dropdown when clicked without javascript.

Having a traditional menu dropdown or a pop-up modal would be a problem once we get like 40 languages.

We'll see what do to when we get to this point. Though I don't think this is problematic.

If you think changing the CSS is sufficient, I would prefer to keep the languages names in full form and not 2 letter codes. Maybe add a separator on the left, that could also help set it aside from the main menu.

Whatever, but it should not take too much screen space as it is rare people use it once they have set their location. Another idea is to put this in the User profile.

@NicolasDorier
Copy link
Member

You can browse icons on https://fontawesome.com/icons

@NicolasDorier
Copy link
Member

Maybe in the footer it can also work.

@woutersamaey
Copy link
Contributor Author

@NicolasDorier I'll do a combination of what you suggested.

Full dropdown in footer (best to keep this for older people) + globe icon on top.

You're right about the dropdown without JavaScript and I am familiar with FontAwesome. This is kinda my thing 👍

Copy link
Member

@Kukks Kukks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are a lot of changes in master causing a big diff and making it hard to review, can you rebase?

@@ -119,7 +119,7 @@ services:
- "bitcoin_datadir:/data"

customer_lightningd:
image: btcpayserver/lightning:v0.7.1-dev
image: btcpayserver/lightning:v0.7.2-dev
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you need to rebase

@NicolasDorier
Copy link
Member

@woutersamaey please rebase. We will use the current dropbox only in regtest (hidding it on mainnet) until you can replace it with something better.

@woutersamaey
Copy link
Contributor Author

Will do. Please give me 1-2 days. My holiday is over and I'm back at work so busier again :(

@woutersamaey
Copy link
Contributor Author

Unfortunately I'm not finding the time to continue work on this. I got pretty far, but lacking the time to finish.
If someone could help out to push this though, I'd be very grateful.
I'm free to do a call if it helps.

@Kukks Kukks self-assigned this Nov 7, 2019
@Kukks
Copy link
Member

Kukks commented Nov 7, 2019

Will take it upon myself to finish this as soon as I'm free

@pavlenex pavlenex added this to Review in progress in BTCPay Server Project Nov 10, 2019
@rockstardev rockstardev assigned rockstardev and unassigned Kukks Jan 21, 2020
@rockstardev
Copy link
Member

I'll take this over... will close it temporarily as we clean up our PRs (gotta reach 0 @NicolasDorier). Will rebase and merge existing effort as soon as I have time.

BTCPay Server Project automation moved this from Review in progress to Done Jan 21, 2020
@Kukks Kukks reopened this Jul 8, 2021
@Kukks
Copy link
Member

Kukks commented Jul 8, 2021

Reopening to reconsider

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

None yet

4 participants