Add language picker to footer

This commit is contained in:
Robbie Antenesse 2019-10-17 22:15:31 -06:00
parent 4498ed002a
commit 5aeee0bc01
4 changed files with 32 additions and 11 deletions

View File

@ -14,7 +14,7 @@ export const appListeners = (app, state, emitter) => {
emitter.on('set-language', newLanguage => { emitter.on('set-language', newLanguage => {
app.setSettingsItem('lang', newLanguage); app.setSettingsItem('lang', newLanguage);
state.language = newLanguage; state.language = newLanguage;
emitter.emit('render', () => { }); emitter.emit('render');
}); });
app.checkIfLoggedIn(state).then(isLoggedIn => { app.checkIfLoggedIn(state).then(isLoggedIn => {

View File

@ -7,7 +7,11 @@ export class I18n {
default: en, default: en,
en, en,
}; };
this.language = appState.language; this.appState = appState;
}
get language () {
return this.appState.language;
} }
translate (section, phrase) { translate (section, phrase) {

View File

@ -8,7 +8,8 @@
"menu_account": "My Profile", "menu_account": "My Profile",
"menu_logout": "Log Out", "menu_logout": "Log Out",
"footer_repo": "Repo", "footer_repo": "Repo",
"footer_chat": "Chat" "footer_chat": "Chat",
"change_language": "Change Language"
}, },
"home": { "home": {
"logged_out_subtitle": "All the Book Buzz in Once Place", "logged_out_subtitle": "All the Book Buzz in Once Place",

View File

@ -40,14 +40,30 @@ export const globalView = (state, emit, view) => {
</main> </main>
<footer> <footer>
<nav> <nav class="flex one">
<div class="links"> <div class="two-third-600">
<a href="https://gitlab.com/Alamantus/Readlebee" class="pseudo button"> <div class="links">
${i18n.__('global.footer_repo')} <a href="https://gitlab.com/Alamantus/Readlebee" class="pseudo button">
</a> ${i18n.__('global.footer_repo')}
<a href="https://gitter.im/Readlebee/community" class="pseudo button"> </a>
${i18n.__('global.footer_chat')} <a href="https://gitter.im/Readlebee/community" class="pseudo button">
</a> ${i18n.__('global.footer_chat')}
</a>
</div>
</div>
<div class="third-600">
<label class="flex">
<span class="third">${i18n.__('global.change_language')}:</span>
<select class="two-third" onchange=${e => emit('set-language', e.target.value)}>
${Object.keys(i18n.availableLanguages).map(languageKey => {
if (languageKey === 'default') return null;
const language = i18n.availableLanguages[languageKey];
return html`<option value=${language.locale} ${state.language === language.locale ? 'selected' : null}>
${language.name}
</option>`;
})}
</select>
</label>
</div> </div>
</nav> </nav>
</footer> </footer>