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.