From fa7bc24feda60bc9126999d0b38a7e4428fb567f Mon Sep 17 00:00:00 2001 From: Hugo Lextrait Date: Wed, 22 Feb 2023 11:41:52 +0100 Subject: [PATCH] notifications container front --- src/front/Stores/Toasts.tsx | 2 +- .../NotificationModal/classes.module.scss | 13 ++++- .../Notifications/NotificationModal/index.tsx | 49 ++++++++++++++----- .../Header/Notifications/index.tsx | 15 ++++-- .../DesignSystem/Header/classes.module.scss | 2 +- .../ToastsContainer/classes.module.scss | 13 ----- .../LayoutTemplates/DefaultTemplate/index.tsx | 2 - src/front/themes/constants.scss | 3 +- 8 files changed, 61 insertions(+), 38 deletions(-) diff --git a/src/front/Stores/Toasts.tsx b/src/front/Stores/Toasts.tsx index 4da63178..8f5c142d 100644 --- a/src/front/Stores/Toasts.tsx +++ b/src/front/Stores/Toasts.tsx @@ -23,7 +23,7 @@ export default class Toasts { private toastList: IToast[] = []; private uid: number = 0; - private defaultTime: IToast["time"] = 4000; + private defaultTime: IToast["time"] = 40000; private defaultClosable: IToast["closable"] = true; private defaultPriority: IToast["priority"] = EToastPriority.LOW; diff --git a/src/front/components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss b/src/front/components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss index c08af237..5f992ebb 100644 --- a/src/front/components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss +++ b/src/front/components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss @@ -1,13 +1,17 @@ @import "@Themes/constants.scss"; .root { + display: flex; + flex-direction: column; width: 300px; - height: 500px; - background-color: $orange-flash; + max-height: 80%; + background-color: $white; + box-shadow: $shadow-nav; padding: 24px; position: absolute; top: 107px; right:56px; + .notification-header{ width: 100%; display: inline-flex; @@ -16,4 +20,9 @@ cursor: pointer; } } + .notification-body{ + margin-top: 24px; + overflow: hidden; + overflow-y: auto; + } } diff --git a/src/front/components/DesignSystem/Header/Notifications/NotificationModal/index.tsx b/src/front/components/DesignSystem/Header/Notifications/NotificationModal/index.tsx index 5fe14d48..6730a081 100644 --- a/src/front/components/DesignSystem/Header/Notifications/NotificationModal/index.tsx +++ b/src/front/components/DesignSystem/Header/Notifications/NotificationModal/index.tsx @@ -3,41 +3,64 @@ import classes from "./classes.module.scss"; import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import CloseIcon from "@Assets/icons/cross.svg"; import Image from "next/image"; +import ToastHandler from "@Front/Components/DesignSystem/Toasts/ToastsHandler"; +import Toasts, { IToast } from "@Front/Stores/Toasts"; type IProps = { - openModal: () => void; + isOpen: boolean; + closeModal: () => void; }; type IState = { - isModalOpen: boolean; + toastList: IToast[] | null; }; export default class NotificationModal extends React.Component { + private removeOnToastChange: () => void = () => { }; + constructor(props: IProps) { super(props); this.state = { - isModalOpen: true, + toastList: Toasts.getInstance().toasts, }; - this.closeModal = this.closeModal.bind(this); - this.openModal = this.openModal.bind(this); + this.handleToastChange = this.handleToastChange.bind(this); } public override render(): JSX.Element | null { - if (!this.state.isModalOpen) return null; + if (!this.props.isOpen) return null; return
Notifications -
+
Close notification modal
; + +
+ <> + {Toasts.getInstance().toasts.length === 0 + ? +
+ No notification yet +
+ : } + +
} - private closeModal() { - this.setState({ isModalOpen: false }); - } - private openModal() { - this.setState({ isModalOpen: true }); - } + + public override componentDidMount() { + this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange); + } + + public override componentWillUnmount() { + this.removeOnToastChange(); + } + + private handleToastChange(toastList: IToast[] | null) { + this.setState({ + toastList, + }); + } } diff --git a/src/front/components/DesignSystem/Header/Notifications/index.tsx b/src/front/components/DesignSystem/Header/Notifications/index.tsx index 4ee4b44d..3ad4b9b4 100644 --- a/src/front/components/DesignSystem/Header/Notifications/index.tsx +++ b/src/front/components/DesignSystem/Header/Notifications/index.tsx @@ -18,21 +18,26 @@ export default class Notifications extends React.Component { hasNotifications: true, isModalOpen: true, }; - this.opeModal = this.opeModal.bind(this); + this.openModal = this.openModal.bind(this); + this.closeModal = this.closeModal.bind(this); } public override render(): JSX.Element { const hasNotifications = Toasts.getInstance().toasts.length; console.log(hasNotifications) return
-
+
notifications {this.state.hasNotifications &&
}
- { this.state.isModalOpen && } + {this.state.isModalOpen && }
; } - private opeModal() { + private openModal() { this.setState({ isModalOpen: true }); }; -} + + private closeModal() { + this.setState({ isModalOpen: false }); + }; +} \ No newline at end of file diff --git a/src/front/components/DesignSystem/Header/classes.module.scss b/src/front/components/DesignSystem/Header/classes.module.scss index 5757c25c..52e65563 100644 --- a/src/front/components/DesignSystem/Header/classes.module.scss +++ b/src/front/components/DesignSystem/Header/classes.module.scss @@ -6,7 +6,7 @@ justify-content: space-between; height: 83px; background-color: $white; - box-shadow: $shadow-neutral; + box-shadow: $shadow-nav; padding: 0 48px; .logo-container { diff --git a/src/front/components/DesignSystem/Toasts/ToastsContainer/classes.module.scss b/src/front/components/DesignSystem/Toasts/ToastsContainer/classes.module.scss index 4898d84b..4ca947d3 100644 --- a/src/front/components/DesignSystem/Toasts/ToastsContainer/classes.module.scss +++ b/src/front/components/DesignSystem/Toasts/ToastsContainer/classes.module.scss @@ -3,22 +3,9 @@ .root { display: flex; flex-direction: column; - position: fixed; - z-index: 10; - right: 0; - top: 0; - padding: 0px; - width: 0px; - max-height: calc(100vh - 80px); overflow-y: auto; overflow-x: hidden; - &.open { - width: 341px; - top: 70px; - padding: 16px; - } - & > *:not(:first-child) { margin-top: 16px; } diff --git a/src/front/components/LayoutTemplates/DefaultTemplate/index.tsx b/src/front/components/LayoutTemplates/DefaultTemplate/index.tsx index 053a548b..2d99de76 100644 --- a/src/front/components/LayoutTemplates/DefaultTemplate/index.tsx +++ b/src/front/components/LayoutTemplates/DefaultTemplate/index.tsx @@ -1,7 +1,6 @@ import React, { ReactNode } from "react"; import classes from "./classes.module.scss"; import Header from "@Front/Components/DesignSystem/Header"; -import ToastHandler from "@Front/Components/DesignSystem/Toasts/ToastsHandler"; type IProps = { title: string; @@ -23,7 +22,6 @@ export default class DefaultTemplate extends React.Component { <>
-
{this.props.children}
diff --git a/src/front/themes/constants.scss b/src/front/themes/constants.scss index c54d928b..0c032f7c 100644 --- a/src/front/themes/constants.scss +++ b/src/front/themes/constants.scss @@ -39,4 +39,5 @@ $grey-soft: #f9f9f9; $modal-background: rgba(0, 0, 0, 0.44); -$shadow-neutral: 0px 8px 10px 0px #00000012; +$shadow-nav: 0px 8px 10px rgba(0, 0, 0, 0.07); +$shadow-tooltip: 0px 4px 24px rgba(0, 0, 0, 0.15);