Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

popup to display lang selection

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/core/services/language.service.ts
View File

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

2
src/app/core/services/storage.service.ts
View File

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

11
src/app/features/administration/stepper/stepper.component.html
View File

@ -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>

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

@ -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>
</button>
</label>
<select class="is-hidden" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">
<option *ngFor="let language of availableLanguages" value="{{ language }}">
<!-- <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>
</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>

12
src/app/shared/components/selectors/language-selector/language-selector.component.scss
View File

@ -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;

43
src/app/shared/components/selectors/language-selector/language-selector.component.ts
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 { 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();
}
}
}

3
src/app/shared/shared.module.ts
View File

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

9
src/assets/i18n/fr.json
View File

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