mirror of
				https://gitlab.com/Alamantus/Readlebee.git
				synced 2025-11-04 10:17:03 +01:00 
			
		
		
		
	Add language picker to footer
This commit is contained in:
		
							parent
							
								
									4498ed002a
								
							
						
					
					
						commit
						5aeee0bc01
					
				
					 4 changed files with 32 additions and 11 deletions
				
			
		| 
						 | 
					@ -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…
	
	Add table
		
		Reference in a new issue