From f9c4eda5e7338d3ed39417d6cf2b6077facb1338 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Tue, 8 Feb 2022 13:44:17 +0100 Subject: [PATCH] popup to display lang selection --- src/app/core/services/language.service.ts | 4 +- src/app/core/services/storage.service.ts | 2 +- .../stepper/stepper.component.html | 11 +-- .../language-selector.component.html | 80 ++++++++++++++----- .../language-selector.component.scss | 12 +++ .../language-selector.component.ts | 43 ++++++++-- src/app/shared/shared.module.ts | 3 +- src/assets/i18n/fr.json | 9 ++- 8 files changed, 127 insertions(+), 37 deletions(-) diff --git a/src/app/core/services/language.service.ts b/src/app/core/services/language.service.ts index 51ee1841..0b3b2d4c 100644 --- a/src/app/core/services/language.service.ts +++ b/src/app/core/services/language.service.ts @@ -14,8 +14,8 @@ export class LanguageService { return this.translate.currentLang as LanguageEnum; } - public setLanguage(language: LanguageEnum): void { - this.translate.use(language.toString().toLowerCase()); + public setLanguage(language: string): void { + this.translate.use(language); } public getAvailableLanguages(): string[] { diff --git a/src/app/core/services/storage.service.ts b/src/app/core/services/storage.service.ts index 9c7d3bff..6858e0ae 100644 --- a/src/app/core/services/storage.service.ts +++ b/src/app/core/services/storage.service.ts @@ -28,7 +28,7 @@ export class StorageService { public theme: Theme; @LocalStorage() - public language: LanguageEnum; + public language: string; @LocalStorage() public userPolls: Poll[] = []; diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html index 34ef5f8a..c95d89fb 100644 --- a/src/app/features/administration/stepper/stepper.component.html +++ b/src/app/features/administration/stepper/stepper.component.html @@ -130,15 +130,12 @@
- - +
diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.html b/src/app/shared/components/selectors/language-selector/language-selector.component.html index c4008c44..46161a42 100644 --- a/src/app/shared/components/selectors/language-selector/language-selector.component.html +++ b/src/app/shared/components/selectors/language-selector/language-selector.component.html @@ -1,27 +1,67 @@
- -
- - -
+ {{ language }} - + {{ 'LANGUAGES.' + language.toUpperCase() | translate }} + + + + + + +
diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.scss b/src/app/shared/components/selectors/language-selector/language-selector.component.scss index 505c074b..075a64e3 100644 --- a/src/app/shared/components/selectors/language-selector/language-selector.component.scss +++ b/src/app/shared/components/selectors/language-selector/language-selector.component.scss @@ -4,6 +4,10 @@ background: white; max-width: 15em; width: 15em !important; + .top { + clear: both; + width: 100%; + } } .language-selector-container { @@ -16,6 +20,14 @@ color: $primary-color; } } +.lang-element { + float: left; + margin: 0.5em; + min-width: 11em; +} +.is-current { + font-weight: bold; +} .lang-button { color: $secondary_color; border: none; diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.ts b/src/app/shared/components/selectors/language-selector/language-selector.component.ts index 4a4c86a9..5b9b4a98 100644 --- a/src/app/shared/components/selectors/language-selector/language-selector.component.ts +++ b/src/app/shared/components/selectors/language-selector/language-selector.component.ts @@ -1,8 +1,9 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Inject, OnInit } from '@angular/core'; import { LanguageEnum } from '../../../../core/enums/language.enum'; import { LanguageService } from '../../../../core/services/language.service'; import { StorageService } from '../../../../core/services/storage.service'; +import { DOCUMENT } from '@angular/common'; @Component({ selector: 'app-language-selector', @@ -10,11 +11,17 @@ import { StorageService } from '../../../../core/services/storage.service'; styleUrls: ['./language-selector.component.scss'], }) export class LanguageSelectorComponent implements OnInit { - public currentLang: LanguageEnum; + public currentLang: string; public availableLanguages: any = ['FR', 'EN', 'ES']; language: string; + language_to_apply: string; + display_lang_dialog: any = true; - constructor(private languageService: LanguageService, private storageService: StorageService) {} + constructor( + private languageService: LanguageService, + private storageService: StorageService, + @Inject(DOCUMENT) private document: any + ) {} ngOnInit(): void { this.availableLanguages = this.languageService.getAvailableLanguages(); @@ -24,11 +31,20 @@ export class LanguageSelectorComponent implements OnInit { } } - setLang(): void { - this.languageService.setLanguage(this.currentLang); + setLang(newlang: string = 'fr'): void { + this.currentLang = newlang; + this.languageService.setLanguage(newlang); this.storageService.language = this.currentLang; } + focusOnCancelButton() { + this.display_lang_dialog = false; + let buttonClose = this.document.querySelector('#display_cancel_popup_button'); + if (buttonClose) { + buttonClose.focus(); + } + } + nextLang(): void { const index = this.availableLanguages.indexOf(this.currentLang); @@ -43,4 +59,21 @@ export class LanguageSelectorComponent implements OnInit { this.setLang(); } } + + applyLangAndClosePopup() { + this.setLang(this.language_to_apply); + this.display_lang_dialog = false; + let elem = this.document.querySelector('#lang_button_popup'); + if (elem) { + elem.focus(); + } + } + + openDialogLang() { + this.display_lang_dialog = true; + let elem = this.document.querySelector('#lang_button_popup'); + if (elem) { + elem.focus(); + } + } } diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 14723f30..0aea0b7c 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -33,6 +33,7 @@ import { ConfirmationService } from 'primeng/api'; import { AboutComponent } from '../features/shared/components/ui/static-pages/about/about.component'; import { RouterModule } from '@angular/router'; import { ChoiceButtonDinumComponent } from '../features/shared/components/choice-button-dinum/choice-button-dinum.component'; +import { DialogModule } from 'primeng/dialog'; const COMPONENTS = [ AboutComponent, @@ -70,7 +71,7 @@ const MATERIAL_MODULES = [ @NgModule({ declarations: COMPONENTS, - imports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ConfirmDialogModule, RouterModule], + imports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ConfirmDialogModule, RouterModule, DialogModule], exports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ...COMPONENTS], providers: [ConfirmationService], }) diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index dd61a2fa..22f8b1d7 100755 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -63,9 +63,16 @@ "description_constraint": "caractères maximum" }, "popup": { + "languages": { + "title": "Choisissez votre langue", + "validate": "Enregistrer" + }, + "cancel": { "title": "Vous allez annuler votre sondage", - "main": "Si vous annulez votre sondage vous perdrez toutes les informations saisies jusqu'à maintenant. Souhaitez-vous vraiment annuler ?" + "main": "Si vous annulez votre sondage vous perdrez toutes les informations saisies jusqu'à maintenant. Souhaitez-vous vraiment annuler ?", + "validate": "Oui, quitter", + "reject": "Non" } }, "dates": {