popup to display lang selection

This commit is contained in:
Tykayn 2022-02-08 13:44:17 +01:00 committed by tykayn
parent 29effc4f09
commit f9c4eda5e7
8 changed files with 127 additions and 37 deletions

View File

@ -14,8 +14,8 @@ export class LanguageService {
return this.translate.currentLang as LanguageEnum; return this.translate.currentLang as LanguageEnum;
} }
public setLanguage(language: LanguageEnum): void { public setLanguage(language: string): void {
this.translate.use(language.toString().toLowerCase()); this.translate.use(language);
} }
public getAvailableLanguages(): string[] { public getAvailableLanguages(): string[] {

View File

@ -28,7 +28,7 @@ export class StorageService {
public theme: Theme; public theme: Theme;
@LocalStorage() @LocalStorage()
public language: LanguageEnum; public language: string;
@LocalStorage() @LocalStorage()
public userPolls: Poll[] = []; public userPolls: Poll[] = [];

View File

@ -130,15 +130,12 @@
<ng-template pTemplate="footer"> <ng-template pTemplate="footer">
<div class="columns"> <div class="columns">
<div class="column has-no-padding"> <div class="column has-no-padding">
<button <button class="button cancel-button-confirm is-outlined" (click)="focusOnCancelButton()">
class="button is-primary is-fullwidth cancel-button-reject-bottom pull-right"
(click)="goToHome()"
>
{{ 'popup.cancel.validate' | translate }}
</button>
<button class="button cancel-button-confirm is-outlined pull-right" (click)="focusOnCancelButton()">
{{ 'popup.cancel.reject' | translate }} {{ 'popup.cancel.reject' | translate }}
</button> </button>
<button class="button is-primary cancel-button-reject-bottom" (click)="goToHome()">
{{ 'popup.cancel.validate' | translate }}
</button>
</div> </div>
</div> </div>
</ng-template> </ng-template>

View File

@ -1,27 +1,67 @@
<div class="selector language-selector-container"> <div class="selector language-selector-container">
<button class="lang-button" (click)="nextLang()"> <button id="lang_button_popup" class="lang-button" (click)="openDialogLang()">
{{ 'LANGUAGES.' + currentLang.toUpperCase() | translate }} <i class="fa fa-language"></i>
{{ 'LANGUAGES_SHORT.' + currentLang.toUpperCase() | translate }}
<!-- <i class="fa fa-language lang-selector-icon clickable" ></i>--> <!-- <i class="fa fa-language lang-selector-icon clickable" ></i>-->
<i class="fa fa-chevron-down"></i> <i class="fa fa-chevron-down"></i>
</button> </button>
<div class="buttons has-addons"> <!-- <div class="buttons has-addons">-->
<label for="lang_selector" class="hidden"> <!-- <label for="lang_selector" class="hidden">-->
<button> <!-- <button>-->
{{ 'selector.lang' | translate }} <!-- {{ 'selector.lang' | translate }}-->
<span class="lang-title-long is-hidden-mobile"> <!--&lt;!&ndash; <span class="lang-title-long is-hidden-mobile">&ndash;&gt;-->
{{ 'LANGUAGES.' + language ? language : ('fr' | translate) }} <!--&lt;!&ndash; {{ 'LANGUAGES.' + language ? language : ('fr' | translate) }}&ndash;&gt;-->
</span> <!--&lt;!&ndash; </span>&ndash;&gt;-->
<span class="lang-title-short is-visible-mobile"> <!-- <span class="lang-title-short">-->
{{ 'LANGUAGES_SHORT.' + language ? language : ('fr' | translate) }} <!-- {{ 'LANGUAGES_SHORT.' + language ? language : ('fr' | translate) }}-->
</span> <!-- </span>-->
<!-- </button>-->
<!-- </label>-->
<!-- </div>-->
<p-dialog
[modal]="true"
[(visible)]="display_lang_dialog"
[breakpoints]="{ '960px': '75vw' }"
[style]="{ width: '75vw' }"
[draggable]="false"
[showHeader]="false"
[resizable]="true"
>
<ng-template pTemplate="titlebar">
<div class="top">
<button
id="close_dialog"
class="button no-outline cancel-button-reject"
(click)="focusOnCancelButton()"
>
{{ 'SENTENCES.Close' | translate }} <i class="fa fa-times"></i>
</button> </button>
</label> </div>
<select class="is-hidden" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang"> <h2 class="title is-2 has-text-left">
<option *ngFor="let language of availableLanguages" value="{{ language }}"> {{ 'popup.languages.title' | translate }}
</h2>
<button
class="lang-element button"
[ngClass]="{ 'is-primary': language_to_apply === language, 'is-current': language === currentLang }"
*ngFor="let language of availableLanguages"
value="{{ language }}"
(click)="language_to_apply = language"
>
<!-- {{ language }} - --> <!-- {{ language }} - -->
{{ 'LANGUAGES.' + language ? language : ('fr' | translate) }} {{ language }} -
</option> {{ 'LANGUAGES.' + language.toUpperCase() | translate }}
</select> </button>
</div> </ng-template>
<ng-template pTemplate="footer">
<button class="button" (click)="applyLangAndClosePopup()">
{{ 'SENTENCES.Cancel' | translate }}
</button>
<button class="button is-primary" (click)="applyLangAndClosePopup()">
{{ 'nav.save' | translate }}
</button>
</ng-template>
</p-dialog>
</div> </div>

View File

@ -4,6 +4,10 @@
background: white; background: white;
max-width: 15em; max-width: 15em;
width: 15em !important; width: 15em !important;
.top {
clear: both;
width: 100%;
}
} }
.language-selector-container { .language-selector-container {
@ -16,6 +20,14 @@
color: $primary-color; color: $primary-color;
} }
} }
.lang-element {
float: left;
margin: 0.5em;
min-width: 11em;
}
.is-current {
font-weight: bold;
}
.lang-button { .lang-button {
color: $secondary_color; color: $secondary_color;
border: none; border: none;

View File

@ -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 { LanguageEnum } from '../../../../core/enums/language.enum';
import { LanguageService } from '../../../../core/services/language.service'; import { LanguageService } from '../../../../core/services/language.service';
import { StorageService } from '../../../../core/services/storage.service'; import { StorageService } from '../../../../core/services/storage.service';
import { DOCUMENT } from '@angular/common';
@Component({ @Component({
selector: 'app-language-selector', selector: 'app-language-selector',
@ -10,11 +11,17 @@ import { StorageService } from '../../../../core/services/storage.service';
styleUrls: ['./language-selector.component.scss'], styleUrls: ['./language-selector.component.scss'],
}) })
export class LanguageSelectorComponent implements OnInit { export class LanguageSelectorComponent implements OnInit {
public currentLang: LanguageEnum; public currentLang: string;
public availableLanguages: any = ['FR', 'EN', 'ES']; public availableLanguages: any = ['FR', 'EN', 'ES'];
language: string; 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 { ngOnInit(): void {
this.availableLanguages = this.languageService.getAvailableLanguages(); this.availableLanguages = this.languageService.getAvailableLanguages();
@ -24,11 +31,20 @@ export class LanguageSelectorComponent implements OnInit {
} }
} }
setLang(): void { setLang(newlang: string = 'fr'): void {
this.languageService.setLanguage(this.currentLang); this.currentLang = newlang;
this.languageService.setLanguage(newlang);
this.storageService.language = this.currentLang; 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 { nextLang(): void {
const index = this.availableLanguages.indexOf(this.currentLang); const index = this.availableLanguages.indexOf(this.currentLang);
@ -43,4 +59,21 @@ export class LanguageSelectorComponent implements OnInit {
this.setLang(); 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();
}
}
} }

View File

@ -33,6 +33,7 @@ import { ConfirmationService } from 'primeng/api';
import { AboutComponent } from '../features/shared/components/ui/static-pages/about/about.component'; import { AboutComponent } from '../features/shared/components/ui/static-pages/about/about.component';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { ChoiceButtonDinumComponent } from '../features/shared/components/choice-button-dinum/choice-button-dinum.component'; import { ChoiceButtonDinumComponent } from '../features/shared/components/choice-button-dinum/choice-button-dinum.component';
import { DialogModule } from 'primeng/dialog';
const COMPONENTS = [ const COMPONENTS = [
AboutComponent, AboutComponent,
@ -70,7 +71,7 @@ const MATERIAL_MODULES = [
@NgModule({ @NgModule({
declarations: COMPONENTS, declarations: COMPONENTS,
imports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ConfirmDialogModule, RouterModule], imports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ConfirmDialogModule, RouterModule, DialogModule],
exports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ...COMPONENTS], exports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ...COMPONENTS],
providers: [ConfirmationService], providers: [ConfirmationService],
}) })

View File

@ -63,9 +63,16 @@
"description_constraint": "caractères maximum" "description_constraint": "caractères maximum"
}, },
"popup": { "popup": {
"languages": {
"title": "Choisissez votre langue",
"validate": "Enregistrer"
},
"cancel": { "cancel": {
"title": "Vous allez annuler votre sondage", "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": { "dates": {