funky-framadate-front/src/app/shared/components/selectors/language-selector/language-selector.component...

57 lines
1.7 KiB
HTML

<div class="selector language-selector-container">
<button
id="lang_button_popup{{ idSuffix }}"
class="lang-button"
(click)="openDialogLang()"
[attr.aria-label]="'LANGUAGES_SHORT.' + currentLang.toUpperCase() | translate"
>
<i class="fa fa-language"></i>
{{ 'LANGUAGES_SHORT.' + currentLang.toUpperCase() | translate }}
</button>
<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{{ idSuffix }}"
class="button cancel-button-reject pull-right img-marged-left"
(click)="focusOnCancelButton()"
>
{{ 'SENTENCES.Close' | translate }}
<img class="icon" src="assets/icons/x_blue.svg" />
</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 }} - -->
{{ 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>