From 1d89ba926e42fa5f45ab4f8fd8f271eca9ac87be Mon Sep 17 00:00:00 2001 From: FyloZ Date: Tue, 16 Feb 2021 17:54:52 -0500 Subject: [PATCH] Ajout du style des alertes --- .../global-alert-handler.component.html | 6 ++- .../global-alert-handler.component.sass | 28 ++++++++++++++ .../global-alert-handler.component.ts | 18 ++++++++- src/app/pages/catalog/catalog.component.ts | 17 +++++++-- src/custom-theme.scss | 38 +++++++++++++++++-- 5 files changed, 97 insertions(+), 10 deletions(-) diff --git a/src/app/modules/shared/components/global-alert-handler/global-alert-handler.component.html b/src/app/modules/shared/components/global-alert-handler/global-alert-handler.component.html index 19903b7..b4acaa2 100644 --- a/src/app/modules/shared/components/global-alert-handler/global-alert-handler.component.html +++ b/src/app/modules/shared/components/global-alert-handler/global-alert-handler.component.html @@ -1,9 +1,11 @@ - +
{{alert.alert.message}}
- +
diff --git a/src/app/modules/shared/components/global-alert-handler/global-alert-handler.component.sass b/src/app/modules/shared/components/global-alert-handler/global-alert-handler.component.sass index e69de29..56955cd 100644 --- a/src/app/modules/shared/components/global-alert-handler/global-alert-handler.component.sass +++ b/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) diff --git a/src/app/modules/shared/components/global-alert-handler/global-alert-handler.component.ts b/src/app/modules/shared/components/global-alert-handler/global-alert-handler.component.ts index d28c3ba..f87b246 100644 --- a/src/app/modules/shared/components/global-alert-handler/global-alert-handler.component.ts +++ b/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 + } } diff --git a/src/app/pages/catalog/catalog.component.ts b/src/app/pages/catalog/catalog.component.ts index d7c49db..5b125c2 100644 --- a/src/app/pages/catalog/catalog.component.ts +++ b/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 + } } diff --git a/src/custom-theme.scss b/src/custom-theme.scss index c6a6653..9f41329 100644 --- a/src/custom-theme.scss +++ b/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 {