Ajout du style des alertes

src/app/modules/shared/components/global-alert-handler/global-alert-handler.component.html

@@ -1,9 +1,11 @@
-<ng-container *ngFor="let alert of alertBuffer">
+<div class="alerts-wrapper" [class.subnav-margin]="isSubNavOpen">
   <div
+    *ngFor="let alert of alertBuffer"
+    [@fadeIn]
     class="alert"
     [class.alert-success]="alert.alert.type === SUCCESS_ALERT_TYPE"
     [class.alert-warning]="alert.alert.type === WARNING_ALERT_TYPE"
     [class.alert-danger]="alert.alert.type === ERROR_ALERT_TYPE">
     {{alert.alert.message}}
   </div>
-</ng-container>
+</div>

src/app/modules/shared/components/global-alert-handler/global-alert-handler.component.sass

@@ -0,0 +1,28 @@
+@import '../../../../../custom-theme'
+
+.alerts-wrapper
+  position: absolute
+  width: 100vw
+  z-index: 50
+
+  &.subnav-margin
+    margin-top: 3rem
+
+  .alert
+    width: max-content
+    margin: 1rem auto
+
+  .alert-danger
+    color: map-get($theme-error, 900)
+    border-color: map-get($theme-error, 900)
+    background-color: map-get($theme-error, 100)
+
+  .alert-warning
+    color: map-get($theme-warning, 900)
+    border-color: map-get($theme-warning, 900)
+    background-color: map-get($theme-warning, 100)
+
+  .alert-success
+    color: map-get($theme-accent, 900)
+    border-color: map-get($theme-accent, 900)
+    background-color: map-get($theme-accent, 100)

src/app/modules/shared/components/global-alert-handler/global-alert-handler.component.ts

@@ -1,12 +1,24 @@
 import {Component} from '@angular/core'
 import {AlertHandlerComponent, AlertService, AlertType} from '../../service/alert.service'
+import {animate, state, style, transition, trigger} from '@angular/animations'
 
 @Component({
   selector: 'cre-global-alert-handler',
   templateUrl: './global-alert-handler.component.html',
-  styleUrls: ['./global-alert-handler.component.sass']
+  styleUrls: ['./global-alert-handler.component.sass'],
+  animations: [
+    trigger('fadeIn', [
+      state('void', style({
+        opacity: 0,
+        transform: 'scale(0.5)'
+      })),
+      transition('void <=> *', animate(100))
+    ])
+  ]
 })
 export class GlobalAlertHandlerComponent extends AlertHandlerComponent {
+  public static isSubNavOpen = false
+
   readonly SUCCESS_ALERT_TYPE = AlertType.Success
   readonly WARNING_ALERT_TYPE = AlertType.Warning
   readonly ERROR_ALERT_TYPE = AlertType.Error
@@ -14,4 +26,8 @@ export class GlobalAlertHandlerComponent extends AlertHandlerComponent {
   constructor(alertService: AlertService) {
     super(alertService)
   }
+
+  get isSubNavOpen(): boolean {
+    return GlobalAlertHandlerComponent.isSubNavOpen
+  }
 }

src/app/pages/catalog/catalog.component.ts

@@ -1,16 +1,25 @@
-import {Component} from '@angular/core';
-import {NavLink} from "../../modules/shared/components/nav/nav.component";
-import {EmployeePermission} from "../../modules/shared/model/employee";
+import {Component, OnDestroy, OnInit} from '@angular/core'
+import {NavLink} from '../../modules/shared/components/nav/nav.component'
+import {EmployeePermission} from '../../modules/shared/model/employee'
+import {GlobalAlertHandlerComponent} from '../../modules/shared/components/global-alert-handler/global-alert-handler.component'
 
 @Component({
   selector: 'cre-inventory-page',
   templateUrl: './catalog.component.html',
   styleUrls: ['./catalog.component.sass']
 })
-export class CatalogComponent {
+export class CatalogComponent implements OnInit, OnDestroy {
   links: NavLink[] = [
     {route: '/catalog/materialtype', title: 'Types de produit', permission: EmployeePermission.VIEW_MATERIAL_TYPE},
     {route: '/catalog/material', title: 'Produits', permission: EmployeePermission.VIEW_MATERIAL},
     {route: '/catalog/company', title: 'Bannières', permission: EmployeePermission.VIEW_COMPANY}
   ]
+
+  ngOnInit(): void {
+    GlobalAlertHandlerComponent.isSubNavOpen = true
+  }
+
+  ngOnDestroy(): void {
+    GlobalAlertHandlerComponent.isSubNavOpen = false
+  }
 }

src/custom-theme.scss

@@ -78,12 +78,44 @@ $theme-accent: mat-palette((
     A700 : #000000,
   )
 ));
+$theme-warning: mat-palette((
+  50 : #fff8e4,
+  100 : #feefbd,
+  200 : #fee491,
+  300 : #fdd964,
+  400 : #fcd043,
+  500 : #fcc822,
+  600 : #fcc21e,
+  700 : #fbbb19,
+  800 : #fbb414,
+  900 : #faa70c,
+  A100 : #ffffff,
+  A200 : #fffaf1,
+  A400 : #ffe6be,
+  A700 : #ffdca4,
+  contrast: (
+    50 : #000000,
+    100 : #000000,
+    200 : #000000,
+    300 : #000000,
+    400 : #000000,
+    500 : #000000,
+    600 : #000000,
+    700 : #000000,
+    800 : #000000,
+    900 : #000000,
+    A100 : #000000,
+    A200 : #000000,
+    A400 : #000000,
+    A700 : #000000,
+  )
+));
 
 // The warn palette is optional (defaults to red).
-$theme-warn: mat-palette($mat-red);
+$theme-error: mat-palette($mat-red);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$color-recipes-explorer-frontend-theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
+$color-recipes-explorer-frontend-theme: mat-light-theme($theme-primary, $theme-accent, $theme-error);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
@@ -92,7 +124,7 @@ $color-recipes-explorer-frontend-theme: mat-light-theme($theme-primary, $theme-a
 
 $color-primary: map-get($theme-primary, 500);
 $color-accent: map-get($theme-accent, 500);
-$color-warn: map-get($theme-warn, 500);
+$color-warn: map-get($theme-error, 500);
 
 
 html, body {