Commit b21649cd authored by Bastien DUMONT's avatar Bastien DUMONT
Browse files

Feat/us100 onboarding design

parent d311dd9f
......@@ -3,6 +3,8 @@
<div (scroll)="onScrollDown($event)" class="app-body">
<router-outlet></router-outlet>
<router-outlet name="print"></router-outlet>
<app-footer></app-footer>
<!-- <app-footer>
commented to use outlet in another branch
</app-footer> -->
</div>
</div>
......@@ -19,9 +19,9 @@ h4 {
}
.form {
background: $white;
background: $grey-7;
width: 100vw;
height: calc(var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height});
height: calc(var(--vh, 1vh) * 100 - #{$header-height});
top: #{$header-height};
z-index: $structure-details-z-index;
@media #{$tablet} {
......@@ -31,9 +31,8 @@ h4 {
}
.footer {
padding: 17px 0;
width: 100%;
max-width: 960px;
max-width: 1000px;
margin: 20px auto;
text-align: center;
&.desktop {
......@@ -128,10 +127,20 @@ h4 {
}
}
.page {
max-width: 960px;
max-width: 1000px;
box-sizing: border-box;
margin: auto;
height: auto;
min-height: 450px;
max-height: 75vh;
overflow-y: auto;
color: $grey-1;
background: $white;
border-radius: 8px;
border: 1px solid $grey-6;
padding: 32px 24px 32px 48px;
* {
max-width: 600px;
}
&.home {
.btnStart {
margin-top: 90px;
......@@ -157,7 +166,7 @@ h4 {
}
}
.title {
margin-bottom: 10px;
margin-bottom: 16px;
}
.nextTitle {
margin-bottom: 10px;
......@@ -166,15 +175,24 @@ h4 {
.type-picker {
height: 100%;
}
.welcomingTerms,
.procedureContainer,
.otherServices,
.textareaBlock {
max-width: 600px;
}
.labelsQualifications {
gap: 0 8px;
}
}
.titleDesc {
@include lato-bold-20;
margin-bottom: 20px;
}
p {
margin-top: 10px;
margin-bottom: 0;
@include lato-regular-18;
color: $grey-1;
@include lato-regular-14;
margin: 7px 0 0 0;
&.special {
@include lato-regular-14;
color: $grey-3;
......@@ -196,15 +214,26 @@ h4 {
}
}
&.notRequired {
@include lato-regular-18;
color: $grey-3;
font-style: italic;
margin-top: 4px;
}
}
.passwordInfo {
@include lato-regular-14;
font-style: italic;
color: $grey-3;
}
.textareaBlock {
@media #{$tablet} {
max-width: 90%;
}
p {
text-align: right;
@include lato-regular-14;
color: $grey-3;
font-style: italic;
}
}
}
......@@ -235,32 +264,31 @@ h4 {
}
.progressBar {
height: #{$progressBar-height};
max-width: 960px;
margin: auto;
max-width: 1000px;
margin: 16px auto;
p {
@include lato-bold-14;
color: $red;
margin-bottom: 7px;
}
progress {
width: 100%;
height: 6px;
border-radius: 7px;
&::-webkit-progress-bar {
background-color: $grey-8;
background-color: $grey-6;
border-radius: 7px;
}
&::-webkit-progress-value {
background-color: $primary-color;
border-radius: 12px;
}
&.validate {
&::-webkit-progress-value {
background-color: $green-1;
}
}
}
label {
@include lato-bold-14;
color: $primary-color;
min-width: 26px;
&.validate {
color: $green-1;
}
}
}
.form-group {
......@@ -282,21 +310,25 @@ h4 {
}
ul {
padding-left: 0;
}
li {
display: flex;
margin-left: 1%;
font-size: small;
align-items: center;
p {
margin-left: 10px;
margin-top: unset;
}
&.valid {
color: $green;
}
&.invalid {
color: $orange-warning;
li {
display: flex;
margin-left: 1%;
font-size: small;
align-items: center;
p {
margin-left: 10px;
margin-top: unset;
@include lato-regular-14;
}
&.valid {
color: $green;
}
&.invalid {
color: $orange-warning;
p {
color: $orange-warning;
}
}
}
}
.addressRow {
......@@ -332,11 +364,54 @@ img {
}
}
//section equipments controller
.controller {
border: 1px solid $grey-5;
border-radius: 4px;
margin-bottom: 13px;
max-width: 600px;
@media #{$small-phone} {
width: 95% !important;
}
@media #{$tablet} {
width: 296px;
}
.contorllerHeader {
height: 65px;
padding: 0 15px 0 12px;
p {
@include lato-bold-14;
}
}
.equipments {
svg {
width: 32px;
height: 32px;
background-color: $grey-8;
border-radius: 50%;
cursor: pointer;
}
input {
width: 56px;
margin: 0 6px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number'] {
-moz-appearance: textfield;
}
}
}
// collapse
.collapse {
border: 1px solid $grey-4;
border: 1px solid $grey-5;
border-radius: 4px;
margin-bottom: 13px;
max-width: 600px;
@media #{$small-phone} {
width: 95% !important;
}
......@@ -359,11 +434,42 @@ img {
margin: 0;
color: $grey-2;
@include lato-regular-14;
&.website,
&.facebook,
&.twitter,
&.instagram,
&.linkedin {
svg {
height: 22px;
width: 22px;
padding: 6px;
}
&:focus-within {
input {
border-color: $grey-3;
fill: $primary-color;
}
}
}
app-svg-icon {
padding-top: 12px;
margin-right: 0 !important;
}
&.website {
&:focus-within {
svg {
&.website {
border-color: $grey-3;
fill: $primary-color;
}
}
}
}
&.facebook {
&:focus-within {
svg {
&.facebook {
border-color: $primary-color;
border-color: $grey-3;
fill: $primary-color;
}
}
......@@ -373,7 +479,7 @@ img {
&:focus-within {
svg {
&.instagram {
border-color: $primary-color;
border-color: $grey-3;
fill: $primary-color;
}
}
......@@ -383,7 +489,7 @@ img {
&:focus-within {
svg {
&.twitter {
border-color: $primary-color;
border-color: $grey-3;
fill: $primary-color;
}
}
......@@ -393,7 +499,7 @@ img {
&:focus-within {
svg {
&.linkedin {
border-color: $primary-color;
border-color: $grey-3;
fill: $primary-color;
}
}
......@@ -416,7 +522,7 @@ img {
height: 38px;
fill: $grey-3;
margin-right: 0 !important;
border: 1px solid $grey-4;
border: 1px solid $grey-5;
border-radius: 4px 0 0 4px;
border-right: 0;
padding-left: 16px;
......@@ -492,8 +598,13 @@ img {
margin-right: 12px;
}
.asterisk {
color: $primary-color;
.cgu {
h3 {
@include lato-bold-18;
}
.asterisk {
color: $primary-color;
}
}
.structureInfoBlock {
......
......@@ -918,6 +918,18 @@ export class FormComponent implements OnInit {
this.userAcceptNewsletter = isAccepted;
}
private changeValueHandler(equipment: string, value = 0): void {
let field = '';
if (equipment === 'ordinateurs') field = 'nbComputers';
if (equipment === 'tablettes') field = 'nbTablets';
if (equipment === 'scanners') field = 'nbScanners';
if (equipment === 'bornesNumeriques') field = 'nbNumericTerminal';
if (equipment === 'imprimantes') field = 'nbPrinters';
if (value === -1 && this.structureForm.value[field] === 0) return;
this.getStructureControl(field).setValue(this.structureForm.value[field] + value);
}
public validateForm(): void {
if (this.getStructureControl('freeWorkShop').value === null) {
this.getStructureControl('freeWorkShop').setValue(false);
......
......@@ -3,12 +3,15 @@
.search-bar {
display: flex;
flex-direction: column;
* {
width: 400px;
}
}
.autocomplete-items {
border: 0.0625rem solid #d4d4d4;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
border-top: none;
border-bottom: none;
max-width: 294px;
z-index: 99;
background-color: #fff;
cursor: pointer;
......
......@@ -111,7 +111,7 @@ button {
background: $white;
height: 31px;
color: $primary-color;
color: $grey-1;
padding: 3px 15px;
display: table-cell;
vertical-align: middle;
......@@ -138,27 +138,6 @@ button {
border-radius: 20px;
}
// .btn-secondary {
// background: $white;
// height: 30px;
// width: 132px;
// color: $grey-1;
// padding: 0 0 1px 1px;
// // padding: 4px 37px 4px 37px;
// border-color: transparent;
// line-break: 18px;
// &:hover {
// @include background-hash($grey-1);
// }
// &:focus {
// background-color: $white;
// border-color: $primary-color;
// color: $primary-color;
// }
// &:active {
// background-color: $blue-light;
// }
// }
.btn-filter-phone {
background: $white;
height: 40px;
......
......@@ -7,7 +7,7 @@
>
<div class="checkmark">
<svg class="validate" aria-hidden="true">
<use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
<use [attr.xlink:href]="'assets/form/sprite.svg#checkVectorSquareFull'"></use>
</svg>
</div>
<svg *ngIf="iconSvg" aria-hidden="true" [ngClass]="iconType">
......
......@@ -2,16 +2,12 @@
@import '../../../../assets/scss/typography';
svg {
min-width: 30px;
width: 30px;
height: 100%;
width: 44px;
height: 44px;
fill: $primary-color;
stroke: $primary-color;
&.validate {
min-width: 13px;
width: 13px;
height: 100%;
stroke: $green-1;
stroke: none;
display: none;
}
&.labels {
......@@ -29,19 +25,21 @@ button {
outline: none;
border: none;
cursor: pointer;
margin: 8px 0;
margin: 8px 0 0 0;
&.selected {
background: $green-1;
background: $white;
border: 3px solid $green-1;
.validate {
display: initial;
}
p {
color: $white;
width: 100%;
height: 100%;
}
.checkmark {
min-width: 20px;
width: 20px;
height: 20px;
width: 24px;
height: 24px;
// to compensate viewbox of svg
margin-right: 8px !important;
transform: translate(-5px);
border: none;
}
}
......@@ -51,10 +49,12 @@ button {
color: $grey-2;
}
.checkmark {
min-width: 18px;
width: 18px;
height: 18px;
min-width: 18px;
background: $white;
border: 1px solid $grey-3;
border-radius: 4px;
box-sizing: border-box;
}
}
......@@ -49,15 +49,13 @@
</div>
</div>
<div class="add" *ngIf="day.hours.length === 1">
<div
(click)="addHours(day)"
fxLayout="row"
fxLayoutAlign="center center"
fxLayoutGap="3px"
class="grey-rounded-border"
>
<app-svg-icon [type]="'ico'" [icon]="'add'" [iconColor]="'currentColor'"></app-svg-icon>Ajouter
</div>
<app-button
(action)="addHours(day)"
[text]="'Ajouter'"
[iconType]="'form'"
[iconBtn]="'show'"
[style]="buttonTypeEnum.Secondary"
></app-button>
</div>
</div>
</div>
......
......@@ -26,8 +26,9 @@
grid-template-columns: auto 1fr;
}
.active {
display: grid;
grid-template-columns: 1fr 250px 40px;
display: flex;
flex-wrap: wrap;
max-width: 400px;
@media #{$large-phone} {
grid-template-columns: unset;
grid-template-rows: 1fr 1fr;
......@@ -74,7 +75,8 @@ input {
border: 1px solid $grey-4;
box-sizing: border-box;
border-radius: 4px;
height: 40px;
height: 36px;
margin-top: 0;
@include lato-regular-14;
min-width: 56px;
text-align: center;
......@@ -114,3 +116,9 @@ input[type='time']::-webkit-calendar-picker-indicator {
background: none;
display: none;
}
::ng-deep .add app-button button {
div.text {
height: 32px !important;
}
}
......@@ -4,6 +4,7 @@ import { Day } from '../../../models/day.model';
import { Time } from '../../../models/time.model';
import { WeekDayEnum } from '../../enum/weekDay.enum';
import { CheckHours } from '../../validator/form';
import { ButtonType } from '../button/buttonType.enum';
@Component({
selector: 'app-hour-picker',
......@@ -16,7 +17,7 @@ export class HourPickerComponent implements OnChanges, OnDestroy {
@Output() updateFormError = new EventEmitter<any>();
@Output() updateForm = new EventEmitter<FormGroup>();
public buttonTypeEnum = ButtonType;
public error = false;
private copiedDay: any;
......
<div *ngIf="openned" class="modalBackground">
<div class="modal">
<div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
<h3>ATTENTION</h3>
<div class="headerModal" fxLayout="row" fxLayoutAlign="space-between center">
<div class="empty"></div>
<h3>ATTENTION</h3>
<svg class="hide" aria-hidden="true" (click)="closeModal(false)">
<use [attr.xlink:href]="'assets/form/sprite.svg#close'"></use>
</svg>
</div>
<p>{{ content }}</p>
<div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
<button class="btn-primary small" (click)="closeModal(false)">Annuler</button>
<button class="btn-primary small leave" (click)="closeModal(true)">Confirmer</button>
<div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="8px">
<app-button (action)="closeModal(false)" [text]="'Annuler'" [style]="buttonTypeEnum.Secondary"></app-button>
<app-button
(action)="closeModal(true)"
[text]="customConfirmationText ? customConfirmationText : 'Confirmer'"
[style]="buttonTypeEnum.Primary"
></app-button>
</div>
</div>
</div>
......