search

jamulussoftware / jamuluswebsite

This is the GitHub Pages repository for the Jamulus main website. For the jamulus application source code, please visit jamulussoftware/jamulus.
https://jamulus.io
GNU Lesser General Public License v2.1
16 stars 79 forks source link

Language selection dropdown #992

Open ignotus666 opened 2 weeks ago

ignotus666 commented 2 weeks ago

I had a go at creating a dropdown menu for choosing languages instead of the rather ugly horizontal list we currently have. After a number of failed attempts I thought I'd see if Chatgpt could be of any help - and after some back and forth I actually got it working. What do you think? lang_select_1 lang_select_2

ignotus666 commented 2 weeks ago

I think the red surrounding box and text when a language other than EN is selected isn't really needed, but I can't figure out how to get rid of it. I reckon this should be enough to draw users to click and look for their language (added a downward arrow):

lang_select_3

Or we could also do it like this (shows active language):

lang_select_4

henkdegroot commented 2 weeks ago

Perhaps worth adding a pre-selection of the expected language would be a nice addition. Believe to remember the red is coming from a small javascript which is part of footer

ignotus666 commented 2 weeks ago

Perhaps worth adding a pre-selection of the expected language would be a nice addition

Could you explain?

ignotus666 commented 2 weeks ago

I like this one (minus the red stuff):

lang_select_5

It's self-explanatory and displays the active language.

henkdegroot commented 2 weeks ago

Perhaps worth adding a pre-selection of the expected language would be a nice addition

Could you explain?

I meant that it would pre-select my language rather the just indicating my local may exist in the list

ignotus666 commented 2 weeks ago

I meant that it would pre-select my language rather the just indicating my local may exist in the list

So you mean auto-detect the user's OS/browser language?

ignotus666 commented 2 weeks ago

So you mean auto-detect the user's OS/browser language?

I have a version with this implemented. I also managed to get rid of the red box/message.

Here's the branch if anyone wants to try it out.

henkdegroot commented 2 weeks ago

So you mean auto-detect the user's OS/browser language?

Correct that is what I meant. As if it can be detected which language the user is most likely using, it would be nice to show the site in that language rather then show the English site and have the browser performing the translation, as most browser are offering to translate the site when it is not displayed in the users language and as a result a typical user may not make use of the translation performed by us.

ignotus666 commented 2 weeks ago

Ok, so auto-detection of language seems to be working correctly and I aligned the dropdown button to the right:

lang_select_6

pljones commented 2 weeks ago
henkdegroot commented 2 weeks ago

I can't wait to try this.....just a bit limited doing that at the moment due to holiday. Some things to consider. Is the text Lang really needed? As when the language is display, it would be obvious you can select a language and the Lang text might not have much meaning to a user of the website depending on the language ysed.

Would it be better to show the language name instead of the shortcode? I.e. English instead of en. And perhaps another enhancement, adding a flag icon? When a mobile device is used, just the flag icon can be used. Maybe that even works fine for the desktop site as well.

Good work on this....hope I can give this a test soon.

ignotus666 commented 2 weeks ago

is it possibly to ensure the popup is scrollable (to allow for landscape on phones), if it isn't already

Done.

is it possible to ensure consistent alignment (the selected language is left-indented - it looks wrong)

I did that so the currently selected language stands out more. But it can be aligned.

Is the text Lang really needed?

This is still a PoC, so we can discuss what's best to show there.

Would it be better to show the language name instead of the shortcode? I.e. English instead of en. And perhaps another enhancement, adding a flag icon?

The thing about these is that it adds a fair bit of complexity, particularly taking into account that adding languages is automated (and I'd like to keep it that way).

pljones commented 1 week ago

I did that so the currently selected language stands out more. But it can be aligned.

Maybe add an outline box with curved corners around the selected language, if the widget supports that? Anyway, I think the bold text is enough. (I'd omit the underline, too.)

henkdegroot commented 1 week ago

The thing about these is that it adds a fair bit of complexity, particularly taking into account that adding languages is automated (and I'd like to keep it that way).

Okay, guess the automatic add of a language can still work when using a language + "display name". Anyway can also be done later or not at all.

ignotus666 commented 1 week ago

Maybe add an outline box with curved corners around the selected language, if the widget supports that? Anyway, I think the bold text is enough. (I'd omit the underline, too.)

Hmm, style changes to the dropdown also affect the navigation menu and I'm having a hard time trying to separate them. I've never messed with css stuff and it's a bit overwhelming... Will come back to it at another time.

Okay, guess the automatic add of a language can still work when using a language + "display name". Anyway can also be done later or not at all.

I suppose when a language is added and we get the lang code from the issue title with a regex, we could also do the same for the full language name (requesting that it be included in the title) and store it somewhere to be retrieved for the dropdown.

ignotus666 commented 1 week ago

@pljones what about this?:

lang_select_1

ignotus666 commented 1 week ago

Thinking more about displaying the full language name - I don't think it'll work, for aesthetic reasons. For some languages, particularly those with more than one variant, we'd end up with a massive button to display all the text, e.g. "Português (Portugal)". Once you try to abbreviate that, you might as well just stay with what we already have.

Oh, and another thing - it's possible to sort the languages alphabetically. Should we keep English at the top always (and sort the rest), or insert it at its corresponding place? I think I prefer the latter, but whatever.

henkdegroot commented 1 week ago

Guess it depends what you consider to be massive. Here an example from another site: Screenshot_20240616-224840.png

Keeping the current letter codes works as well for me.

For sorting, think alpha sort would be good but no real preference.

ignotus666 commented 1 week ago

True.

How about this instead of "lang"?

lang-select_2

henkdegroot commented 1 week ago

First time I have seen this "icon" being used. Looks good to me and is universal for all languages.

ignotus666 commented 1 week ago

It's quite commonly used. Wikipedia uses it for example.

ignotus666 commented 1 week ago

Final (or close enough) version:

lang-select_3

Further suggestions are welcome.

henkdegroot commented 1 week ago

@ignotus666 do you have a screenshot as well for the mobile version?

ignotus666 commented 1 week ago

Here you go:

mobile_1

mobile_2

gilgongo commented 1 week ago

This will be so much better! 🥇

Might a later version use flags?

image

Always a bit iffy with things like EN and some others I guess...

ignotus666 commented 1 week ago

I think the flag thing is a bit tricky here. My understanding is that the app uses a Qt module or whatever you call it that has lists of languages and flags that you can draw from. Here we'd have to create that whole thing ourselves, I suppose using arrays to store all languages and flags... theoretically possible I guess but a fair amount of work. Or maybe not, there might be an easier way but I'm almost out of my depth with what I have... I'll look into displaying the full language name though for now (in each language if that makes sense), which I think is more doable.

ignotus666 commented 1 week ago

There you go:

lang-select_1

Not 100% sure I got all the languages right, but that wasn't too difficult. Next I'll have to look at how to automate future language additions, but it should certainly be doable.

ignotus666 commented 1 week ago

The scripts to add languages automatically and display the full name in the dropdown have been updated and tested to work. I'll open a PR shortly so the changes can be reviewed in case I missed something.

Edit: @gilgongo I've just realised that a PR with this is going to conflict with a number of PRs that are waiting to be merged, in particular #988. I've completely re-done langselect.html and I don't really know how to integrate those changes. Then, in #990 there are changes to _config.yml and add-lang.yml that might be easier if they go in with my PR for this, as I've edited those files a fair amount. The rest of that PR should be fine.

Not sure what the best course of action is.

gilgongo commented 1 week ago

@ignotus666 Ah yes I did wonder about that. Seeing as my changes are pretty simple, it would be better to incorporate them in with your PR as they're all related.

I can put my PRs into draft, then let you do yours and we can have a look at integrating them at that point? My changes to langselect.html are just some if/then stuff.