Improve language selection usability

[Lord-Grey]

Improve the language selection user experience according to UX best practices.

• User selects language in his/her local language representation
• User can change language with minimum number of clicks

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Other, please describe:

If changing the UI of web configuration, please provide the before/after screenshot:

Before

After

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing setups:

The PR fulfills these requirements:

• When resolving a specific issue, it's referenced in the PR's body (e.g. Fixes: #xxx[,#xxx], where "xxx" is the issue number)

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature
• Related documents have been updated (docs/docs/en)
• Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:
Addresses issue: #787

[hyperion-project]

Hello @Lord-Grey 👋

I'm your friendly neighborhood bot and would like to say thank you for
submitting a pull request to Hyperion!

So that you and other users can test your changes more quickly,
you can find your workflow artifacts here.

If you make changes to your PR, i create a new link to your workflow artifacts.

Best regards,
Hyperion-Project

[brindosch]

Thank you for this addition, because space is limitted at the top bar, i would keep it at least in the dropdown. (open on smartphone and you will see what i mean)

[Lord-Grey]

Thank you for this addition, because space is limitted at the top bar, i would keep it at least in the dropdown. (open on smartphone and you will see what i mean)

Yes, sure. I tested without multiple hyperion instances and it looked ok.
But, with additional instances the mobile display is too small... I agree.

[Lord-Grey]

@brindosch Done.
Edit: Need your help to get darkmode looking good. Hovering is black on black...

[hyperion-project]

Here is your new link to your workflow artifacts.

[Paulchen-Panther]

Can we still implement this somehow?
https://stackoverflow.com/a/50481999/12749851

The reason for this is this: https://prnt.sc/sqajsv

Many Thanks

[Lord-Grey]

I will have a look. Seems I need to test with fresh install. What is the envisioned default language, if one cannot be resolved? I would assume English. Having the default right should fix the issue.

[Paulchen-Panther]

Ich glaube es wird die Sprache des Browsers (OS) genommen!?!
@b1rdhous3 kann da mehr dazu sagen.
Oder mann müsste den Code durchsuchen.

edit: Nach Löschung der Cookies wird bei mir die deutsch Sprache verwendet. Angezeigt wird aber "Nothing selected"

edit2: Ich glaube die Sprache wird hier ausgewählt: https://github.com/hyperion-project/hyperion.ng/blob/master/assets/webconfig/js/settings.js#L30

edit3: sessionStorage: https://developer.mozilla.org/de/docs/Web/API/Window/sessionStorage

[brindosch]

Das translation handling wird von jquery.i18n verwaltet und wie @Paulchen-Panther schon festgestellt hat. Es gibt nicht viel code dazu :)
EN wird immer geladen wegen fallback wenn ein string fehlt. Per default steht die detection auf auto und nur wenn aktiv eingestellt wird vom Nutzer, ändert sich der string.
Der session storage findet keine Anwendung, ist der local Storage (Sonst wäre der Wert gelöscht nachdem das Fenster zu geht.)

Bei weiteren Fragen.. fragen :)

[Lord-Grey]

So jetzt sollte es funktionieren...

Logik ist:

1. Wenn eine Sprache gespeichert wurde, wird sie genommen.
2. Wenn keine Sprache gespeichert wurde,
   a. wird die Browsersprache genommen, wenn von hyperion unterstützt
   b. wird die Fallback-Sprache genommen, wenn die Browsersprache von hyperion nicht unterstützt wird
   c. wird der Default auf "Please select:" gesetzt (sollte eigentlich nicht vorkommen , da Fallback = Englisch ist

[Paulchen-Panther]

Funktioniert wunderbar. Vielen Dank für die Nachbesserung. 👍

[Lord-Grey]

Funktioniert wunderbar. Vielen Dank für die Nachbesserung. 👍

Und ich dachte erst, dass ist mal was für einen Abend....
Die Dinge werden immer größer als gedacht (wahrscheinlich wegen der notwendigen Lernkurve)...

[Paulchen-Panther]

Ja, das kenne ich. 🤣

[hyperion-project]

Here is your new link to your workflow artifacts.

[Lord-Grey]

@brindosch Thank you!

[hyperion-project]

Here is your new link to your workflow artifacts.

[Paulchen-Panther]

Ready to merge?

[Lord-Grey]

Ready to merge?

Yes