step 2 : fix display of radio button

This commit is contained in:
Tykayn 2021-11-30 17:37:23 +01:00 committed by tykayn
parent cc51a8efa9
commit ab6cb0288d
11 changed files with 113 additions and 71 deletions

View File

@ -114,7 +114,7 @@ export class PollService implements Resolve<Poll> {
public createFormGroup() { public createFormGroup() {
let minlengthValidation = environment.production ? 12 : 0; let minlengthValidation = environment.production ? 12 : 0;
let form = this.fb.group({ let form = this.fb.group({
title: ['', [Validators.required, Validators.minLength(minlengthValidation)]], title: ['défault titre', [Validators.required, Validators.minLength(minlengthValidation)]],
creatorPseudo: ['', []], creatorPseudo: ['', []],
created_at: [new Date(), [Validators.required]], created_at: [new Date(), [Validators.required]],
creatorEmail: ['', [Validators.required]], creatorEmail: ['', [Validators.required]],

View File

@ -43,6 +43,7 @@
></textarea> ></textarea>
<div <div
class="text-info padded" class="text-info padded"
*ngIf="pollService.form.value.description.length"
[ngClass]="{ 'has-background-warning': pollService.form.value.description.length === 300 }" [ngClass]="{ 'has-background-warning': pollService.form.value.description.length === 300 }"
> >
{{ pollService.form.value.description.length }} / 300 caractères maximum {{ pollService.form.value.description.length }} / 300 caractères maximum
@ -58,12 +59,16 @@
<ng-template pTemplate="footer"> <ng-template pTemplate="footer">
<button <button
type="button" type="button"
pButton
icon="pi pi-times" icon="pi pi-times"
[value]="'dialogs.no' | translate" [value]="'dialogs.no' | translate"
(click)="cd.reject()" (click)="cd.close($event)"
></button>
<button
type="button"
icon="pi pi-check"
[value]="'dialogs.yes' | translate"
(click)="leave($event)"
></button> ></button>
<button type="button" icon="pi pi-check" [value]="'dialogs.yes' | translate" (click)="cd.accept()"></button>
</ng-template> </ng-template>
</p-confirmDialog> </p-confirmDialog>
<div class="columns"> <div class="columns">

View File

@ -35,10 +35,18 @@ export class StepOneComponent implements OnInit {
cancelCreationDialog() { cancelCreationDialog() {
this.confirmationService.confirm({ this.confirmationService.confirm({
message: 'Quitter la création de sondage?', message: 'Quitter la création de sondage?',
accept: (event: any) => { accept: this.leave,
event.preventDefault(); reject: (event: any) => {
this.router.navigate(['/']); console.log('event', event);
}, },
}); });
} }
leave(event: any) {
console.log('event', event);
if (event) {
event.preventDefault();
}
this.router.navigate(['/']);
}
} }

View File

@ -1,47 +1,54 @@
<div class="step step-container form-field poll-kind"> <div class="step step-container form-field poll-kind">
<div class="min-height"> <form action="#" [formGroup]="pollService.form">
<app-stepper [step_current]="2" [step_max]="5"></app-stepper> <div class="min-height">
<app-errors-list [form]="pollService.form"></app-errors-list> <app-stepper [step_current]="2" [step_max]="5"></app-stepper>
<h2 class="title is-2"> <app-errors-list [form]="pollService.form"></app-errors-list>
{{ 'creation.want' | translate }} <h2 class="title is-2">
</h2> {{ 'creation.want' | translate }}
<div class="container"> </h2>
<div class="kind-of-poll columns"> <div class="container">
<div class="column"> <div class="kind-of-poll columns">
<button <div class="column">
class="button is-fullwidth" <div
[ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }" class="button input-radio is-fullwidth"
(click)="pollService.form.controls.isAboutDate.setValue(true)" [ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }"
> (click)="pollService.form.controls.isAboutDate.setValue(true)"
<i class="fa fa-calendar"></i> >
{{ 'creation.kind.date' | translate }} <i class="fa fa-calendar"></i>
</button> <label for="isAboutDate_true">
</div> {{ 'creation.kind.date' | translate }}
<div class="column"> </label>
<button <input type="radio" formControlName="isAboutDate" [value]="true" id="isAboutDate_true" />
class="button is-fullwidth" </div>
[disabled]="true" </div>
[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }" <div class="column">
(click)="pollService.form.controls.isAboutDate.setValue(false)" <div
> class="button input-radio is-fullwidth"
<i class="fa fa-list-ul"></i> [ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
{{ 'creation.kind.classic' | translate }} (click)="pollService.form.controls.isAboutDate.setValue(false)"
</button> >
<i class="fa fa-list-ul"></i>
<label for="isAboutDate_false">
{{ 'creation.kind.classic' | translate }}
</label>
<input type="radio" formControlName="isAboutDate" [value]="false" id="isAboutDate_false" />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="columns">
<div class="columns"> <div class="column">
<div class="column"> <button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/1']">
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/1']"> précédent
précédent </button>
</button> </div>
<div class="column">
<!-- [disabled]="form.invalid"-->
<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/3']">
suivant
</button>
</div>
</div> </div>
<div class="column"> </form>
<!-- [disabled]="form.invalid"-->
<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/3']">
suivant
</button>
</div>
</div>
</div> </div>

View File

@ -9,9 +9,16 @@
.button { .button {
background: $d-grey; background: $d-grey;
border: solid white 1px; border: solid white 1px;
transition: background-color ease 1.5s;
&.is-selected { &.is-selected {
border: solid $primary-color 1px; border: solid $primary-color 1px;
color: $font_color; color: $font_color;
} }
&:hover {
background: $secondary_color;
border: solid $primary-color 1px;
color: $white;
transition: background-color ease 0.25s;
}
} }
} }

View File

@ -51,23 +51,18 @@
> >
</div> </div>
<div class="step-info"> <div class="step-info">
<h2 classs="step-title-poll" *ngIf="pollService.step_current == 1"> <h2 class="step-title-poll" *ngIf="pollService.step_current == 1">
{{ 'creation.title' | translate }} {{ 'creation.title' | translate }}
</h2> </h2>
<h2 class="step-title-poll" *ngIf="pollService.step_current > 1"> <h2 class="step-title-poll" *ngIf="pollService.step_current >= 2">
<span class="poll-title"> {{ pollService.form.value.title }}
{{ pollService.form.value.title }}
</span>
</h2> </h2>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3> <h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
</div> </div>
<div class="column has-text-right"> <div class="column is-narrow has-text-right">
<a class="" (click)="cancelDialog()"> <a class="cancel-button" (click)="cancelDialog()"> Annuler <i class="fa fa-times"></i> </a>
Annuler
<span class="cancel-button"><i class="fa fa-times"></i></span>
</a>
</div> </div>
</div> </div>
</div> </div>
@ -76,7 +71,7 @@
</div> </div>
<!-- modale de confirmation pour quitter--> <!-- modale de confirmation pour quitter-->
<p-confirmDialog #cd [style]="{ width: '50vw' }"> <p-confirmDialog #stepperConfirm [style]="{ width: '50vw' }">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<h3>{{ 'creation.dialog' | translate }}</h3> <h3>{{ 'creation.dialog' | translate }}</h3>
</ng-template> </ng-template>
@ -86,14 +81,14 @@
pButton pButton
icon="pi pi-times" icon="pi pi-times"
[label]="'dialogs.no' | translate" [label]="'dialogs.no' | translate"
(click)="cd.reject()" (click)="stepperConfirm.reject()"
></button> ></button>
<button <button
type="button" type="button"
pButton pButton
icon="pi pi-check" icon="pi pi-check"
[label]="'dialogs.yes' | translate" [label]="'dialogs.yes' | translate"
(click)="cd.accept()" (click)="stepperConfirm.accept()"
></button> ></button>
</ng-template> </ng-template>
</p-confirmDialog> </p-confirmDialog>

View File

@ -40,4 +40,9 @@
} }
} }
} }
.step-title-poll {
font-size: 0.85rem !important;
color: $d-neutral !important;
}
} }

View File

@ -1,6 +1,9 @@
<div <div
class="validation-error-list padded" class="validation-error-list padded"
*ngIf="(form.valid && !hide_on_valid) || !form.valid" *ngIf="
(form.valid && !hide_on_valid && environment.display_validation_errors) ||
(environment.display_validation_errors && !form.valid)
"
[ngClass]="{ 'has-background-warning': totalErrors > 0, 'has-background-success': totalErrors === 0 }" [ngClass]="{ 'has-background-warning': totalErrors > 0, 'has-background-success': totalErrors === 0 }"
> >
<h1 class="title is-1"> <h1 class="title is-1">

View File

@ -82,4 +82,6 @@ export const environment = {
localStorage: { localStorage: {
key: 'FramaSondage', key: 'FramaSondage',
}, },
display_validation_errors: false,
}; };

View File

@ -41,6 +41,7 @@ export const environment = {
localStorage: { localStorage: {
key: 'FramaDateFunky', key: 'FramaDateFunky',
}, },
display_validation_errors: false,
}; };
// Included with Angular CLI. // Included with Angular CLI.

View File

@ -57,6 +57,7 @@ input,
.textarea, .textarea,
select, select,
.select { .select {
@extend .clickable;
border: solid 1px $font_color; border: solid 1px $font_color;
} }
@ -81,6 +82,23 @@ textarea {
} }
} }
// radio input structure
.button {
label {
margin-bottom: 0;
width: 100%;
display: inline-block;
text-align: left;
}
}
input[type='radio'] {
padding: 1em;
margin-bottom: 0;
color: $primary-color;
width: 2em;
}
li { li {
list-style-type: none; list-style-type: none;
} }
@ -303,15 +321,6 @@ mat-checkbox {
} }
} }
h2.step-title-poll {
font-size: 0.85rem !important;
color: $d-neutral !important;
}
h2.step-title-poll {
font-size: 0.85rem !important;
color: $d-neutral !important;
}
// resume de la création de sondage // resume de la création de sondage
.step-resume { .step-resume {
.content { .content {