From 0e6dfc10fb5f5c968e9e51fc267cb03ecb247198 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Fri, 10 Sep 2021 23:47:06 +0100 Subject: [PATCH 1/9] :lipstick: Increase size of language switcher modal --- src/components/Settings/ConfigLauncher.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue index 8e3bbd2311..c47f19315b 100644 --- a/src/components/Settings/ConfigLauncher.vue +++ b/src/components/Settings/ConfigLauncher.vue @@ -17,7 +17,7 @@ + :resizable="true" width="35%" height="50%"> From fb0489ff2e90f56cb0cb12aede6acfd778be7fa6 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Fri, 10 Sep 2021 23:48:08 +0100 Subject: [PATCH 2/9] :iphone: Improved display for smaller screens --- src/components/Configuration/ConfigContainer.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue index d1ebbd425e..782cc25615 100644 --- a/src/components/Configuration/ConfigContainer.vue +++ b/src/components/Configuration/ConfigContainer.vue @@ -290,10 +290,10 @@ div.code-container { display: flex; flex-direction: column; background: var(--config-settings-background); - height: calc(100% - 4rem); + height: calc(100% - 2rem); width: fit-content; margin: 0 auto; - padding: 2rem 1rem; + padding: 2rem 1rem 0; h2 { margin: 0 auto 1rem auto; color: var(--config-settings-color); From e176b4bf7191bf50e1cc394b349d78d880f43687 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Fri, 10 Sep 2021 23:50:32 +0100 Subject: [PATCH 3/9] :coffin: Remove lang from accumulator --- src/utils/ConfigAccumalator.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/utils/ConfigAccumalator.js b/src/utils/ConfigAccumalator.js index 2edae611a8..594cda79d3 100644 --- a/src/utils/ConfigAccumalator.js +++ b/src/utils/ConfigAccumalator.js @@ -11,7 +11,7 @@ import { pageInfo as defaultPageInfo, iconSize as defaultIconSize, layout as defaultLayout, - language as defaultLanguage, + // language as defaultLanguage, } from '@/utils/defaults'; import conf from '../../public/conf.yml'; @@ -38,8 +38,6 @@ export default class ConfigAccumulator { || appConfigFile.layout || defaultLayout; usersAppConfig.iconSize = localStorage[localStorageKeys.ICON_SIZE] || appConfigFile.iconSize || defaultIconSize; - usersAppConfig.language = localStorage[localStorageKeys.LANGUAGE] - || appConfigFile.language || defaultLanguage; // Don't let users modify users locally if (appConfigFile.auth) usersAppConfig.auth = appConfigFile.auth; // All done, return final appConfig object From e7fb8e2d01f372cf1adf5fdd982a5e218880a5a9 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Fri, 10 Sep 2021 23:51:21 +0100 Subject: [PATCH 4/9] :lipstick: Nicer design for language swtitcher --- src/components/Settings/LanguageSwitcher.vue | 83 +++++++++++++------- 1 file changed, 56 insertions(+), 27 deletions(-) diff --git a/src/components/Settings/LanguageSwitcher.vue b/src/components/Settings/LanguageSwitcher.vue index ea512fbd0d..e14e3238ac 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; + } +} + + + +