From cb2607f6a28ed51ad1d4cf985a0baf8b75329ebf Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Wed, 3 Feb 2021 17:10:50 +0100
Subject: [PATCH] fix: remove menu-phone component and fix bug
---
src/app/app.module.ts | 2 -
src/app/header/header.component.html | 27 ++++++-
src/app/header/header.component.scss | 74 +++++++++++++++---
src/app/menu-phone/menu-phone.component.html | 37 ---------
src/app/menu-phone/menu-phone.component.scss | 77 -------------------
.../menu-phone/menu-phone.component.spec.ts | 26 -------
src/app/menu-phone/menu-phone.component.ts | 31 --------
src/app/profile/profile.component.html | 2 +-
src/assets/ico/sprite.svg | 8 ++
src/assets/logos/ram_logo.svg | 10 +++
10 files changed, 108 insertions(+), 186 deletions(-)
delete mode 100644 src/app/menu-phone/menu-phone.component.html
delete mode 100644 src/app/menu-phone/menu-phone.component.scss
delete mode 100644 src/app/menu-phone/menu-phone.component.spec.ts
delete mode 100644 src/app/menu-phone/menu-phone.component.ts
create mode 100644 src/assets/logos/ram_logo.svg
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6f992a733..5edc4cd02 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -19,7 +19,6 @@ import { StructureOpeningStatusComponent } from './structure-list/components/str
import { ModalFilterComponent } from './structure-list/components/modal-filter/modal-filter.component';
import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
import { AboutComponent } from './about/about.component';
-import { MenuPhoneComponent } from './menu-phone/menu-phone.component';
import { FormComponent } from './form/form.component';
import { UserVerificationComponent } from './user-verification/user-verification.component';
import { AuthGuard } from './guards/auth.guard';
@@ -44,7 +43,6 @@ import { AdminGuard } from './guards/admin.guard';
StructureOpeningStatusComponent,
LegalNoticeComponent,
AboutComponent,
- MenuPhoneComponent,
UserVerificationComponent,
ResetEmailComponent,
ResetPasswordComponent,
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 26670df24..81feb9cf3 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -5,8 +5,8 @@
<p>Réseau des acteurs de l'inclusion numérique de la métropole de Lyon</p>
</div>
</div>
- <div class="containerIconMenu" (click)="openMenu()">
- <span class="ico-menu"></span>
+ <div class="containerIconMenu">
+ <app-svg-icon (click)="openMenu()" [type]="'ico'" [icon]="'menu'" [iconClass]="'icon-32'"></app-svg-icon>
</div>
<div fxLayout="row" class="right-header" fxLayoutAlign="center center" fxLayoutGap="3vw">
<a routerLink="/home" [routerLinkActive]="'active'" i18n>Les acteurs</a>
@@ -22,6 +22,27 @@
<button *ngIf="!isLoggedIn" (click)="isPopUpOpen = !isPopUpOpen">Se connecter</button>
</div>
</div>
-<app-menu-phone *ngIf="showMenu" (closeEvent)="closeMenu($event)"></app-menu-phone>
+<div *ngIf="showMenu" class="mobile-menu" fxLayout="row">
+ <div class="outside" (click)="closeMenu()"></div>
+ <div class="menu-content" fxLayout="column" fxLayoutAlign="space-between">
+ <div>
+ <div class="title" fxLayout="row" fxLayoutAlign="space-between center">
+ <span>Menu</span>
+ <div (click)="closeMenu()" class="ico-close-details"></div>
+ </div>
+ <div fxLayout="column" class="right-header" fxLayoutAlign="none baseline" fxLayoutGap="5vw">
+ <a routerLink="/home" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Les acteurs</a>
+ <a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'">Administration</a>
+ </div>
+ </div>
+ <div>
+ <button *ngIf="isLoggedIn" class="red" routerLink="/profile" [routerLinkActive]="'active'" (click)="closeMenu()">
+ {{ displayName }}
+ </button>
+ <button *ngIf="!isLoggedIn" (click)="isPopUpOpen = !isPopUpOpen; closeMenu()">Se connecter</button>
+ </div>
+ </div>
+</div>
+
<app-signup-modal *ngIf="displaySignUp" [openned]="isPopUpOpen" (closed)="closeSignUpModal($event)"></app-signup-modal>
<app-signin-modal *ngIf="!displaySignUp" [openned]="isPopUpOpen" (closed)="closeSignInModal()"></app-signin-modal>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 67a3956d4..c6d868299 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -5,6 +5,7 @@
@import '../../assets/scss/breakpoint';
@import '../../assets/scss/shapes';
@import '../../assets/scss/buttons';
+@import '../../assets/scss/z-index';
.header {
height: $header-height;
@@ -14,15 +15,6 @@
border-bottom: solid 1px $grey-4;
background-color: $white;
padding: 0 20px;
- a {
- color: $grey-2;
- &.active {
- font-weight: bold;
- color: $grey-1;
- border-bottom: 2px solid $red-default;
- text-decoration: none;
- }
- }
.right-header {
@media #{$tablet} {
display: none !important;
@@ -52,6 +44,16 @@ button {
}
}
+a {
+ color: $grey-2;
+ &.active {
+ font-weight: bold;
+ color: $grey-1;
+ border-bottom: 2px solid $red-default;
+ text-decoration: none;
+ }
+}
+
@media print {
div {
display: none !important;
@@ -71,3 +73,57 @@ button {
display: none !important;
}
}
+
+@keyframes slideMenu {
+ from {
+ width: 0;
+ }
+ to {
+ width: 100%;
+ }
+}
+@keyframes background-fade {
+ 0% {
+ background: none;
+ }
+ 100% {
+ background: none;
+ }
+}
+.mobile-menu {
+ position: fixed;
+ top: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ z-index: $menu-phone-z-index;
+ animation: slideMenu 0.5s;
+ .menu-content {
+ background-color: $white;
+ height: 100vh;
+ width: 350px;
+ padding: 27px 25px;
+ }
+ .outside {
+ width: calc(100% - 350px);
+ height: 100vh;
+ opacity: 0.65;
+ animation: background-fade 0.1s;
+ background-color: $black;
+ }
+}
+.title {
+ margin-bottom: 35px;
+ @include cn-regular-28;
+ span {
+ color: $grey-2;
+ }
+}
+.footer {
+ a {
+ height: unset;
+ display: table-cell;
+ vertical-align: middle;
+ margin: auto 0 auto 0;
+ }
+}
diff --git a/src/app/menu-phone/menu-phone.component.html b/src/app/menu-phone/menu-phone.component.html
deleted file mode 100644
index b473206e4..000000000
--- a/src/app/menu-phone/menu-phone.component.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<div class="containerMenu" fxLayout="row">
- <div class="outside" (click)="closeMenu()"></div>
- <div class="contentMenu" fxLayout="column" fxLayoutAlign="space-between">
- <div>
- <div class="titleFilter" fxLayout="row" fxLayoutAlign="space-between center">
- <span>Menu</span>
- <div (click)="closeMenu()" class="ico-close-details"></div>
- </div>
- <div fxLayout="column" class="right-header" fxLayoutAlign="none baseline" fxLayoutGap="5vw">
- <a routerLink="/home" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Les acteurs</a>
- <!-- <a routerLink="/resources" [routerLinkActive]="'active'" i18n>Ressources</a> -->
- <!-- <a routerLink="/projects" [routerLinkActive]="'active'" i18n>Projets</a> -->
- <a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'">Administration</a>
- <!--<a routerLink="/login" [routerLinkActive]="'active'" i18n><span class="clickable ico-mglass purple"></span></a>
- <a routerLink="/home" [routerLinkActive]="'active'" i18n
- ><span class="ico-profile" fxLayout="column" fxLayoutAlign="center center">
- <span class="head"></span>
- <span class="body"></span> </span
- ></a> -->
- <button
- *ngIf="isLoggedIn"
- class="red"
- routerLink="/profile"
- [routerLinkActive]="'active'"
- (click)="closeMenu()"
- >
- {{ displayName }}
- </button>
- <button *ngIf="!isLoggedIn" (click)="isPopUpOpen = !isPopUpOpen; closeMenu()">Se connecter</button>
- </div>
- </div>
- <!--<div class="footer" fxLayout="row" fxLayoutGap="1.5vh">
- <app-svg-icon [type]="'ico'" [iconClass]="'icon-32'" [icon]="'user'" [iconColor]="'currentColor'"></app-svg-icon>
- <a>Mon compte</a>
- </div>-->
- </div>
-</div>
diff --git a/src/app/menu-phone/menu-phone.component.scss b/src/app/menu-phone/menu-phone.component.scss
deleted file mode 100644
index 21f6d72cc..000000000
--- a/src/app/menu-phone/menu-phone.component.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-@import '../../assets/scss/color';
-@import '../../assets/scss/z-index';
-@import '../../assets/scss/typography';
-@import '../../assets/scss/breakpoint';
-@import '../../assets/scss/buttons';
-
-@keyframes slideMenu {
- from {
- width: 0;
- }
- to {
- width: 100%;
- }
-}
-@keyframes background-fade {
- 0% {
- background: none;
- }
- 100% {
- background: none;
- }
-}
-.containerMenu {
- position: fixed;
- top: 0;
- right: 0;
- width: 100%;
- height: 100%;
- z-index: $menu-phone-z-index;
- animation: slideMenu 0.5s;
- .contentMenu {
- background-color: $white;
- height: 100vh;
- width: 350px;
- padding: 27px 25px;
- }
- .outside {
- width: calc(100% - 350px);
- height: 100vh;
- opacity: 0.65;
- animation: background-fade 0.1s;
- background-color: $black;
- }
-}
-.titleFilter {
- margin-bottom: 35px;
- @include cn-regular-28;
- span {
- color: $grey-2;
- }
-}
-.footer {
- a {
- height: unset;
- display: table-cell;
- vertical-align: middle;
- margin: auto 0 auto 0;
- }
-}
-
-a {
- color: $grey-2;
- &.active {
- font-weight: bold;
- color: $grey-1;
- border-bottom: 2px solid $red-default;
- text-decoration: none;
- }
-}
-
-button {
- @include btn-grey;
- &.red {
- @include btn-red;
- border: none;
- }
-}
diff --git a/src/app/menu-phone/menu-phone.component.spec.ts b/src/app/menu-phone/menu-phone.component.spec.ts
deleted file mode 100644
index 718d9c841..000000000
--- a/src/app/menu-phone/menu-phone.component.spec.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { MenuPhoneComponent } from './menu-phone.component';
-
-describe('HeaderComponent', () => {
- let component: MenuPhoneComponent;
- let fixture: ComponentFixture<MenuPhoneComponent>;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [RouterTestingModule],
- declarations: [MenuPhoneComponent],
- }).compileComponents();
- });
-
- beforeEach(() => {
- fixture = TestBed.createComponent(MenuPhoneComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/menu-phone/menu-phone.component.ts b/src/app/menu-phone/menu-phone.component.ts
deleted file mode 100644
index b9c375e93..000000000
--- a/src/app/menu-phone/menu-phone.component.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { ProfileService } from '../profile/services/profile.service';
-import { AuthService } from '../services/auth.service';
-
-@Component({
- selector: 'app-menu-phone',
- templateUrl: './menu-phone.component.html',
- styleUrls: ['./menu-phone.component.scss'],
-})
-export class MenuPhoneComponent implements OnInit {
- constructor(private authService: AuthService, private profileService: ProfileService) {}
-
- @Output() closeEvent = new EventEmitter();
- ngOnInit(): void {}
-
- closeMenu(): void {
- this.closeEvent.emit();
- }
-
- public get isLoggedIn(): boolean {
- return this.authService.isLoggedIn();
- }
-
- public get isAdmin(): boolean {
- return this.profileService.isAdmin();
- }
-
- public get displayName(): string {
- return this.authService.getUsernameDisplay();
- }
-}
diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html
index 4bb888233..a26b3822a 100644
--- a/src/app/profile/profile.component.html
+++ b/src/app/profile/profile.component.html
@@ -4,7 +4,7 @@
<div *ngIf="userProfile" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
<p>Id: {{ userProfile._id }}</p>
<p>Email: {{ userProfile.email }}</p>
- <button (click)="logout()">Logout</button>
+ <button (click)="logout()">Se déconnecter</button>
<p fxLayout="column" *ngIf="userProfile.structuresLink.length > 0">
Mes structures :
<span *ngFor="let structureId of userProfile.structuresLink">
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index 342b08c58..5a89acce0 100644
--- a/src/assets/ico/sprite.svg
+++ b/src/assets/ico/sprite.svg
@@ -96,6 +96,14 @@
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C5.44772 12 5 12.4477 5 13V21H9V17H23V21H27V13C27 12.4477 26.5523 12 26 12H6Z"/>
</symbol>
+
+<symbol id="menu" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="5" y="9" width="23" height="2" rx="1" fill="#333333"/>
+<rect x="5" y="15" width="23" height="2" rx="1" fill="#333333"/>
+<rect x="5" y="21" width="23" height="2" rx="1" fill="#333333"/>
+</symbol>
+
+
<symbol id="calendar" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path d="M8 10H5V13H8V10Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 2C5.44772 2 5 2.44772 5 3V4H3C2.44772 4 2 4.44772 2 5V19C2 19.5523 2.44772 20 3 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H17V3C17 2.44772 16.5523 2 16 2C15.4477 2 15 2.44772 15 3V4H7V3C7 2.44772 6.55229 2 6 2ZM4 9V18H18V9H4Z" fill="#333333"/>
diff --git a/src/assets/logos/ram_logo.svg b/src/assets/logos/ram_logo.svg
new file mode 100644
index 000000000..48c8f1d64
--- /dev/null
+++ b/src/assets/logos/ram_logo.svg
@@ -0,0 +1,10 @@
+<svg width="121" height="29" viewBox="0 0 121 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M54 27.5C54 26.6716 54.6716 26 55.5 26H67.5C68.3284 26 69 26.6716 69 27.5V27.5C69 28.3284 68.3284 29 67.5 29H55.5C54.6716 29 54 28.3284 54 27.5V27.5Z" fill="#ED3939"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M71 8H74V8.80269C74.8825 8.29218 75.9071 8 77 8C80.3137 8 83 10.6863 83 14V27.5C83 28.3284 82.3284 29 81.5 29C80.6716 29 80 28.3284 80 27.5V14C80 12.3431 78.6569 11 77 11C75.3431 11 74 12.3431 74 14V22V27.5C74 28.3284 73.3284 29 72.5 29C71.6716 29 71 28.3284 71 27.5V22V14V8Z" fill="#4F4F4F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M103 8H100V14V22V27.5C100 28.3284 100.672 29 101.5 29C102.328 29 103 28.3284 103 27.5V22V14C103 12.3431 104.343 11 106 11C107.657 11 109 12.3431 109 14V27.5C109 28.3284 109.672 29 110.5 29C111.328 29 112 28.3284 112 27.5V14C112 12.3431 113.343 11 115 11C116.657 11 118 12.3431 118 14V27.5C118 28.3284 118.672 29 119.5 29C120.328 29 121 28.3284 121 27.5V14C121 10.6863 118.314 8 115 8C113.208 8 111.599 8.78563 110.5 10.0313C109.401 8.78563 107.792 8 106 8C104.907 8 103.883 8.29218 103 8.80269V8Z" fill="#4F4F4F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M85.5 23C85.5 26.3137 88.1863 29 91.5 29C94.8137 29 97.5 26.3137 97.5 23V9.5C97.5 8.67157 96.8284 8 96 8C95.1716 8 94.5 8.67157 94.5 9.5V23C94.5 24.6569 93.1569 26 91.5 26C89.8431 26 88.5 24.6569 88.5 23V9.5C88.5 8.67157 87.8284 8 87 8C86.1716 8 85.5 8.67157 85.5 9.5V23Z" fill="#4F4F4F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34 11C32.3115 11 30.5 12.747 30.5 15.5C30.5 16.3284 31.1716 17 32 17H34.75C37.2353 17 39.25 19.0147 39.25 21.5H39.2268C39.2268 25.3744 36.5611 29 32.7268 29C30.6938 29 28.9456 27.9361 27.7976 26.3968C27.3023 25.7327 27.4391 24.7929 28.1032 24.2976C28.7672 23.8023 29.7071 23.9391 30.2024 24.6032C30.8854 25.5189 31.7982 26 32.7268 26C34.4154 26 36.2268 24.253 36.2268 21.5C36.2268 21.4365 36.2308 21.374 36.2384 21.3126C36.1462 20.5726 35.515 20 34.75 20H32C29.5147 20 27.5 17.9853 27.5 15.5C27.5 11.6256 30.1657 8 34 8C36.0331 8 37.7812 9.06393 38.9292 10.6032C39.4245 11.2673 39.2877 12.2071 38.6237 12.7024C37.9596 13.1977 37.0198 13.0609 36.5245 12.3968C35.8415 11.4811 34.9286 11 34 11Z" fill="#4F4F4F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 3H6C7.65685 3 9 4.34315 9 6V13C9 14.6569 7.65685 16 6 16H4.5H3V3ZM0 17.5V0H6C9.31371 0 12 2.68629 12 6V13C12 15.0173 11.0044 16.8022 9.47774 17.8899C11.025 19.2638 12 21.268 12 23.5V27.5C12 28.3284 11.3284 29 10.5 29C9.67157 29 9 28.3284 9 27.5V23.5C9 21.0147 6.98528 19 4.5 19H3V27.5C3 28.3284 2.32843 29 1.5 29C0.671573 29 0 28.3284 0 27.5V19V17.5Z" fill="#4F4F4F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50 23V14C50 12.3431 48.6569 11 47 11C45.3431 11 44 12.3431 44 14V23C44 24.6569 45.3431 26 47 26C48.6569 26 50 24.6569 50 23ZM47 8C43.6863 8 41 10.6863 41 14V23C41 26.3137 43.6863 29 47 29C50.3137 29 53 26.3137 53 23V14C53 10.6863 50.3137 8 47 8Z" fill="#4F4F4F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 14V14.5C23 16.1569 21.6569 17.5 20 17.5H18C17.4477 17.5 17 17.0523 17 16.5V14.5V14C17 12.3431 18.3431 11 20 11C21.6569 11 23 12.3431 23 14ZM17 20.374C17.3196 20.4562 17.6547 20.5 18 20.5H20C23.3137 20.5 26 17.8137 26 14.5V14C26 10.6863 23.3137 8 20 8C16.6863 8 14 10.6863 14 14V14.5V16.5V23.5C14 26.5376 16.4624 29 19.5 29H24C24.8284 29 25.5 28.3284 25.5 27.5C25.5 26.6716 24.8284 26 24 26H19.5C18.1193 26 17 24.8807 17 23.5V20.374Z" fill="#4F4F4F"/>
+</svg>
--
GitLab