From 2416feda66d5c8b659d9b997ec35f6c56917838a Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Fri, 29 Jan 2021 08:41:14 +0100
Subject: [PATCH] fix(form) : add menu to form
---
src/app/app.module.ts | 1 +
src/app/form/form.component.html | 14 +++++-
src/app/form/form.component.scss | 50 +++++++++++++++++++-
src/app/form/form.component.ts | 23 +++++++--
src/app/header/header.component.ts | 6 ++-
src/app/menu-phone/menu-phone.component.html | 8 ++--
src/app/menu-phone/menu-phone.component.ts | 6 +--
src/app/profile/profile.module.ts | 5 +-
src/assets/scss/_typography.scss | 2 +-
src/assets/scss/_z-index.scss | 1 +
10 files changed, 97 insertions(+), 19 deletions(-)
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6f992a733..89ece5601 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -48,6 +48,7 @@ import { AdminGuard } from './guards/admin.guard';
UserVerificationComponent,
ResetEmailComponent,
ResetPasswordComponent,
+ FormComponent,
],
imports: [BrowserModule, HttpClientModule, AppRoutingModule, SharedModule, MapModule, ProfileModule, AdminModule],
providers: [
diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html
index 3c34647cc..1d5973c3c 100644
--- a/src/app/form/form.component.html
+++ b/src/app/form/form.component.html
@@ -244,7 +244,19 @@
></app-create-account-form>
</div>
<div class="form" fxLayout="column">
- <app-menu-phone (closeEvent)="closeMenu($event)"></app-menu-phone>
+ <div *ngIf="showModalExit" class="modalExitContainer">
+ <div class="modal">
+ <div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
+ <h3>ATTENTION</h3>
+ <p>Il vous faudra de nouveau remplir le formulaire si vous quittez</p>
+ <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
+ <button class="btn leave" (click)="leaveForm(showModalExit)" >Quitter</button>
+ <button class="btn" (click)="leaveForm(null)">Annuler</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <app-menu-phone *ngIf="showMenu" (closeEvent)="closeMenu($event)"></app-menu-phone>
<div class="header">
<div class="container-icoMenu">
<div class="block-iconMenu" (click)="toggleMenu()">
diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss
index cf9235f32..cce0fa17e 100644
--- a/src/app/form/form.component.scss
+++ b/src/app/form/form.component.scss
@@ -2,6 +2,8 @@
@import '../../assets/scss/breakpoint';
@import '../../assets/scss/color';
@import '../../assets/scss/typography';
+@import '../../assets/scss/shapes';
+@import '../../assets/scss/z-index';
$progressBar-height: 50px;
@@ -11,7 +13,7 @@ $progressBar-height: 50px;
width: 100vw;
height: calc(100vh - #{$header-height} - #{$footer-height});
top: #{$header-height};
- z-index: 9999;
+ z-index: $structure-details-z-index;
overflow: auto;
@media #{$tablet} {
height: calc(100vh);
@@ -436,3 +438,49 @@ img {
width: 100%;
margin-right: 12px;
}
+
+.modalExitContainer {
+ width: 100%;
+ height: 100%;
+ z-index: $modal-confirmation-z-index;
+ position: absolute;
+ content: '';
+ top: 0;
+ background: rgba(0, 0, 0, 0.65);
+ .modal {
+ .contentModal {
+ width: 100%;
+ background: rgba(255, 255, 255, 1);
+ padding: 35px 20px 18px 20px;
+ h3 {
+ @include cn-bold-18;
+ color: $orange-warning;
+ }
+ p {
+ @include cn-bold-16;
+ color: $grey-1;
+ text-align: center;
+ }
+ .footerModal {
+ width: 100%;
+ margin-top: 14px;
+ @include cn-bold-16;
+ .btn {
+ width: 149px;
+ &.leave {
+ background: none;
+ color: $grey-1;
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+ width: 350px;
+ margin: auto;
+ border-radius: 6px;
+ @include background-hash;
+ border: 1px solid $grey-4;
+ margin-top: 50vh;
+ transform: translateY(-50%);
+ }
+}
diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts
index 53f6c250d..f96d84812 100644
--- a/src/app/form/form.component.ts
+++ b/src/app/form/form.component.ts
@@ -18,6 +18,7 @@ import { Address } from '../models/address.model';
import { Week } from '../models/week.model';
import { Module } from '../structure-list/models/module.model';
import { Equipment } from '../structure-list/enum/equipment.enum';
+import { Router } from '@angular/router';
@Component({
selector: 'app-structureForm',
@@ -59,7 +60,7 @@ export class FormComponent implements OnInit {
public userAcceptSavedDate = false;
public showMenu = false;
-
+ public showModalExit: string = null;
//collapse var
public showWebsite: boolean;
public showSocialNetwork: boolean;
@@ -69,7 +70,8 @@ export class FormComponent implements OnInit {
constructor(
private structureService: StructureService,
private searchService: SearchService,
- private profileService: ProfileService
+ private profileService: ProfileService,
+ private router: Router
) {}
ngOnInit(): void {
@@ -534,7 +536,20 @@ export class FormComponent implements OnInit {
this.showMenu = !this.showMenu;
console.log(this.showMenu);
}
- public closeMenu(e): void {
- console.log(e);
+
+ public leaveForm(route: string): void {
+ if (route) {
+ this.router.navigateByUrl(route);
+ } else {
+ this.showModalExit = null;
+ }
+ }
+
+ public closeMenu(route: string): void {
+ if (route) {
+ this.showModalExit = route;
+ } else {
+ this.showMenu = false;
+ }
}
}
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 22e7fc842..e04f35036 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
import { ProfileService } from '../profile/services/profile.service';
import { AuthService } from '../services/auth.service';
@@ -12,13 +13,14 @@ export class HeaderComponent implements OnInit {
public isPopUpOpen = false;
public displaySignUp = true;
- constructor(private authService: AuthService, private profileService: ProfileService) {}
+ constructor(private authService: AuthService, private profileService: ProfileService, private router: Router) {}
ngOnInit(): void {}
public openMenu(): void {
this.showMenu = true;
}
- public closeMenu(): void {
+ public closeMenu(route: string): void {
+ this.router.navigateByUrl(route);
this.showMenu = false;
}
diff --git a/src/app/menu-phone/menu-phone.component.html b/src/app/menu-phone/menu-phone.component.html
index 3551f848e..72aaf670c 100644
--- a/src/app/menu-phone/menu-phone.component.html
+++ b/src/app/menu-phone/menu-phone.component.html
@@ -1,16 +1,16 @@
<div class="containerMenu" fxLayout="row">
- <div class="outside" (click)="closeMenu()"></div>
+ <div class="outside" (click)="closeMenu(null)"></div>
<div class="contentMenu" fxLayout="column" fxLayoutAlign="space-between">
<div>
<div class="titleFilter" fxLayout="row" fxLayoutAlign="space-between">
<span>Menu</span>
- <div (click)="closeMenu()" class="ico-close-details"></div>
+ <div (click)="closeMenu(null)" class="ico-close-details"></div>
</div>
<div fxLayout="column" class="right-header" fxLayoutGap="3vw">
- <a routerLink="/home" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Les acteurs</a>
+ <a (click)="closeMenu('home')" i18n>Les acteurs</a>
<!-- <a routerLink="/resources" [routerLinkActive]="'active'" i18n>Ressources</a>
<a routerLink="/projects" [routerLinkActive]="'active'" i18n>Projets</a> -->
- <a routerLink="/about" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Qui sommes-nous ?</a>
+ <a (click)="closeMenu('about')" i18n>Qui sommes-nous ?</a>
<a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'">Administration</a>
<!--<a routerLink="/login" [routerLinkActive]="'active'" i18n><span class="clickable ico-mglass purple"></span></a>
diff --git a/src/app/menu-phone/menu-phone.component.ts b/src/app/menu-phone/menu-phone.component.ts
index a0276b4c6..ecb50fa07 100644
--- a/src/app/menu-phone/menu-phone.component.ts
+++ b/src/app/menu-phone/menu-phone.component.ts
@@ -10,11 +10,11 @@ import { AuthService } from '../services/auth.service';
export class MenuPhoneComponent implements OnInit {
constructor(private authService: AuthService, private profileService: ProfileService) {}
- @Output() closeEvent = new EventEmitter();
+ @Output() closeEvent = new EventEmitter<string>();
ngOnInit(): void {}
- closeMenu(): void {
- this.closeEvent.emit();
+ closeMenu(route: string): void {
+ this.closeEvent.emit(route);
}
public get isLoggedIn(): boolean {
diff --git a/src/app/profile/profile.module.ts b/src/app/profile/profile.module.ts
index 1f86c78ac..a9427003f 100644
--- a/src/app/profile/profile.module.ts
+++ b/src/app/profile/profile.module.ts
@@ -3,11 +3,10 @@ import { ProfileComponent } from './profile.component';
import { SharedModule } from '../shared/shared.module';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
-import { FormComponent } from '../form/form.component';
@NgModule({
imports: [CommonModule, BrowserModule, SharedModule],
- declarations: [ProfileComponent, FormComponent],
- exports: [ProfileComponent, FormComponent],
+ declarations: [ProfileComponent],
+ exports: [ProfileComponent],
})
export class ProfileModule {}
diff --git a/src/assets/scss/_typography.scss b/src/assets/scss/_typography.scss
index 5efdf238c..8d7f4162c 100644
--- a/src/assets/scss/_typography.scss
+++ b/src/assets/scss/_typography.scss
@@ -9,7 +9,7 @@ $font-size-medium: 1.375em; // 22px
$font-size-xmedium: 1.5em; // 24px
$font-size-large: 1.75em; // 28px
$font-size-xlarge: 2em; // 32px
-$font-size-medium-mobile: 1em;
+$font-size-medium-mobile: 1.1em;
html,
body,
diff --git a/src/assets/scss/_z-index.scss b/src/assets/scss/_z-index.scss
index 1f6dbcd22..d9bdd9020 100644
--- a/src/assets/scss/_z-index.scss
+++ b/src/assets/scss/_z-index.scss
@@ -3,3 +3,4 @@ $modal-add-structure-z-index: 1002;
$modal-filter-structure-z-index: 1002;
$modal-menu-phone-z-index: 1002;
$btn-phone-switch-map-list-z-index: 1001;
+$modal-confirmation-z-index: 1003;
--
GitLab