91 lines
2.7 KiB
HTML
91 lines
2.7 KiB
HTML
<div class="selector language-selector-container">
|
|
<button
|
|
id="lang_button_popup{{ idSuffix }}"
|
|
class="lang-button"
|
|
(click)="openDialogLang()"
|
|
[attr.aria-controls]="'lang_selector_modale'"
|
|
[attr.aria-label]="'LANGUAGES.' + currentLang.toUpperCase() | translate"
|
|
>
|
|
<i class="fa fa-language"></i>
|
|
<span class="short-lang is-hidden-tablet">
|
|
{{ 'LANGUAGES_SHORT.' + currentLang.toUpperCase() | translate }}
|
|
</span>
|
|
<span class="long-lang is-hidden-mobile">
|
|
{{ 'LANGUAGES.' + currentLang.toUpperCase() | translate }}
|
|
</span>
|
|
</button>
|
|
|
|
<form action="#/administration/step/{{ pollService.step_current }}">
|
|
<p-dialog
|
|
[modal]="true"
|
|
[(visible)]="display_lang_dialog"
|
|
[breakpoints]="['960px']"
|
|
[style]="{ width: '75vw' }"
|
|
[draggable]="false"
|
|
[showHeader]="false"
|
|
[resizable]="true"
|
|
[attr.aria-labelledby]="'popup.languages.title' | translate"
|
|
role="dialog"
|
|
id="lang_selector_modale"
|
|
>
|
|
<ng-template pTemplate="titlebar">
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="top">
|
|
<button
|
|
id="close_dialog{{ idSuffix }}"
|
|
class="button cancel-button-reject pull-right img-marged-left has-no-border"
|
|
lang="{{ currentLang }}"
|
|
(click)="closeModalAndFocusOnButtonToOpen()"
|
|
>
|
|
{{ 'SENTENCES.Close' | translate }}
|
|
<img class="icon" src="assets/icons/x_blue.svg" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h1 class="title is-2 has-text-left" id="lang_selector_modale_title">
|
|
{{ 'popup.languages.title' | translate }}
|
|
</h1>
|
|
|
|
<div class="list-of-langs">
|
|
<div *ngFor="let language of availableLanguages" (click)="language_to_apply = language">
|
|
<label
|
|
[attr.for]="'#lang_' + language"
|
|
class="lang-element button has-text-left"
|
|
[ngClass]="{
|
|
'is-primary': language_to_apply === language,
|
|
'is-current': language === currentLang
|
|
}"
|
|
>
|
|
<input
|
|
class="pull-left"
|
|
type="radio"
|
|
value="{{ language }}"
|
|
name="lang_to_apply"
|
|
lang="{{ language }}"
|
|
[(ngModel)]="language_to_apply"
|
|
[attr.id]="'#lang_' + language"
|
|
(click)="language_to_apply = language"
|
|
/>
|
|
{{ language }} -
|
|
{{ 'LANGUAGES.' + language.toUpperCase() | translate }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template pTemplate="footer">
|
|
<div class="buttons-bottom">
|
|
<button class="button" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}">
|
|
{{ 'SENTENCES.Cancel' | translate }}
|
|
</button>
|
|
<button class="button is-primary" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}">
|
|
{{ 'nav.save' | translate }}
|
|
</button>
|
|
</div>
|
|
</ng-template>
|
|
</p-dialog>
|
|
</form>
|
|
</div>
|