Ajustement du menu

src/app/modules/shared/components/employee-info/employee-info.component.html

@@ -1,7 +0,0 @@
-<div *ngIf="employee" class="employee-info-container d-flex flex-column">
-  <labeled-icon *ngIf="authenticated" icon="account" label="{{employee.firstName}} {{employee.lastName}}"></labeled-icon>
-  <div class="d-flex flex-row">
-    <labeled-icon *ngIf="authenticated" icon="pound" [label]="employee.id.toString()"></labeled-icon>
-    <labeled-icon *ngIf="employeeInGroup" class="employee-info-group" icon="account-multiple" [label]="employee.group.name"></labeled-icon>
-  </div>
-</div>

src/app/modules/shared/components/employee-info/employee-info.component.sass

@@ -1,12 +0,0 @@
-@import "../../../../../custom-theme"
-
-p, labeled-icon
-  margin: 0
-  color: $light-primary-text
-
-.employee-info-container
-  margin-top: .85rem
-  margin-right: 1rem
-
-.employee-info-group
-  margin-left: 0.7rem

src/app/modules/shared/components/employee-info/employee-menu.component.html

@@ -0,0 +1,45 @@
+<div class="employee-menu-wrapper">
+  <div *ngIf="employee" class="employee-info-wrapper d-flex flex-column" (click)="menuEnabled = !menuEnabled">
+    <labeled-icon
+      *ngIf="authenticated"
+      icon="account"
+      label="{{employee.firstName}} {{employee.lastName}}">
+    </labeled-icon>
+    <div class="d-flex flex-row">
+      <labeled-icon
+        *ngIf="authenticated"
+        icon="pound"
+        [label]="employee.id.toString()">
+      </labeled-icon>
+      <labeled-icon
+        *ngIf="employeeInGroup"
+        class="employee-info-group"
+        icon="account-multiple"
+        [label]="employee.group.name">
+      </labeled-icon>
+    </div>
+  </div>
+
+  <button
+    *ngIf="!authenticated && !employeeInGroup"
+    routerLink="/account/logout">
+    Connexion
+  </button>
+
+  <mat-action-list *ngIf="menuEnabled">
+    <button
+      *ngIf="!authenticated && employeeInGroup"
+      mat-list-item
+      class="employee-menu-item-login"
+      routerLink="/account/login">
+      Connexion
+    </button>
+    <button
+      *ngIf="authenticated"
+      mat-list-item
+      class="employee-menu-item-logout"
+      routerLink="/account/logout">
+      Déconnexion
+    </button>
+  </mat-action-list>
+</div>

src/app/modules/shared/components/employee-info/employee-menu.component.sass

@@ -0,0 +1,38 @@
+@import "../../../../../custom-theme"
+
+p, labeled-icon
+  margin: 0
+  color: $light-primary-text
+
+.employee-info-wrapper
+  margin: 1rem 1rem 0
+  cursor: pointer
+
+  &:hover labeled-icon
+    text-decoration: underline
+
+.employee-info-group
+  margin-left: 0.7rem
+
+mat-action-list
+  position: absolute
+  transform: translateY(-2px)
+  z-index: 91
+
+button
+  background-color: $color-primary !important
+  color: $light-primary-text !important
+
+  &:hover
+    background-color: $color-primary !important
+    text-decoration: underline
+
+  &:not(.mat-list-item)
+    font-size: 16px
+    font-weight: 400
+    line-height: 24px
+    margin-top: 16px
+    padding-left: 16px
+    padding-right: 16px
+    height: 48px
+    border: none

src/app/modules/shared/components/employee-info/employee-menu.component.ts

@@ -5,14 +5,15 @@ import {Subject} from "rxjs";
 import {takeUntil} from "rxjs/operators";
 
 @Component({
-  selector: 'cre-employee-info',
-  templateUrl: './employee-info.component.html',
-  styleUrls: ['./employee-info.component.sass']
+  selector: 'cre-employee-menu',
+  templateUrl: './employee-menu.component.html',
+  styleUrls: ['./employee-menu.component.sass']
 })
-export class EmployeeInfoComponent implements OnInit, OnDestroy {
+export class EmployeeMenuComponent implements OnInit, OnDestroy {
   authenticated = false
   employee: Employee = null
   employeeInGroup = false
+  menuEnabled = false
 
   private destroy$ = new Subject<boolean>()
 

src/app/modules/shared/components/header/header.component.html

@@ -16,7 +16,7 @@
     </div>
   </nav>
 
-  <cre-employee-info></cre-employee-info>
+  <cre-employee-menu></cre-employee-menu>
   <img
     class="flex-grow-0"
     src="assets/logo.png"

src/app/modules/shared/components/header/header.component.ts

@@ -15,9 +15,7 @@ export class HeaderComponent extends SubscribingComponent {
   links: HeaderLink[] = [
     {route: '/color', title: 'Couleurs', requiredPermission: EmployeePermission.VIEW_RECIPES},
     {route: '/catalog', title: 'Catalogue', requiredPermission: EmployeePermission.VIEW_CATALOG},
-    {route: '/admin', title: 'Administration', requiredPermission: EmployeePermission.VIEW_USERS},
-    {route: '/account/login', title: 'Connexion', enabled: true},
-    {route: '/account/logout', title: 'Déconnexion', enabled: false},
+    {route: '/admin', title: 'Administration', requiredPermission: EmployeePermission.VIEW_USERS}
   ]
   _activeLink = this.links[0].route
 
@@ -48,10 +46,10 @@ export class HeaderComponent extends SubscribingComponent {
     )
 
     // Auth status
-    this.updateEnabledLinks(this.appState.isAuthenticated, this.appState.authenticatedEmployee)
+    this.updateEnabledLinks(this.appState.authenticatedEmployee)
     this.subscribe(
       this.appState.authenticatedUser$,
-      authentication => this.updateEnabledLinks(authentication.authenticated, authentication.authenticatedUser)
+      authentication => this.updateEnabledLinks(authentication.authenticatedUser)
     )
   }
 
@@ -72,20 +70,13 @@ export class HeaderComponent extends SubscribingComponent {
     return this._activeLink
   }
 
-  private updateEnabledLinks(authenticated: boolean, employee: Employee) {
-    this.link('/account/login').enabled = !authenticated
-    this.link('/account/logout').enabled = authenticated
-
+  private updateEnabledLinks(employee: Employee) {
     this.links.forEach(l => {
       if (l.requiredPermission) {
         l.enabled = employee && employee.permissions.indexOf(l.requiredPermission) >= 0
       }
     })
   }
-
-  private link(route: string) {
-    return this.links.filter(l => l.route === route)[0]
-  }
 }
 
 class HeaderLink {

src/app/modules/shared/components/nav/nav.component.sass

@@ -2,7 +2,7 @@
 
 nav
   position: relative
-  z-index: 99
+  z-index: 90
   padding-bottom: 1px
 
   a

src/app/modules/shared/shared.module.ts

@@ -7,7 +7,7 @@ import {MatFormFieldModule} from '@angular/material/form-field'
 import {MatInputModule} from '@angular/material/input'
 import {MatIconModule} from '@angular/material/icon'
 import {FormsModule, ReactiveFormsModule} from '@angular/forms'
-import {EmployeeInfoComponent} from './components/employee-info/employee-info.component'
+import {EmployeeMenuComponent} from './components/employee-info/employee-menu.component'
 import {LabeledIconComponent} from './components/labeled-icon/labeled-icon.component'
 import {MatTableModule} from '@angular/material/table'
 import {CommonModule} from '@angular/common'
@@ -35,7 +35,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'
 
 
 @NgModule({
-  declarations: [HeaderComponent, EmployeeInfoComponent, LabeledIconComponent, ConfirmBoxComponent, PermissionsListComponent, PermissionsFieldComponent, NavComponent, EntityListComponent, EntityAddComponent, EntityEditComponent, FileButtonComponent, GlobalAlertHandlerComponent, SliderFieldComponent, LoadingWheelComponent],
+  declarations: [HeaderComponent, EmployeeMenuComponent, LabeledIconComponent, ConfirmBoxComponent, PermissionsListComponent, PermissionsFieldComponent, NavComponent, EntityListComponent, EntityAddComponent, EntityEditComponent, FileButtonComponent, GlobalAlertHandlerComponent, SliderFieldComponent, LoadingWheelComponent],
   exports: [
     CommonModule,
     HttpClientModule,
@@ -78,6 +78,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'
     MatInputModule,
     MatSelectModule,
     MatOptionModule,
+    MatListModule,
     MatSliderModule,
     MatProgressSpinnerModule,
     ReactiveFormsModule,