Internationalization : UI toggle for language selection

[JayanthyChengan]

Have to figure out where to place the toggle button in the main page?

[djbrooke]

Thanks @JayanthyChengan for this (and for all the internationalization PRs!). We discussed this briefly in standup today, and since this is getting into UI/UX land, I'll tag @TaniaSchlatter.

Can you let us know what you're thinking?

[JayanthyChengan]

@djbrooke : Thanks for involving Tania for UI design.

• Would like to figure out from Harvard team where to place the toggle button on the main page ?
  • Incorporate code changes to fetch language from the user selection and choose corresponding bundle properties

[TaniaSchlatter]

Hi @JayanthyChengan and @djbrooke, see the image attached for button appearance and placement. I suggest placement in the navbar using UL Dropdown, even if there are just two languages. Reference for the mockup is here: https://bootsnipp.com/snippets/mprMM Also tagging @mheppler

[JayanthyChengan]

@djbrooke @scolapasta : To get the dropdown list of languages dynamically, planning to have a database table for languages and pull the values from it. So, we can use CURL commands to add new languages and fetch corresponding bundle.properties in the application. Let me know, if there is any other better approach to tackle this.

To establish the locale into the web application, I will follow https://docs.oracle.com/javaee/6/tutorial/doc/bnaxw.html

Please confirm with your thoughts. Thanks

[amberleahey]

Just to follow up, we are starting to develop the UI toggle to support testing the new internationalization code and eventual use of DV in different languages. The mock-ups and database design considerations are helpful.

After some discussion at SP, we are considering placing the button far right, after 'Login'. Any objections? I've provided some additional examples.

Without opening too much of a debate around languages and flags, is this required for the toggle?

[amberleahey]

same additional input from google https://support.google.com/webmasters/answer/182192?hl=en

[djbrooke]

@amberleahey @JayanthyChengan we missed this in the all the OR2018 and DCM excitement. We'll have the design team take a quick look and provide some feedback.

[TaniaSchlatter]

Hi @amberleahey, the rationale for the suggested language toggle was concern about length and shifting placement of items in the navigation bar. Placing the toggle to the right of the other items would cause placement to shift with the varying length of user names. I liked that the suggested toggle was short, clear, and consistent in length. What are the SP team's concerns? Maybe asking what is preferable in the alternative examples is a better way to limit debate? :)

Thanks for posting the google link. It has good a good summary of things to keep in mind. We will need to discuss with @mheppler and @scolapasta.

[mheppler]

@amberleahey @JayanthyChengan After reviewing the UI options with @TaniaSchlatter and discussing in a little more detail with a our visiting German developer, I have some recommendations -- and a mockup!

• Navbar link should contain the language name (e.g. "English") as opposed to "Language", as well as an icon of some sort, in order to ease the discovery of where to go to change the language (the "A"/font icon I used from Bootstrap is not the best, we could use another icon, the "language" icon used in one of the screenshots above is from FontAwesome, which we can get from PrimeFaces)
• Username navbar dropdown link should remain in the far right, with the language dropdown just to it's left
• Selected language should be highlighted in the dropdown, I've also included a checkmark icon in order to aid visual recognition outside of words
• Language options in the dropdown should be language names listed in their language, as one of the screenshot examples above shows

We're happy to discuss further and research other options. Let us know if you have any feedback.

[amberleahey]

Makes sense, we were a bit worried about disruption in the nav bar, but this looks good! Thanks for the tips and mock-up.

[pdurbin]

To get the dropdown list of languages dynamically, planning to have a database table for languages and pull the values from it.

@JayanthyChengan I don't see any objections above and this is fine with me.

[JayanthyChengan]

@pdurbin

• Instead of Database table, languages were populated from json file src/main/webapp/resources/lang/languages.json in src/main/java/edu/harvard/iq/dataverse/DataverseLocaleBean.java

@mheppler

• I submitted pull request, please review. I was not successful when I tried to implement "fontAwesome" and "Checkmark" icon, Can I get help from your team to implement them ?

[mheppler]

Cleaned up the alignment of the language selectOneMenu form input in the navbar, but need to look into responsive width issues. Will have a commit ready when I can get that resolved.

[JayanthyChengan]

Thanks @mheppler

[mheppler]

With the help of @scolapasta (java) and @pdurbin (git), I was able to get the language dropdown for the navbar converted over from a selectOneMenu form component, to a list of links, in the Bootstrap styling we had originally mocked up.

I created a new branch, and pull request, and linked it to this issue. Will move it to Code Review now, so that @scolapasta can revisit some of the backing bean logic he helped "get working". I will also need to revisit some of the inline CSS I quickly added in order to get looking a lil more Bootstrappy.

[mheppler]

NOTE: This branch will most likely need to be updated with develop, as well as have some documentation added, before it is ready for QA. I can take care of those next week, either as part of the revisions from the review, or before the review gets started. Just wanted to get this code into GitHub while it was still warm and fresh! 🍰 😎

[mheppler]

Also, created a new issue, Status Message - Improve UI #4842, to give the new navbar language dropdown a lil more real estate to work with.

[pdurbin]

@oscardssmith this issue is in code review but there are two open pull requests associated with it at https://waffle.io/IQSS/dataverse . Can you please close the pull request that we are not supposed to look at? Thanks.

[oscardssmith]

closed the old one.

[pdurbin]

@oscardssmith thanks. I took a quick look at pull request #4841. Please document the new database setting.

[oscardssmith]

will do.

[pdurbin]

@oscardssmith thanks for documenting the new setting in 2b67476

Chinese isn't in the example but it seems to work too... sort of... the header is translated at least:

curl http://localhost:8080/api/admin/settings/:Languages -X PUT -d '[{ "locale":"en", "title":"English"}, { "locale":"fr", "title":"Français"}, { "locale":"zh_CN", "title":"Chinese"}]

[benjamin-martinez]

@JayanthyChengan

The toggle button now works and switching between languages is possible. It also works when you change your browser's language settings to a different language. However there is a slight bug that we are having issues dealing with. If one were to change their entire OS to a language other than English, the toggle button does nothing except for changing the text of the button.

From our end we will try to address this, but for now we think that this is in good shape to be merged. You may want to test out the most recent branch to verify if it works to your liking. You also may want to see if you can replicate the same bug mentioned above. Thank you for your patience on this and for working to get this moving along.

[JayanthyChengan]

@benjamin-martinez and all: Thanks for working on this and getting it ready for testing. I will update the findings from our testing. Thanks.

[4tikhonov]

@JayanthyChengan, we're very interested to try this new switch languages functionality in DataverseEU project. At the moment we have Bundle.properties for French, German, Slovenian, Swedish, Ukrainian and Spanish languages, how can we connect to web interface to see all available languages there?

[pdurbin]

@4tikhonov you should check out the new :Languages database setting at https://github.com/IQSS/dataverse/blob/79c6dc3cd8dd1c88e00b441c37f95e26454085af/doc/sphinx-guides/source/installation/config.rst#languages and keep an eye on pull request #5023 for how we want to try keeping the bundle files outside the main app in the future.

[amberleahey]

I'll post something about this upcoming DV release and community objectives around collecting additional languages and the maintenance of them (to the Google Group). Thanks @4tikhonov for those additional language files they will be great for testing. We don't have a public DV instance w/this code accessible at the moment, but we will work on that with the Harvard team.

[pdurbin]

@4tikhonov here's a screenshot of how the language toggle looks on https://dev1.dataverse.org

@amberleahey I'm looking forward to your write up! Thanks!

[4tikhonov]

Phil, looks great! Is it possible to get different languages on different subdomains/paths, for example, fr.dataverse.org or dataverse.org/fr for French?

[pdurbin]

@4tikhonov no, I don't think so. If this is something you want or need, please open an issue for it.

[4tikhonov]

This is what we're implementing with running different containers for all languages. But if there is possibility to get it as a part of core functionality it would be great.

[4tikhonov]

Great, I have another question then about metadata schema: is it also already translated to French if you'll switch to it?

[amberleahey]

Update from the community call today, many people require having Dataverse in a specific language locale e.g. EN-CA, FR-FR, etc., and to be able to differentiate this in the UI toggle. Can we revisit the design of the UI toggle to incorporate these country/locales codes? Someone mentioned using ISO country and language codes or some combination of plain language and code might be best. see: https://docs.oracle.com/cd/E13214_01/wli/docs92/xref/xqisocodes.html as example of codes to combine...

[pdurbin]

@amberleahey we're always open to revisiting anything but can you please create a new GitHub issue for the language toggle? This closed issue represents the work that was done in pull request #4841 for the next version of Dataverse (the current version is 4.9.2). Thanks!

[pdurbin]

Let's continue the conversation at #5046 (thanks for creating that issue, @amberleahey !).