tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

form and radio button

This commit is contained in:
Tykayn 2022-02-15 14:04:41 +01:00 committed by tykayn
parent eb1fffb628
commit 7d0d04954c
3 changed files with 76 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,62 +15,77 @@
{{ 'LANGUAGES.' + currentLang.toUpperCase() | translate }} {{ 'LANGUAGES.' + currentLang.toUpperCase() | translate }}
</span> </span>
</button> </button>
<p-dialog
[modal]="true" <form action="#/administration/step/{{ pollService.step_current }}">
[(visible)]="display_lang_dialog" <p-dialog
[breakpoints]="{ '960px': '75vw' }" [modal]="true"
[style]="{ width: '75vw' }" [(visible)]="display_lang_dialog"
[draggable]="false" [breakpoints]="{ '960px': '75vw' }"
[showHeader]="false" [style]="{ width: '75vw' }"
[resizable]="true" [draggable]="false"
[attr.aria-labelledby]="'popup.languages.title' | translate" [showHeader]="false"
role="dialog" [resizable]="true"
id="lang_selector_modale" [attr.aria-labelledby]="'popup.languages.title' | translate"
> role="dialog"
<ng-template pTemplate="titlebar"> id="lang_selector_modale"
<div class="columns"> >
<div class="column"> <ng-template pTemplate="titlebar">
<div class="top"> <div class="columns">
<button <div class="column">
id="close_dialog{{ idSuffix }}" <div class="top">
class="button cancel-button-reject pull-right img-marged-left" <button
lang="{{ currentLang }}" id="close_dialog{{ idSuffix }}"
(click)="focusOnCancelButton()" class="button cancel-button-reject pull-right img-marged-left"
> lang="{{ currentLang }}"
{{ 'SENTENCES.Close' | translate }} (click)="focusOnCancelButton()"
<img class="icon" src="assets/icons/x_blue.svg" /> >
</button> {{ 'SENTENCES.Close' | translate }}
<img class="icon" src="assets/icons/x_blue.svg" />
</button>
</div>
</div> </div>
</div> </div>
</div> <h1 class="title is-2 has-text-left" id="lang_selector_modale_title">
<h1 class="title is-2 has-text-left" id="lang_selector_modale_title"> {{ 'popup.languages.title' | translate }}
{{ 'popup.languages.title' | translate }} </h1>
</h1>
<div class="list-of-langs"> <div class="list-of-langs">
<button <div *ngFor="let language of availableLanguages" (click)="language_to_apply = language">
class="lang-element button" <label
[ngClass]="{ 'is-primary': language_to_apply === language, 'is-current': language === currentLang }" [attr.for]="'#lang_' + language"
*ngFor="let language of availableLanguages" class="lang-element button"
value="{{ language }}" [ngClass]="{
(click)="language_to_apply = language" 'is-primary': language_to_apply === language,
> 'is-current': language === currentLang
<!-- {{ language }} - --> }"
{{ language }} - >
{{ 'LANGUAGES.' + language.toUpperCase() | translate }} <input
</button> class="pull-left"
</div> type="radio"
</ng-template> 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"> <ng-template pTemplate="footer">
<div class="buttons-bottom"> <div class="buttons-bottom">
<button class="button" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}"> <button class="button" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}">
{{ 'SENTENCES.Cancel' | translate }} {{ 'SENTENCES.Cancel' | translate }}
</button> </button>
<button class="button is-primary" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}"> <button class="button is-primary" (click)="applyLangAndClosePopup()" lang="{{ currentLang }}">
{{ 'nav.save' | translate }} {{ 'nav.save' | translate }}
</button> </button>
</div> </div>
</ng-template> </ng-template>
</p-dialog> </p-dialog>
</form>
</div> </div>

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

@ -39,9 +39,14 @@
border: 0; border: 0;
border-radius: 2rem; border-radius: 2rem;
padding: 0.5rem 0.25rem; padding: 0.5rem 0.25rem;
padding-right: 1rem;
&:hover { &:hover {
background: $d-neutral; background: $primary_color;
color: $white;
}
input {
height: 1.5rem;
} }
} }

2
src/app/shared/components/selectors/language-selector/language-selector.component.ts
View File

@ -17,7 +17,7 @@ export class LanguageSelectorComponent implements OnInit {
public availableLanguages: any = ['FR', 'EN', 'ES']; public availableLanguages: any = ['FR', 'EN', 'ES'];
language: string; language: string;
language_to_apply: string; language_to_apply: string;
display_lang_dialog: boolean = false; display_lang_dialog: boolean = true;
constructor( constructor(
private languageService: LanguageService, private languageService: LanguageService,