tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

step 2 : fix display of radio button

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/core/services/poll.service.ts
View File

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

11
src/app/features/administration/form/steps/step-one/step-one.component.html
View File

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

14
src/app/features/administration/form/steps/step-one/step-one.component.ts
View File

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

89
src/app/features/administration/form/steps/step-two/step-two.component.html
View File

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

7
src/app/features/administration/form/steps/step-two/step-two.component.scss
View File

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

21
src/app/features/administration/stepper/stepper.component.html
View File

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

5
src/app/features/administration/stepper/stepper.component.scss
View File

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

5
src/app/features/shared/components/ui/form/errors-list/errors-list.component.html
View File

@ -1,6 +1,9 @@
<div
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 }"
>
<h1 class="title is-1">

2
src/environments/environment.prod.ts
View File

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

1
src/environments/environment.ts
View File

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

27
src/styles/partials/_forms.scss
View File

@ -57,6 +57,7 @@ input,
.textarea,
select,
.select {
@extend .clickable;
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 {
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
.step-resume {
.content {