Merge pull request #33 from AlineRinquin/aline

Ajout des couleurs et un peu css
This commit is contained in:
AlineRinquin 2022-02-17 10:22:54 +01:00 committed by GitHub
commit 30fa1f7de5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 60 additions and 16 deletions

View file

@ -30,6 +30,7 @@ export class PageAjoutContactComponent implements OnInit {
ngOnInit(): void {
// *********************************pensser à changer group car déprécié********************************
this.ajoutContactForm = this.fb.group({
couleurFc: new FormControl('', [Validators.required]),
lastNameFc: new FormControl('', [Validators.required]),
firstNameFc: new FormControl('', [Validators.required]),
telephoneFc: new FormControl('', [Validators.required]),

View file

@ -10,7 +10,7 @@
<div class="form-floating">
<input type="color" class="form-control" id="floatingInputcouleur" placeholder="" name="couleur"
formControlName="couleurFc">
formControlName="couleurFc" value= "{{ listContactInfo.couleur }}">
</div>
<div class="form-floating">

View file

@ -44,6 +44,7 @@ export class PageModifierContactComponent implements OnInit {
// *********************************pensser à changer group car déprécié********************************
this.modifContactForm = this.fb.group({
couleurFc: new FormControl('', [Validators.required]),
lastNameFc: new FormControl('', [Validators.required]),
firstNameFc: new FormControl('', [Validators.required]),
telephoneFc: new FormControl('', [Validators.required]),
@ -71,7 +72,7 @@ export class PageModifierContactComponent implements OnInit {
//Méthode qui envoie les champs modifiés pour mise à jour
public onSubmit(): void {
const couleurValue = this.modifContactForm.value[''];
const couleurValue = this.modifContactForm.value['couleurFc'];
const firstNameValue = this.modifContactForm.value['firstNameFc'];
const lastNameValue = this.modifContactForm.value['lastNameFc'];
const telephoneValue = this.modifContactForm.value['telephoneFc'];

View file

@ -27,7 +27,7 @@
<div class="row justify-content-evenly">
<div class="col-4">
<div *ngFor="let personne of listContact" (click)="onClick(personne)">
<img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/contact-1.png" />
<div class= "couleur" [style.background-color]="personne.couleur"></div>
<p class="fiche-contact">{{ personne.prenom }} {{ personne.nom }}</p>
</div>
</div>

View file

@ -16,6 +16,14 @@
flex-direction: row;
}
.couleur{
border: none;
margin-top: -15px;
border-radius: 80%;
width: 60px;
height: 60px;
flex-direction: row;
}
;h4 {
color: black;
font-weight: bold;