form and radio button
This commit is contained in:
tykayn
parent
eb1fffb628
commit
7d0d04954c
|
|
@ -15,62 +15,77 @@
|
|||
{{ 'LANGUAGES.' + currentLang.toUpperCase() | translate }}
|
||||
</span>
|
||||
</button>
|
||||
<p-dialog
|
||||
[modal]="true"
|
||||
[(visible)]="display_lang_dialog"
|
||||
[breakpoints]="{ '960px': '75vw' }"
|
||||
[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"
|
||||
lang="{{ currentLang }}"
|
||||
(click)="focusOnCancelButton()"
|
||||
>
|
||||
{{ 'SENTENCES.Close' | translate }}
|
||||
<img class="icon" src="assets/icons/x_blue.svg" />
|
||||
</button>
|
||||
|
||||
<form action="#/administration/step/{{ pollService.step_current }}">
|
||||
<p-dialog
|
||||
[modal]="true"
|
||||
[(visible)]="display_lang_dialog"
|
||||
[breakpoints]="{ '960px': '75vw' }"
|
||||
[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"
|
||||
lang="{{ currentLang }}"
|
||||
(click)="focusOnCancelButton()"
|
||||
>
|
||||
{{ 'SENTENCES.Close' | translate }}
|
||||
<img class="icon" src="assets/icons/x_blue.svg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="title is-2 has-text-left" id="lang_selector_modale_title">
|
||||
{{ 'popup.languages.title' | translate }}
|
||||
</h1>
|
||||
<h1 class="title is-2 has-text-left" id="lang_selector_modale_title">
|
||||
{{ 'popup.languages.title' | translate }}
|
||||
</h1>
|
||||
|
||||
<div class="list-of-langs">
|
||||
<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>
|
||||
</div>
|
||||
</ng-template>
|
||||
<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"
|
||||
[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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -39,9 +39,14 @@
|
|||
border: 0;
|
||||
border-radius: 2rem;
|
||||
padding: 0.5rem 0.25rem;
|
||||
padding-right: 1rem;
|
||||
|
||||
&:hover {
|
||||
background: $d-neutral;
|
||||
background: $primary_color;
|
||||
color: $white;
|
||||
}
|
||||
input {
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export class LanguageSelectorComponent implements OnInit {
|
|||
public availableLanguages: any = ['FR', 'EN', 'ES'];
|
||||
language: string;
|
||||
language_to_apply: string;
|
||||
display_lang_dialog: boolean = false;
|
||||
display_lang_dialog: boolean = true;
|
||||
|
||||
constructor(
|
||||
private languageService: LanguageService,
|
||||
|
|
|
|||
Loading…
Reference in New Issue