popup to display lang selection

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[] {

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[] = [];

src/app/features/administration/stepper/stepper.component.html

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

src/app/shared/components/selectors/language-selector/language-selector.component.html

@@ -1,27 +1,67 @@
 <div class="selector language-selector-container">
-	<button class="lang-button" (click)="nextLang()">
-		{{ 'LANGUAGES.' + currentLang.toUpperCase() | translate }}
+	<button id="lang_button_popup" class="lang-button" (click)="openDialogLang()">
+		<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-chevron-down"></i>
 	</button>
 
-	<div class="buttons has-addons">
-		<label for="lang_selector" class="hidden">
-			<button>
-				{{ 'selector.lang' | translate }}
-				<span class="lang-title-long is-hidden-mobile">
-					{{ 'LANGUAGES.' + language ? language : ('fr' | translate) }}
-				</span>
-				<span class="lang-title-short is-visible-mobile">
-					{{ 'LANGUAGES_SHORT.' + language ? language : ('fr' | translate) }}
-				</span>
+	<!--	<div class="buttons has-addons">-->
+	<!--		<label for="lang_selector" class="hidden">-->
+	<!--			<button>-->
+	<!--				{{ 'selector.lang' | translate }}-->
+	<!--&lt;!&ndash;				<span class="lang-title-long is-hidden-mobile">&ndash;&gt;-->
+	<!--&lt;!&ndash;					{{ 'LANGUAGES.' + language ? language : ('fr' | translate) }}&ndash;&gt;-->
+	<!--&lt;!&ndash;				</span>&ndash;&gt;-->
+	<!--				<span class="lang-title-short">-->
+	<!--					{{ 'LANGUAGES_SHORT.' + language ? language : ('fr' | translate) }}-->
+	<!--				</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>
-		</label>
-		<select class="is-hidden" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">
-			<option *ngFor="let language of availableLanguages" value="{{ language }}">
+			</div>
+			<h2 class="title is-2 has-text-left">
+				{{ '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 }} - -->
-				{{ 'LANGUAGES.' + language ? language : ('fr' | translate) }}
-			</option>
-		</select>
-	</div>
+				{{ language }} -
+				{{ 'LANGUAGES.' + language.toUpperCase() | translate }}
+			</button>
+		</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>

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;

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();
+		}
+	}
 }

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],
 })

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": {