From 513b86c46df1451427c83fb976e310390fb6cd9c Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Wed, 24 Feb 2021 11:17:34 +0100
Subject: [PATCH] fix(svg) : change img to svg
---
src/app/form/form.component.html | 390 +++++++++++-------
src/app/form/form.component.scss | 31 +-
.../hour-picker/hour-picker.component.html | 4 +-
.../hour-picker/hour-picker.component.scss | 2 +-
.../svg-icon/svg-icon.component.scss | 10 +
5 files changed, 267 insertions(+), 170 deletions(-)
diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html
index 5667595b7..0c4ec892d 100644
--- a/src/app/form/form.component.html
+++ b/src/app/form/form.component.html
@@ -110,24 +110,36 @@
<label for="surname">Nom</label>
<div fxLayout="row" fxLayoutGap="13px">
<input type="text" (input)="setValidationsForm()" formControlName="surname" class="form-input" />
- <img *ngIf="accountForm.get('surname').valid" src="../../assets/form/validate.svg" alt="logo valid" />
- <img
+ <app-svg-icon
+ *ngIf="accountForm.get('surname').valid"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="accountForm.get('surname').invalid && accountForm.get('surname').value"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group" fxLayout="column">
<label for="name">Prénom</label>
<div fxLayout="row" fxLayoutGap="13px">
<input type="text" (input)="setValidationsForm()" formControlName="name" class="form-input" />
- <img *ngIf="accountForm.get('name').valid" src="../../assets/form/validate.svg" alt="logo valid" />
- <img
+ <app-svg-icon
+ *ngIf="accountForm.get('name').valid"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="accountForm.get('name').invalid && accountForm.get('name').value"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group" fxLayout="column">
@@ -139,12 +151,18 @@
class="form-input phone"
(input)="modifyPhoneInput(accountForm, 'phone', $event.target.value)"
/>
- <img *ngIf="accountForm.get('phone').valid" src="../../assets/form/validate.svg" alt="logo valid" />
- <img
+ <app-svg-icon
+ *ngIf="accountForm.get('phone').valid"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="accountForm.get('phone').invalid && accountForm.get('phone').value"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
</div>
@@ -167,12 +185,18 @@
[readonly]="isAccountMode"
[ngClass]="{ disabled: isAccountMode }"
/>
- <img *ngIf="accountForm.get('email').valid" src="../../assets/form/validate.svg" alt="logo valid" />
- <img
+ <app-svg-icon
+ *ngIf="accountForm.get('email').valid"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="accountForm.get('email').invalid && accountForm.get('email').value"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group" fxLayout="column">
@@ -192,18 +216,25 @@
(input)="setValidationsForm()"
autocomplete="on"
/>
- <img
+ <app-svg-icon
+ [iconClass]="'validation grey hover'"
+ [type]="'form'"
+ [icon]="'eyePassword'"
(click)="showPassword()"
- class="eyePassword"
- src="../../assets/form/eyePassword.svg"
- alt="logo eyePassword"
- />
- <img *ngIf="accountForm.get('password').valid" src="../../assets/form/validate.svg" alt="logo valid" />
- <img
+ ></app-svg-icon>
+
+ <app-svg-icon
+ *ngIf="accountForm.get('password').valid"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="accountForm.get('password').invalid && accountForm.get('password').value"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group" fxLayout="column">
@@ -216,22 +247,24 @@
(input)="setValidationsForm()"
autocomplete="on"
/>
- <img
+ <app-svg-icon
+ [iconClass]="'validation grey hover'"
+ [type]="'form'"
+ [icon]="'eyePassword'"
(click)="showConfirmPassword()"
- class="eyePassword"
- src="../../assets/form/eyePassword.svg"
- alt="logo eyePassword"
- />
- <img
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="accountForm.get('confirmPassword').valid && accountForm.get('confirmPassword').value"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="accountForm.get('confirmPassword').invalid && accountForm.get('confirmPassword').value"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
</div>
@@ -250,23 +283,30 @@
formControlName="structureName"
class="form-input structureName"
/>
- <img
+ <app-svg-icon
*ngIf="getStructureControl('structureName').valid"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group" fxLayout="column">
<label for="address">Adresse de la structure</label>
- <div fxLayout="row" fxLayoutGap="13px">
+ <div class="addressRow" fxLayout="row" fxLayoutGap="13px">
<app-address-autocomplete
[address]="getStructureControl('address').valid ? getStructureControl('address').value : null"
(inputAddress)="setAddressStructure()"
(selectedAddress)="setAddressStructure($event)"
></app-address-autocomplete>
- <img *ngIf="getStructureControl('address').valid" src="../../assets/form/validate.svg" alt="logo valid" />
+ <app-svg-icon
+ *ngIf="getStructureControl('address').valid"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validateIcon"
+ ></app-svg-icon>
</div>
</div>
</div>
@@ -283,16 +323,18 @@
class="form-input"
(input)="modifyPhoneInput(structureForm, 'contactPhone', $event.target.value)"
/>
- <img
+ <app-svg-icon
*ngIf="getStructureControl('contactPhone').valid"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('contactPhone').invalid && getStructureControl('contactPhone').value"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
</div>
@@ -377,17 +419,18 @@
<label for="structureName">Courriel de la structure</label>
<div fxLayout="row" fxLayoutGap="13px">
<input type="text" (input)="setValidationsForm()" formControlName="contactMail" class="form-input" />
- <img
+ <app-svg-icon
*ngIf="getStructureControl('contactMail').valid"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
-
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('contactMail').invalid && getStructureControl('contactMail').value"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
<div class="collapse" [ngClass]="{ notCollapsed: !showWebsite }">
@@ -404,7 +447,7 @@
</div>
</div>
<div *ngIf="showWebsite" class="inputSection">
- <div class="form-group" fxLayout="column">
+ <div class="form-group website" fxLayout="column">
<label for="website">Adresse du site web</label>
<div fxLayout="row" fxLayoutGap="27px">
<input
@@ -414,16 +457,20 @@
formControlName="website"
class="form-input"
/>
- <img
+ <app-svg-icon
*ngIf="getStructureControl('website').valid && getStructureControl('website').value"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('website').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</div>
</div>
</div>
@@ -455,20 +502,24 @@
formControlName="facebook"
class="form-input withIcon"
/>
- <img
+ <app-svg-icon
*ngIf="
getStructureControl('facebook').valid &&
getStructureControl('facebook').value != null &&
getStructureControl('facebook').value != ''
"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('facebook').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group twitter">
@@ -483,20 +534,24 @@
formControlName="twitter"
class="form-input withIcon"
/>
- <img
+ <app-svg-icon
*ngIf="
getStructureControl('twitter').valid &&
getStructureControl('twitter').value != null &&
getStructureControl('twitter').value != ''
"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('twitter').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group instagram">
@@ -511,20 +566,25 @@
placeholder="instagram.com/resonum"
class="form-input withIcon"
/>
- <img
+
+ <app-svg-icon
*ngIf="
getStructureControl('instagram').valid &&
getStructureControl('instagram').value != null &&
getStructureControl('instagram').value != ''
"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('instagram').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group linkedin">
@@ -539,20 +599,24 @@
placeholder="linkedin.com/in/resonum"
class="form-input withIcon"
/>
- <img
+ <app-svg-icon
*ngIf="
getStructureControl('linkedin').valid &&
getStructureControl('linkedin').value != null &&
getStructureControl('linkedin').value != ''
"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('linkedin').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</div>
</div>
</div>
@@ -774,7 +838,7 @@
</div>
</div>
<div *ngIf="equipment.openned" class="inputSection">
- <div class="form-group" fxLayout="column">
+ <div class="form-group equipments" fxLayout="column">
<label for="equipment">Nombre</label>
<div fxLayout="row" fxLayoutAlign=" center" fxLayoutGap="27px">
<ng-container *ngIf="equipment.module.id == 'ordinateurs'">
@@ -784,18 +848,20 @@
formControlName="nbComputers"
class="form-input nbEquipment"
/>
- <img
+ <app-svg-icon
*ngIf="getStructureControl('nbComputers').valid"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- class="nbEquipment"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('nbComputers').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo valid"
- class="nbEquipment"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</ng-container>
<ng-container *ngIf="equipment.module.id == 'tablettes'">
<input
@@ -804,18 +870,20 @@
formControlName="nbTablets"
class="form-input nbEquipment"
/>
- <img
+ <app-svg-icon
*ngIf="getStructureControl('nbTablets').valid"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- class="nbEquipment"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('nbTablets').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- class="nbEquipment"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</ng-container>
<ng-container *ngIf="equipment.module.id == 'imprimantes'">
<input
@@ -824,18 +892,20 @@
formControlName="nbPrinters"
class="form-input nbEquipment"
/>
- <img
+ <app-svg-icon
*ngIf="getStructureControl('nbPrinters').valid"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- class="nbEquipment"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('nbPrinters').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- class="nbEquipment"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</ng-container>
<ng-container *ngIf="equipment.module.id == 'bornesNumeriques'">
<input
@@ -844,18 +914,20 @@
formControlName="nbNumericTerminal"
class="form-input nbEquipment"
/>
- <img
+ <app-svg-icon
*ngIf="getStructureControl('nbNumericTerminal').valid"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- class="nbEquipment"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('nbNumericTerminal').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- class="nbEquipment"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</ng-container>
<ng-container *ngIf="equipment.module.id == 'scanners'">
<input
@@ -864,18 +936,20 @@
formControlName="nbScanners"
class="form-input nbEquipment"
/>
- <img
+ <app-svg-icon
*ngIf="getStructureControl('nbScanners').valid"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- class="nbEquipment"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('nbScanners').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo valid"
- class="nbEquipment"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</ng-container>
</div>
</div>
diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss
index 01975ebbf..898d651ad 100644
--- a/src/app/form/form.component.scss
+++ b/src/app/form/form.component.scss
@@ -267,6 +267,28 @@ h3 {
label {
color: $grey-2;
}
+ &.facebook,
+ &.twitter,
+ &.instagram,
+ &.linkedin,
+ &.website,
+ &.equipments {
+ div {
+ height: 52px;
+ .validationIcon {
+ margin-right: -53px;
+ }
+ }
+ }
+ div {
+ height: 44px;
+ }
+ .addressRow {
+ height: auto;
+ .validateIcon {
+ height: 38px !important;
+ }
+ }
}
input {
margin-top: 4px;
@@ -283,7 +305,6 @@ input {
img {
max-height: 340px;
&.eyePassword {
- padding: 0 2.5px; // Align to email input
cursor: pointer;
&:hover {
opacity: 0.8;
@@ -366,14 +387,6 @@ img {
}
}
padding: 0px 15px 19px 12px;
- img {
- margin-top: 8px;
- //padding-left: 41px;
- margin-right: -54px;
- &.nbEquipment {
- padding-left: 214px;
- }
- }
svg {
margin-top: 8px;
width: 22px;
diff --git a/src/app/shared/components/hour-picker/hour-picker.component.html b/src/app/shared/components/hour-picker/hour-picker.component.html
index ff785893b..d8eb0f6ae 100644
--- a/src/app/shared/components/hour-picker/hour-picker.component.html
+++ b/src/app/shared/components/hour-picker/hour-picker.component.html
@@ -62,10 +62,10 @@
<div>
<div *ngIf="hour.error === 'wrong' || hour.error === 'incomplete'" class="error-message">
- <app-svg-icon [type]="'ico'" [icon]="'nok'"></app-svg-icon>
+ <app-svg-icon [iconClass]="'icon-32'" [type]="'ico'" [icon]="'nok'"></app-svg-icon>
</div>
<div *ngIf="hour.error === null" class="error-message">
- <app-svg-icon [type]="'ico'" [icon]="'ok'"></app-svg-icon>
+ <app-svg-icon [iconClass]="'icon-32'" [type]="'ico'" [icon]="'ok'"></app-svg-icon>
</div>
</div>
</div>
diff --git a/src/app/shared/components/hour-picker/hour-picker.component.scss b/src/app/shared/components/hour-picker/hour-picker.component.scss
index b10e64ec2..64584da1b 100644
--- a/src/app/shared/components/hour-picker/hour-picker.component.scss
+++ b/src/app/shared/components/hour-picker/hour-picker.component.scss
@@ -46,7 +46,7 @@
height: 40px;
display: grid;
// grid-template-columns: auto 70px auto 70px 30px 80px 1fr;
- grid-template-columns: auto 52px auto 61px 30px;
+ grid-template-columns: auto 52px auto 61px 30px 0px;
column-gap: 10px;
align-items: center;
justify-items: center;
diff --git a/src/app/shared/components/svg-icon/svg-icon.component.scss b/src/app/shared/components/svg-icon/svg-icon.component.scss
index 30dac9094..c17749f5b 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.scss
+++ b/src/app/shared/components/svg-icon/svg-icon.component.scss
@@ -9,6 +9,16 @@
&.icon-75 {
width: 4.688em;
}
+ &.validation {
+ height: 100%;
+ width: 26px;
+ }
+ &.hover {
+ cursor: pointer;
+ &:hover {
+ opacity: 0.8;
+ }
+ }
&.grey {
fill: $grey-3;
stroke: $grey-3;
--
GitLab