diff --git a/src/components/Settings/LanguageSwitcher.vue b/src/components/Settings/LanguageSwitcher.vue index ea512fbd..e14e3238 100644 --- a/src/components/Settings/LanguageSwitcher.vue +++ b/src/components/Settings/LanguageSwitcher.vue @@ -5,16 +5,18 @@ -

{{ language.flag }} {{ language.name }}

+

+ 🌐 {{ language.flag }} {{ language.name }} +

There are not currently any additional languages supported, but stay tuned as more are on their way! @@ -37,18 +39,37 @@ export default { }, data() { return { - availibleLanguages: languages, - language: '', - modalName: modalNames.LANG_SWITCHER, + language: this.getCurrentLanguage(), // The currently selected language + modalName: modalNames.LANG_SWITCHER, // Key for modal }; }, + computed: { + /* Return the array of language objects, plus a friends name */ + languageList: () => languages.map((lang) => { + const newLang = lang; + newLang.friendlyName = `${lang.flag} ${lang.name}`; + return newLang; + }), + }, methods: { + /* Check if language is supported */ + checkLocale(selectedLanguage) { + if (!selectedLanguage || !selectedLanguage.code) return false; + const i18nLocales = this.$i18n.availableLocales; + return i18nLocales.includes(selectedLanguage.code); + }, + /* Apply language locally */ + applyLanguageLocally() { + if (this.language && this.language.code) { + this.$i18n.locale = this.language.code; + } + }, /* Save language to local storage, show success msg and close modal */ saveLanguage() { const selectedLanguage = this.language; if (this.checkLocale(selectedLanguage)) { localStorage.setItem(localStorageKeys.LANGUAGE, selectedLanguage.code); - this.setLangLocally(); + this.applyLanguageLocally(); const successMsg = `${selectedLanguage.flag} ` + `${this.$t('language-switcher.success-msg')} ${selectedLanguage.name}`; this.$toasted.show(successMsg, { className: 'toast-success' }); @@ -57,17 +78,11 @@ export default { this.$toasted.show('Unable to update language', { className: 'toast-error' }); } }, - /* Check language is supported, before saving */ - checkLocale(selectedLanguage) { - if (!selectedLanguage || !selectedLanguage.code) return false; - const i18nLocales = this.$i18n.availableLocales; - return i18nLocales.includes(selectedLanguage.code); - }, - /* Apply language locally */ - setLangLocally() { - if (this.language && this.language.code) { - this.$i18n.locale = this.language.code; - } + /* Gets the users current language from local storage */ + getCurrentLanguage() { + const getLanguageFromIso = (iso) => languages.find((lang) => lang.code === iso); + const current = localStorage[localStorageKeys.LANGUAGE] || this.config.appConfig.language; + return getLanguageFromIso(current); }, }, }; @@ -81,29 +96,43 @@ export default { padding: 1rem; background: var(--config-settings-background); color: var(--config-settings-color); - h3.title { text-align: center; } p.intro { margin: 0; } - button.save-button { margin: 0 auto; width: 100%; } - p.sad-times { color: var(--warning); text-align: center; } - - .language-dropdown { + p.current-lang { + color: var(--success); + opacity: var(--dimming-factor); + text-align: center; + position: absolute; margin: 1rem auto; - div.vs__dropdown-toggle { - padding: 0.2rem 0; - } + cursor: default; + width: 100%; + bottom: 0; + } +} + + + +