Add language picker to footer
This commit is contained in:
parent
4498ed002a
commit
5aeee0bc01
|
@ -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 => {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue