4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Notifications + things

Browse Source
This commit is contained in:
Vins 2024-07-22 10:04:00 +02:00
parent da0f70cb42
commit 5f3f46790c
7 changed files with 116 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/front/Components/DesignSystem/Button/classes.module.scss
View File

@ -26,17 +26,17 @@
*/ */
&[variant="primary"] { &[variant="primary"] {
color: var(--color-primary-500); color: var(--button-contained-primary-hovered-contrast);
background: var(--button-contained-primary-default-background, #005bcb); border: 1px solid var(--button-contained-primary-default-border);
border-color: var(--button-contained-primary-default-border); background: var(--button-contained-primary-default-background);
svg { svg {
stroke: var(--button-contained-primary-default-contrast); stroke: var(--button-contained-primary-default-contrast);
} }
&:hover { &:hover {
border-color: var(--button-contained-primary-hovered-border); border: 1px solid var(--button-contained-primary-hovered-border);
background: var(--button-contained-primary-hovered-background, #0040a4); background: var(--button-contained-primary-hovered-background);
svg { svg {
stroke: var(--button-contained-primary-hovered-contrast); stroke: var(--button-contained-primary-hovered-contrast);
@ -45,8 +45,9 @@
&:focus, &:focus,
&:active { &:active {
border-color: var(--button-contained-primary-pressed-border); color: var(--button-contained-primary-default-contrast);
background: var(--button-contained-primary-pressed-background, #013391); border: 1px solid var(--button-contained-primary-pressed-border);
background: var(--button-contained-primary-pressed-background);
svg { svg {
stroke: var(--button-contained-primary-pressed-contrast); stroke: var(--button-contained-primary-pressed-contrast);
@ -54,15 +55,17 @@
} }
&[styletype="outlined"] { &[styletype="outlined"] {
border-color: var(--button-outlined-primary-default-border); color: var(--button-outlined-primary-default-contrast);
border: 1px solid var(--button-outlined-primary-default-border);
background: var(--button-outlined-primary-default-background);
svg { svg {
stroke: var(--button-outlined-primary-default-contrast); stroke: var(--button-outlined-primary-default-contrast);
} }
&:hover { &:hover {
background-color: var(--color-primary-50); border: 1px solid var(--button-outlined-primary-hovered-border);
border-color: var(--button-outlined-primary-hovered-border); background: var(--button-outlined-primary-hovered-background);
svg { svg {
stroke: var(--button-outlined-primary-hovered-contrast); stroke: var(--button-outlined-primary-hovered-contrast);
@ -71,9 +74,9 @@
&:focus, &:focus,
&:active { &:active {
background-color: var(--color-primary-100); color: var(--button-outlined-primary-pressed-contrast);
color: var(--color-primary-700); border: 1px solid var(--button-outlined-primary-pressed-border);
border-color: var(--button-outlined-primary-pressed-border); background: var(--button-outlined-primary-pressed-background);
svg { svg {
stroke: var(--button-outlined-primary-pressed-contrast); stroke: var(--button-outlined-primary-pressed-contrast);
@ -82,13 +85,17 @@
} }
&[styletype="text"] { &[styletype="text"] {
color: var(--button-text-primary-default-contrast);
border-bottom: 1px solid var(--button-text-primary-default-border);
background: var(--button-text-primary-default-background);
svg { svg {
stroke: var(--button-text-primary-default-contrast); stroke: var(--button-text-primary-default-contrast);
} }
&:hover { &:hover {
background-color: transparent; border-bottom: 1px solid var(--button-outlined-primary-hovered-border);
border-color: var(--button-outlined-primary-hovered-border); background: var(--button-outlined-primary-default-background);
svg { svg {
stroke: var(--button-text-primary-hovered-contrast); stroke: var(--button-text-primary-hovered-contrast);
@ -97,9 +104,9 @@
&:focus, &:focus,
&:active { &:active {
background-color: transparent;
color: var(--color-primary-800); color: var(--color-primary-800);
border-color: var(--color-primary-800); background: var(--button-outlined-primary-default-background);
border-bottom: 1px solid var(--color-primary-800);
svg { svg {
stroke: var(--button-text-primary-pressed-contrast); stroke: var(--button-text-primary-pressed-contrast);
@ -109,17 +116,18 @@
} }
&[variant="secondary"] { &[variant="secondary"] {
color: var(--color-secondary-500); color: var(--button-contained-secondary-default-contrast);
background: var(--color-secondary-500); background: var(--button-contained-secondary-default-background);
border-color: var(--color-secondary-500); border-color: var(--button-contained-secondary-default-border);
svg { svg {
stroke: var(--button-contained-secondary-default-contrast); stroke: var(--button-contained-secondary-default-contrast);
} }
&:hover { &:hover {
background: var(--color-secondary-700); color: var(--button-contained-secondary-hovered-contrast);
border-color: var(--color-secondary-700); background: var(--button-contained-secondary-hovered-background);
border-color: var(--button-contained-secondary-hovered-border);
svg { svg {
stroke: var(--button-contained-secondary-hovered-contrast); stroke: var(--button-contained-secondary-hovered-contrast);
@ -128,8 +136,9 @@
&:focus, &:focus,
&:active { &:active {
background: var(--color-secondary-800); color: var(--button-contained-secondary-pressed-contrast);
border-color: var(--color-secondary-800); background: var(--button-contained-secondary-pressed-background);
border-color: var(--button-contained-secondary-pressed-border);
svg { svg {
stroke: var(--button-contained-secondary-pressed-contrast); stroke: var(--button-contained-secondary-pressed-contrast);
@ -137,12 +146,16 @@
} }
&[styletype="outlined"] { &[styletype="outlined"] {
color: var(--button-outlined-secondary-default-contrast);
border: 1px solid var(--button-outlined-secondary-default-border);
background: var(--button-outlined-secondary-default-background);
svg { svg {
stroke: var(--button-outlined-secondary-default-contrast); stroke: var(--button-outlined-secondary-default-contrast);
} }
&:hover { &:hover {
background-color: var(--color-secondary-50); border: 1px solid var(--button-outlined-secondary-hovered-border);
background: var(--button-outlined-secondary-hovered-background);
svg { svg {
stroke: var(--button-outlined-secondary-hovered-contrast); stroke: var(--button-outlined-secondary-hovered-contrast);
@ -151,9 +164,9 @@
&:focus, &:focus,
&:active { &:active {
background-color: var(--color-secondary-100); color: var(--button-outlined-secondary-pressed-contrast);
color: var(--color-secondary-700); border: 1px solid var(--button-outlined-secondary-pressed-border);
border-color: var(--color-secondary-700); background: var(--button-outlined-secondary-pressed-background);
svg { svg {
stroke: var(--button-outlined-secondary-pressed-contrast); stroke: var(--button-outlined-secondary-pressed-contrast);
@ -162,12 +175,16 @@
} }
&[styletype="text"] { &[styletype="text"] {
color: var(--button-text-secondary-default-contrast);
border-bottom: 1px solid var(--button-text-secondary-default-border);
background: var(--button-text-secondary-default-background);
svg { svg {
stroke: var(--button-text-secondary-default-contrast); stroke: var(--button-text-secondary-default-contrast);
} }
&:hover { &:hover {
background-color: transparent; border-bottom: 1px solid var(--button-outlined-secondary-hovered-border);
background: var(--button-outlined-secondary-default-background);
svg { svg {
stroke: var(--button-text-secondary-hovered-contrast); stroke: var(--button-text-secondary-hovered-contrast);
@ -176,9 +193,9 @@
&:focus, &:focus,
&:active { &:active {
background-color: transparent; color: var(--button-outlined-secondary-pressed-contrast);
color: var(--color-secondary-800); border-bottom: 1px solid var(--button-outlined-secondary-pressed-border);
border-color: var(--color-secondary-800); background: var(--button-outlined-secondary-pressed-background);
svg { svg {
stroke: var(--button-text-secondary-pressed-contrast); stroke: var(--button-text-secondary-pressed-contrast);
@ -188,17 +205,17 @@
} }
&[variant="neutral"] { &[variant="neutral"] {
color: var(--color-neutral-500); color: var(--button-contained-neutral-hovered-contrast);
background: var(--color-neutral-500); border: 1px solid var(--button-contained-neutral-default-border);
border-color: var(--color-neutral-500); background: var(--button-contained-neutral-default-background);
svg { svg {
stroke: var(--button-contained-neutral-default-contrast); stroke: var(--button-contained-neutral-default-contrast);
} }
&:hover { &:hover {
background: var(--color-neutral-700); border: 1px solid var(--button-contained-neutral-hovered-border);
border-color: var(--color-neutral-700); background: var(--button-contained-neutral-hovered-background);
svg { svg {
stroke: var(--button-contained-neutral-hovered-contrast); stroke: var(--button-contained-neutral-hovered-contrast);
@ -207,8 +224,9 @@
&:focus, &:focus,
&:active { &:active {
background: var(--color-neutral-800); color: var(--button-contained-neutral-default-contrast);
border-color: var(--color-neutral-800); border: 1px solid var(--button-contained-neutral-pressed-border);
background: var(--button-contained-neutral-pressed-background);
svg { svg {
stroke: var(--button-contained-neutral-pressed-contrast); stroke: var(--button-contained-neutral-pressed-contrast);
@ -216,13 +234,16 @@
} }
&[styletype="outlined"] { &[styletype="outlined"] {
color: var(--button-outlined-neutral-default-contrast);
border: 1px solid var(--button-outlined-neutral-default-border);
background: var(--button-outlined-neutral-default-background);
svg { svg {
stroke: var(--button-outlined-neutral-default-contrast); stroke: var(--button-outlined-neutral-default-contrast);
} }
&:hover { &:hover {
background-color: var(--color-neutral-50); border: 1px solid var(--button-outlined-neutral-hovered-border);
background: var(--button-outlined-neutral-hovered-background);
svg { svg {
stroke: var(--button-outlined-neutral-hovered-contrast); stroke: var(--button-outlined-neutral-hovered-contrast);
} }
@ -230,9 +251,9 @@
&:focus, &:focus,
&:active { &:active {
background-color: var(--color-neutral-100); color: var(--button-outlined-neutral-pressed-contrast);
color: var(--color-neutral-700); border: 1px solid var(--button-outlined-neutral-pressed-border);
border-color: var(--color-neutral-700); background: var(--button-outlined-neutral-pressed-background);
svg { svg {
stroke: var(--button-outlined-neutral-pressed-contrast); stroke: var(--button-outlined-neutral-pressed-contrast);
@ -241,12 +262,16 @@
} }
&[styletype="text"] { &[styletype="text"] {
color: var(--button-text-neutral-default-contrast);
border-bottom: 1px solid var(--button-text-neutral-default-border);
background: var(--button-text-neutral-default-background);
svg { svg {
stroke: var(--button-text-neutral-default-contrast); stroke: var(--button-text-neutral-default-contrast);
} }
&:hover { &:hover {
background-color: transparent; border-bottom: 1px solid var(--button-outlined-neutral-hovered-border);
background: var(--button-outlined-neutral-default-background);
svg { svg {
stroke: var(--button-text-neutral-hovered-contrast); stroke: var(--button-text-neutral-hovered-contrast);
@ -255,9 +280,9 @@
&:focus, &:focus,
&:active { &:active {
background-color: transparent; color: var(--color-primary-800);
color: var(--color-neutral-800); background: var(--button-outlined-neutral-default-background);
border-color: var(--color-neutral-800); border-bottom: 1px solid var(--color-primary-800);
svg { svg {
stroke: var(--button-text-neutral-pressed-contrast); stroke: var(--button-text-neutral-pressed-contrast);

1
src/front/Components/DesignSystem/Header/Navigation/index.tsx
View File

@ -52,6 +52,7 @@ export default function Navigation() {
title: notification.notification.message, title: notification.notification.message,
uid: notification.uid, uid: notification.uid,
redirectUrl: notification.notification.redirection_url, redirectUrl: notification.notification.redirection_url,
created_at: notification.notification.created_at,
}); });
}); });
}, []); }, []);

4
src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
View File

@ -45,6 +45,10 @@
margin-top: 24px; margin-top: 24px;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
cursor: pointer;
&hover {
background: var(--notification-unread-hovered, #ffe4d4);
}
.missing-notification { .missing-notification {
padding: var(--spacing-3); padding: var(--spacing-3);

21
src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss
View File

@ -25,10 +25,13 @@
.root { .root {
pointer-events: all; pointer-events: all;
position: relative; position: relative;
padding: 24px; padding: var(--spacing-2);
background: var(--color-warning-500-soft);
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11); box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
border-radius: 5px; border-radius: 8px;
background: var(--notification-unread-default, #fff3ed);
&:hover {
background: var(--notification-unread-hovered, #ffe4d4);
}
animation-name: slide-left; animation-name: slide-left;
animation-duration: 300ms; animation-duration: 300ms;
@ -88,6 +91,18 @@
} }
} }
.notif-unread {
display: flex;
align-items: center;
gap: 8px;
.notif-unread-dot {
width: 12px;
height: 12px;
background-color: var(--notification-text-contrast, #ff4617);
border-radius: 100px;
}
}
.text-container { .text-container {
font-family: var(--font-text-family); font-family: var(--font-text-family);
font-style: normal; font-style: normal;

17
src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx
View File

@ -8,8 +8,8 @@ import React from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Toasts, { IToast } from "@Front/Stores/Toasts"; import Toasts, { IToast } from "@Front/Stores/Toasts";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import CheckIcon from "@Assets/Icons/check.svg"; // import CheckIcon from "@Assets/Icons/check.svg";
import Image from "next/image"; // import Image from "next/image";
import { NextRouter, useRouter } from "next/router"; import { NextRouter, useRouter } from "next/router";
type IProps = { type IProps = {
@ -39,6 +39,8 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
public override render(): JSX.Element { public override render(): JSX.Element {
const toast = this.props.toast; const toast = this.props.toast;
console.log(toast);
const style = { const style = {
"--data-duration": `${toast.time}ms`, "--data-duration": `${toast.time}ms`,
} as React.CSSProperties; } as React.CSSProperties;
@ -55,9 +57,13 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
<div className={classes["text-container"]}> <div className={classes["text-container"]}>
{this.getToastTitle(toast.title)} {this.getToastTitle(toast.title)}
{this.getToastText(toast.text)} {this.getToastText(toast.text)}
{this.getToastDate(toast.created_at)}
</div> </div>
</div> </div>
{toast.closable && <Image src={CheckIcon} alt="Document check" className={classes["cross"]} onClick={this.onClose} />} <div className={classes["notif-unread"]}>
<div className={classes["notif-unread-dot"]} onClick={this.onClose} />
</div>
{/* {toast.closable && <Image src={CheckIcon} alt="Document check" className={classes["cross"]} onClick={this.onClose} />} */}
</div> </div>
{toast.button} {toast.button}
</div> </div>
@ -79,6 +85,11 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
return title; return title;
} }
private getToastDate(date: Date | null | undefined) {
const tempDate = new Date(date!);
return tempDate.toDateString();
}
private getToastText(text: React.ReactNode) { private getToastText(text: React.ReactNode) {
if (typeof text === "string") { if (typeof text === "string") {
return ( return (

1
src/front/Components/DesignSystem/Toasts/ToastsContainer/classes.module.scss
View File

@ -5,6 +5,7 @@
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
border-radius: 8px;
& > *:not(:first-child) { & > *:not(:first-child) {
margin-top: 16px; margin-top: 16px;

2
src/front/Stores/Toasts.tsx
View File

@ -18,6 +18,7 @@ export interface IToast {
time?: number; time?: number;
closable?: boolean; closable?: boolean;
priority?: EToastPriority; priority?: EToastPriority;
created_at?: Date | null;
} }
export default class Toasts { export default class Toasts {
@ -61,6 +62,7 @@ export default class Toasts {
toast.time = toast.time ?? this.defaultTime; toast.time = toast.time ?? this.defaultTime;
toast.closable = toast.closable ?? this.defaultClosable; toast.closable = toast.closable ?? this.defaultClosable;
toast.priority = toast.priority ?? this.defaultPriority; toast.priority = toast.priority ?? this.defaultPriority;
toast.created_at = toast.created_at;
const highToasts = this.toastList.filter((toast) => { const highToasts = this.toastList.filter((toast) => {
return toast.priority === EToastPriority.HIGH; return toast.priority === EToastPriority.HIGH;