[Suggestion] Native code for language & theme menu

[SeNioR-]

Hi team. As IC5 moves towards native JS code, my suggestion for today is to use better code for the language and theme selection menu.

I implemented a native menu using the "form" and "select" elements and it works much better and faster than the built-in ones.

This is what it looks like on Android:

Here is the HTML code:

{{$languages = \IPS\Lang::getEnabledLanguages();}}
{{if \count( $languages ) > 1}}
<li>
<form action="{url="app=core&module=system&controller=language" noprotocol="true" csrf="true" seoTemplate="language"}" method="post">
<select title='{lang="language"}' name='id' onchange='this.form.submit()'>
{{foreach $languages as $id => $lang }}
<option value='{$id}' {{if \IPS\Member::loggedIn()->language()->id == $id || ( \IPS\Member::loggedIn()->language === 0 )}}selected disabled{{endif}}> {{if $lang->get__icon()}}<i class='{$lang->get__icon()}'></i> {{endif}}{$lang->title} {{if $lang->default}}{lang="default"}{{endif}}</option>
{{endforeach}}
</select>
<input type="hidden" name="ref" value="{expression="base64_encode( (string) request.url() )"}">
</form>
</li>
{{endif}}

and CSS fix for the Default IC4 theme:

html[dir="ltr"] .ipsApp #ipsLayout_footer > div > ul > li > form > select:not( [multiple] ) {
    border: none;
    background:none;
    padding: 5px;
    font-size: inherit;
    max-width: 90px;
}
html[dir="ltr"] .ipsApp #ipsLayout_footer > div > ul > li > form > select:not( [multiple] ):focus {width: auto;}

 

Let me know what you think about it 🙂

[Ehren]

Thanks for the suggestion! Dropdown menus will likely receive an overhaul in a future 5.x update, but a select menu is a nice suggestion for this area.

I'll keep it in mind for the future 🙂