diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 00000000..022a2b93 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/favicon.svg b/public/favicon.svg deleted file mode 100644 index 984d1ebe..00000000 --- a/public/favicon.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/classes.module.scss b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/classes.module.scss deleted file mode 100644 index 26b47c0f..00000000 --- a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/classes.module.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import "@Themes/constants.scss"; - -.root { - .content { - display: flex; - gap: 8px; - align-items: center; - justify-content: center; - } - - .sub-menu { - padding: 24px; - text-align: center; - gap: 24px; - display: flex; - flex-direction: column; - } -} diff --git a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/index.tsx b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/index.tsx deleted file mode 100644 index 7b1adba8..00000000 --- a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import classNames from "classnames"; -import { useRouter } from "next/router"; -import React, { useEffect, useState } from "react"; -import classes from "./classes.module.scss"; -import { IAppRule } from "@Front/Api/Entities/rule"; -import Rules, { RulesMode } from "@Front/Components/Elements/Rules"; -import { IHeaderLinkProps } from "../../../ButtonHeader"; -import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; -import HeaderSubmenuLink from "../../../HeaderSubmenu/HeaderSubmenuLink"; -import useToggle from "@Front/Hooks/useToggle"; -import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline"; - -type IProps = { - text: string | JSX.Element; - links: (IHeaderLinkProps & { - rules?: IAppRule[]; - })[]; -}; - -export default function HeaderSubmenu(props: IProps) { - const router = useRouter(); - const { pathname } = router; - const [isActive, setIsActive] = useState(true); - const { active: isSubmenuOpened, toggle } = useToggle(); - - useEffect(() => { - setIsActive(false); - if (props.links.some((link) => link.path === pathname)) setIsActive(true); - if (props.links.some((link) => link.routesActive?.some((routeActive) => pathname.includes(routeActive)))) setIsActive(true); - }, [isActive, pathname, props.links]); - - return ( - link.rules ?? [])}> -
-
-
- - {props.text} - - {isSubmenuOpened ? : } -
-
- {isSubmenuOpened && ( -
- {props.links.map((link) => ( - - - - ))} -
- )} -
-
- - ); -} diff --git a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss index da462747..cbb69193 100644 --- a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss @@ -1,21 +1,22 @@ @import "@Themes/constants.scss"; .root { + position: absolute; + top: var(--header-height); + left: 0; + + width: 100%; + max-height: calc(100vh - var(--header-height)); + padding: var(--spacing-05, 4px) var(--spacing-2, 16px); + display: flex; flex-direction: column; - background-color: var(--color-generic-white); - box-shadow: $shadow-nav; - padding: 24px; - position: absolute; - top: 83px; - width: 100%; - left: 0; - text-align: center; - max-height: calc(100vh - 83px); + overflow: auto; - > *:not(:last-child) { - margin-bottom: 24px; - } + + border-radius: var(--menu-radius, 0px); + background: var(--color-generic-white, #FFF); + box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.10); .separator { width: 100%; diff --git a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx index ede9dd10..983abab0 100644 --- a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx +++ b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx @@ -1,170 +1,196 @@ +import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule"; import LogOutButton from "@Front/Components/DesignSystem/LogOutButton"; +import MenuItem from "@Front/Components/DesignSystem/Menu/MenuItem"; +import Rules, { RulesMode } from "@Front/Components/Elements/Rules"; import Module from "@Front/Config/Module"; import React from "react"; -import NavigationLink from "../../NavigationLink"; import classes from "./classes.module.scss"; -import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule"; -import BurgerModalSubmenu from "./BurgerModalSubmenu"; -import Rules, { RulesMode } from "@Front/Components/Elements/Rules"; type IProps = { isOpen: boolean; closeModal: () => void; }; -type IState = {}; -export default class BurgerModal extends React.Component { - // TODO isEnabled depending on role given by DB - public override render(): JSX.Element | null { - if (!this.props.isOpen) return null; - return ( - <> -
-
- - <> - +
+
+ + <> + - -
- - + ], + link: Module.getInstance().get().modules.pages.Folder.props.path, + }} + /> - - -
- - - - - -
- - ); - } + + + + + + + + + + + + + + + + + +
+ + ); } diff --git a/src/front/Components/DesignSystem/Header/HeaderSubmenu/HeaderSubmenuLink/index.tsx b/src/front/Components/DesignSystem/Header/HeaderSubmenu/HeaderSubmenuLink/index.tsx deleted file mode 100644 index 214feb88..00000000 --- a/src/front/Components/DesignSystem/Header/HeaderSubmenu/HeaderSubmenuLink/index.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import Link from "next/link"; -import { useRouter } from "next/router"; -import React, { useEffect } from "react"; - -import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; -import useHoverable from "@Front/Hooks/useHoverable"; - -type IHeaderLinkProps = { - text: string | JSX.Element; - path: string; - routesActive?: string[]; -}; - -export default function HeaderSubmenuLink(props: IHeaderLinkProps) { - const router = useRouter(); - const { pathname } = router; - const [isActive, setIsActive] = React.useState(props.path === pathname); - const { handleMouseLeave, handleMouseEnter, isHovered } = useHoverable(); - - useEffect(() => { - if (props.path === pathname) setIsActive(true); - if (props.routesActive) { - for (const routeActive of props.routesActive) { - if (isActive) break; - if (pathname.includes(routeActive)) setIsActive(true); - } - } - }, [isActive, pathname, props.path, props.routesActive]); - - return ( - - - {props.text} - - - ); -} diff --git a/src/front/Components/DesignSystem/Header/HeaderSubmenu/classes.module.scss b/src/front/Components/DesignSystem/Header/HeaderSubmenu/classes.module.scss deleted file mode 100644 index 0e84d6a6..00000000 --- a/src/front/Components/DesignSystem/Header/HeaderSubmenu/classes.module.scss +++ /dev/null @@ -1,44 +0,0 @@ -@import "@Themes/constants.scss"; - -.root { - display: flex; - position: relative; - width: fit-content; - margin: auto; - height: 83px; - padding: 10px 16px; - .content { - margin: auto; - } - .underline { - width: 100%; - height: 3px; - background-color: var(--color-generic-white); - position: absolute; - bottom: 0; - left: 0; - - &[data-active="true"] { - background-color: var(--color-generic-black); - } - } - - &.desactivated { - cursor: not-allowed; - } - - .sub-menu { - box-shadow: 0px 8px 10px 0px #00000012; - padding: 24px; - text-align: center; - gap: 24px; - left: 0; - transform: translateX(-25%); - width: 300px; - top: 84px; - display: flex; - flex-direction: column; - background: white; - position: absolute; - } -} diff --git a/src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx b/src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx deleted file mode 100644 index 1f6a939d..00000000 --- a/src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import classNames from "classnames"; -import { useRouter } from "next/router"; -import React, { useEffect, useState } from "react"; -import { IHeaderLinkProps } from "../ButtonHeader"; - -import Typography, { ETypo, ETypoColor } from "../../Typography"; -import classes from "./classes.module.scss"; -import useHoverable from "@Front/Hooks/useHoverable"; -import HeaderSubmenuLink from "./HeaderSubmenuLink"; -import { IAppRule } from "@Front/Api/Entities/rule"; -import Rules, { RulesMode } from "@Front/Components/Elements/Rules"; - -type IProps = { - text: string | JSX.Element; - links: (IHeaderLinkProps & { - rules?: IAppRule[]; - })[]; -}; - -export default function HeaderSubmenu(props: IProps) { - const router = useRouter(); - const { pathname } = router; - const [isActive, setIsActive] = useState(false); - const { handleMouseLeave, handleMouseEnter, isHovered } = useHoverable(100); - - useEffect(() => { - setIsActive(false); - if (props.links.some((link) => link.path === pathname)) setIsActive(true); - if (props.links.some((link) => link.routesActive?.some((routeActive) => pathname.includes(routeActive)))) setIsActive(true); - }, [isActive, pathname, props.links]); - - return ( - link.rules ?? [])}> -
-
-
- - {props.text} - -
-
- {isHovered && ( -
- {props.links.map((link) => ( - - - - ))} -
- )} -
-
- - ); -} diff --git a/src/front/Components/DesignSystem/Header/Navigation/index.tsx b/src/front/Components/DesignSystem/Header/Navigation/index.tsx index 5e4244d3..eb4e2878 100644 --- a/src/front/Components/DesignSystem/Header/Navigation/index.tsx +++ b/src/front/Components/DesignSystem/Header/Navigation/index.tsx @@ -8,7 +8,8 @@ import { AdjustmentsVerticalIcon, BanknotesIcon, Square3Stack3DIcon, TagIcon, Us import { usePathname } from "next/navigation"; import React, { useCallback, useEffect } from "react"; -import Menu, { IItem } from "../../Menu"; +import Menu from "../../Menu"; +import { IItem } from "../../Menu/MenuItem"; import ButtonHeader from "../ButtonHeader"; import classes from "./classes.module.scss"; diff --git a/src/front/Components/DesignSystem/Header/NavigationLink/classes.module.scss b/src/front/Components/DesignSystem/Header/NavigationLink/classes.module.scss deleted file mode 100644 index 27c75060..00000000 --- a/src/front/Components/DesignSystem/Header/NavigationLink/classes.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import "@Themes/constants.scss"; - -.root { - display: flex; - position: relative; - width: fit-content; - margin: auto; - - .content { - align-content: center; - } -} diff --git a/src/front/Components/DesignSystem/Header/NavigationLink/index.tsx b/src/front/Components/DesignSystem/Header/NavigationLink/index.tsx deleted file mode 100644 index 6972f93f..00000000 --- a/src/front/Components/DesignSystem/Header/NavigationLink/index.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from "react"; -import classes from "./classes.module.scss"; -import Link from "next/link"; -import classNames from "classnames"; -import { useRouter } from "next/router"; -import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; - -type IProps = { - text: string | JSX.Element; - path?: string; - onClick?: () => void; - isEnabled?: boolean; - isActive?: boolean; - routesActive?: string[]; - target?: "blank" | "self" | "_blank"; -}; - -type IPropsClass = IProps; -type IStateClass = {}; - -class NavigationLinkClass extends React.Component { - static defaultProps = { isEnabled: true }; - public override render(): JSX.Element | null { - if (!this.props.isEnabled) return null; - return ( - -
- - {this.props.text} - -
- - ); - } -} - -export default function NavigationLink(props: IProps) { - const router = useRouter(); - const { pathname } = router; - let isActive = props.path === pathname; - if (props.routesActive) { - for (const routeActive of props.routesActive) { - if (isActive) break; - isActive = pathname.includes(routeActive); - } - } - return ; -} diff --git a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss index d2eabeed..1745bc20 100644 --- a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss @@ -1,14 +1,26 @@ @import "@Themes/constants.scss"; .root { - display: flex; - flex-direction: column; - background-color: var(--color-generic-white); - box-shadow: $shadow-nav; - padding: 24px; position: absolute; - top: 107px; - right: 66px; + top: 48px; + + display: inline-flex; + flex-direction: column; + align-items: flex-start; + + padding: var(--spacing-05, 4px) var(--spacing-2, 16px); + + border-radius: var(--menu-radius, 0); + border: 1px solid var(--menu-border, #d7dce0); + background: var(--color-generic-white, #fff); + + text-wrap: nowrap; + + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1); + z-index: 3; + top: calc(var(--header-height) + 10px); + right: 32px; + text-align: center; animation: smooth-appear 0.2s ease forwards; @@ -20,15 +32,6 @@ opacity: 1; } } - - > *:not(:last-child) { - margin-bottom: 24px; - } - - .separator { - width: 100%; - border: 1px solid var(--color-neutral-200); - } } .background { diff --git a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx index 3a815e2e..535151e9 100644 --- a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx +++ b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx @@ -2,8 +2,8 @@ import LogOutButton from "@Front/Components/DesignSystem/LogOutButton"; import Module from "@Front/Config/Module"; import React from "react"; -import NavigationLink from "../../NavigationLink"; import classes from "./classes.module.scss"; +import MenuItem from "@Front/Components/DesignSystem/Menu/MenuItem"; type IProps = { isOpen: boolean; @@ -19,10 +19,28 @@ export default class ProfileModal extends React.Component { <>
- - - -
+ + + + +
diff --git a/src/front/Components/DesignSystem/Header/classes.module.scss b/src/front/Components/DesignSystem/Header/classes.module.scss index 929a37be..ee508b5a 100644 --- a/src/front/Components/DesignSystem/Header/classes.module.scss +++ b/src/front/Components/DesignSystem/Header/classes.module.scss @@ -6,7 +6,7 @@ align-items: center; flex-shrink: 0; - height: 75px; + height: var(--header-height); padding: 0px var(--spacing-lg, 24px); border-bottom: 1px solid var(--menu-border, #d7dce0); diff --git a/src/front/Components/DesignSystem/Header/index.tsx b/src/front/Components/DesignSystem/Header/index.tsx index b0efedca..4e5c17bc 100644 --- a/src/front/Components/DesignSystem/Header/index.tsx +++ b/src/front/Components/DesignSystem/Header/index.tsx @@ -23,6 +23,8 @@ type IProps = { isUserConnected: boolean; }; +const headerHeight = 75; + export default function Header(props: IProps) { const { isUserConnected } = props; @@ -44,6 +46,7 @@ export default function Header(props: IProps) { }, []); useEffect(() => { + document.documentElement.style.setProperty("--header-height", `${headerHeight}px`); loadSubscription(); }, [loadSubscription]); @@ -51,7 +54,7 @@ export default function Header(props: IProps) { <>
- +
diff --git a/src/front/Components/DesignSystem/LogOutButton/index.tsx b/src/front/Components/DesignSystem/LogOutButton/index.tsx index a4f3bcd1..6e1b1e13 100644 --- a/src/front/Components/DesignSystem/LogOutButton/index.tsx +++ b/src/front/Components/DesignSystem/LogOutButton/index.tsx @@ -1,27 +1,20 @@ -import React from "react"; -import Image from "next/image"; -import DisconnectIcon from "@Assets/Icons/disconnect.svg"; -import classes from "./classes.module.scss"; -import Typography, { ETypo, ETypoColor } from "../Typography"; -import { useRouter } from "next/router"; -import UserStore from "@Front/Stores/UserStore"; import { FrontendVariables } from "@Front/Config/VariablesFront"; +import UserStore from "@Front/Stores/UserStore"; +import { PowerIcon } from "@heroicons/react/24/outline"; +import { useRouter } from "next/router"; +import React, { useCallback } from "react"; + +import MenuItem from "../Menu/MenuItem"; export default function LogOut() { const router = useRouter(); const variables = FrontendVariables.getInstance(); - const disconnect = async () => { - await UserStore.instance.disconnect(); - router.push(`https://qual-connexion.idnot.fr/user/auth/logout?sourceURL=${variables.FRONT_APP_HOST}`); - }; + const disconnect = useCallback(() => { + UserStore.instance + .disconnect() + .then(() => router.push(`https://qual-connexion.idnot.fr/user/auth/logout?sourceURL=${variables.FRONT_APP_HOST}`)); + }, [router, variables.FRONT_APP_HOST]); - return ( -
- - Déconnexion - - disconnect -
- ); + return , onClick: disconnect }} />; } diff --git a/src/front/Components/DesignSystem/Menu/MenuItem/classes.module.scss b/src/front/Components/DesignSystem/Menu/MenuItem/classes.module.scss index 715b9ccf..9e952ad8 100644 --- a/src/front/Components/DesignSystem/Menu/MenuItem/classes.module.scss +++ b/src/front/Components/DesignSystem/Menu/MenuItem/classes.module.scss @@ -1,5 +1,6 @@ .root { width: 100%; + .menu-item { display: flex; padding: var(--spacing-md, 16px); @@ -7,12 +8,16 @@ align-items: center; gap: var(--spacing-lg, 24px); cursor: pointer; + } - > svg { - width: 24px; - height: 24px; - transition: all ease-in-out 0.1s; - } + svg { + width: 24px; + height: 24px; + transition: transform 0.3s ease-in-out; + } + + .chevron.open { + transform: rotate(180deg); } .separator { @@ -20,4 +25,14 @@ height: 1px; background-color: var(--separator-stroke-light, #d7dce0); } + + .dropdown { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease-in-out; + } + + .dropdown.open { + max-height: 500px; + } } diff --git a/src/front/Components/DesignSystem/Menu/MenuItem/index.tsx b/src/front/Components/DesignSystem/Menu/MenuItem/index.tsx index 72e0c830..3ca577ff 100644 --- a/src/front/Components/DesignSystem/Menu/MenuItem/index.tsx +++ b/src/front/Components/DesignSystem/Menu/MenuItem/index.tsx @@ -3,27 +3,71 @@ import classes from "./classes.module.scss"; import { useRouter } from "next/router"; import React, { useCallback, useEffect } from "react"; import useHoverable from "@Front/Hooks/useHoverable"; -import { IItem } from ".."; import classNames from "classnames"; +import { IAppRule } from "@Front/Api/Entities/rule"; +import { ChevronDownIcon } from "@heroicons/react/24/outline"; +import useOpenable from "@Front/Hooks/useOpenable"; type IProps = { item: IItem; - closeMenuCb: () => void; }; + +type IItemBase = { + text: string; + icon?: JSX.Element; + hasSeparator?: boolean; + color?: ETypoColor; + onClose?: () => void; +}; + +type IItemWithLink = IItemBase & { + link: string; + rules?: IAppRule[]; + routesActive?: string[]; + onClick?: never; + dropdown?: never; + target?: "_blank"; +}; + +type IItemWithOnClick = IItemBase & { + onClick: () => void; + link?: never; + rules?: never; + routesActive?: never; + dropdown?: never; + target?: never; +}; + +type IItemWithDropdown = IItemBase & { + dropdown: { + items: IItem[]; + }; + routesActive?: never; + link?: never; + rules?: never; + onClick?: never; + target?: never; +}; + +export type IItem = IItemWithLink | IItemWithOnClick | IItemWithDropdown; + export default function MenuItem(props: IProps) { - const { item, closeMenuCb } = props; + const { item } = props; const router = useRouter(); const { pathname } = router; const [isActive, setIsActive] = React.useState(item.link === pathname); + const { isOpen, toggle, open } = useOpenable(); + const handleClickElement = useCallback( (e: React.MouseEvent) => { - closeMenuCb(); + item.onClose?.(); const link = e.currentTarget.getAttribute("data-link"); + if (item.target === "_blank") window.open(item.link, "_blank"); if (link) router.push(link); if (item.onClick) item.onClick(); }, - [closeMenuCb, item, router], + [item, router], ); const { handleMouseEnter, handleMouseLeave, isHovered } = useHoverable(); @@ -44,7 +88,25 @@ export default function MenuItem(props: IProps) { if (pathname.includes(routeActive)) setIsActive(true); } } - }, [isActive, item.link, item.routesActive, pathname]); + if (item.dropdown) { + for (const subItem of item.dropdown.items) { + if (isActive) break; + if (subItem.link === pathname) { + !isOpen && open(); + setIsActive(true); + } + if (subItem.routesActive) { + for (const routeActive of subItem.routesActive) { + if (isActive) break; + if (pathname.includes(routeActive)) { + !isOpen && open(); + setIsActive(true); + } + } + } + } + } + }, [isActive, isOpen, item.dropdown, item.link, item.routesActive, open, pathname]); return (
-
- {React.cloneElement(item.icon, { color: `var(${getColor()})` })} +
+ {item.icon && React.cloneElement(item.icon, { color: `var(${getColor()})` })} {item.text} + {item.dropdown && + React.cloneElement(, { + color: `var(${getColor()})`, + })}
+ {item.dropdown && ( +
+ {item.dropdown.items.map((subItem, index) => ( + + ))} +
+ )} {item.hasSeparator &&
}
); diff --git a/src/front/Components/DesignSystem/Menu/index.tsx b/src/front/Components/DesignSystem/Menu/index.tsx index f0dca424..891b978c 100644 --- a/src/front/Components/DesignSystem/Menu/index.tsx +++ b/src/front/Components/DesignSystem/Menu/index.tsx @@ -1,35 +1,10 @@ -import { IAppRule } from "@Front/Api/Entities/rule"; -import { ETypoColor } from "@Front/Components/DesignSystem/Typography"; import Rules, { RulesMode } from "@Front/Components/Elements/Rules"; import useHoverable from "@Front/Hooks/useHoverable"; import useOpenable from "@Front/Hooks/useOpenable"; import React, { useEffect, useRef } from "react"; import classes from "./classes.module.scss"; -import MenuItem from "./MenuItem"; - -type IItemBase = { - icon: JSX.Element; - text: string; - hasSeparator?: boolean; - color?: ETypoColor; -}; - -type IItemWithLink = IItemBase & { - link: string; - rules?: IAppRule[]; - routesActive?: string[]; - onClick?: never; -}; - -type IItemWithOnClick = IItemBase & { - onClick: () => void; - link?: never; - rules?: never; - routesActive?: never; -}; - -export type IItem = IItemWithLink | IItemWithOnClick; +import MenuItem, { IItem } from "./MenuItem"; type IProps = { children: React.ReactNode; @@ -79,7 +54,7 @@ export default function Menu(props: IProps) { {items.map((item, index) => { return ( - + ); })} diff --git a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss index c4e19f2a..f54563dd 100644 --- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss @@ -14,7 +14,7 @@ .content { display: flex; overflow: hidden; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); .overlay { position: absolute; @@ -66,7 +66,7 @@ justify-content: center; min-width: 56px; max-width: 56px; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); border-right: 1px var(--color-neutral-200) solid; @media (min-width: $screen-m) { diff --git a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss index c4e19f2a..f54563dd 100644 --- a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss @@ -14,7 +14,7 @@ .content { display: flex; overflow: hidden; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); .overlay { position: absolute; @@ -66,7 +66,7 @@ justify-content: center; min-width: 56px; max-width: 56px; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); border-right: 1px var(--color-neutral-200) solid; @media (min-width: $screen-m) { diff --git a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss index c4e19f2a..f54563dd 100644 --- a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss @@ -14,7 +14,7 @@ .content { display: flex; overflow: hidden; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); .overlay { position: absolute; @@ -66,7 +66,7 @@ justify-content: center; min-width: 56px; max-width: 56px; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); border-right: 1px var(--color-neutral-200) solid; @media (min-width: $screen-m) { diff --git a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss index e99cca13..8d431201 100644 --- a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss @@ -5,7 +5,7 @@ .content { display: flex; .sides { - min-height: calc(100vh - 83px); + min-height: calc(100vh - var(--header-height)); width: 50%; @media (max-width: $screen-m) { width: 100%; @@ -31,7 +31,7 @@ width: 50vw; top: 83px; right: 0; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); @media (max-width: $screen-m) { display: none; } diff --git a/src/front/Components/LayoutTemplates/DefaultLayout.tsx b/src/front/Components/LayoutTemplates/DefaultLayout.tsx index 322f5bd3..148fedf7 100644 --- a/src/front/Components/LayoutTemplates/DefaultLayout.tsx +++ b/src/front/Components/LayoutTemplates/DefaultLayout.tsx @@ -8,7 +8,7 @@ export const DefaultLayout = ({ children }: DefaultLayoutProps) => { <> LEcoffre - {/* */} + {/* */}
{children} diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss index 69cef63d..4a8599a1 100644 --- a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss @@ -15,7 +15,7 @@ .content { display: flex; overflow: hidden; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); .overlay { position: absolute; @@ -67,7 +67,7 @@ justify-content: center; min-width: 56px; max-width: 56px; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); border-right: 1px var(--color-neutral-200) solid; @media (min-width: $screen-m) { diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss index c4e19f2a..f54563dd 100644 --- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss @@ -14,7 +14,7 @@ .content { display: flex; overflow: hidden; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); .overlay { position: absolute; @@ -66,7 +66,7 @@ justify-content: center; min-width: 56px; max-width: 56px; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); border-right: 1px var(--color-neutral-200) solid; @media (min-width: $screen-m) { diff --git a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss index c4e19f2a..f54563dd 100644 --- a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss @@ -14,7 +14,7 @@ .content { display: flex; overflow: hidden; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); .overlay { position: absolute; @@ -66,7 +66,7 @@ justify-content: center; min-width: 56px; max-width: 56px; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); border-right: 1px var(--color-neutral-200) solid; @media (min-width: $screen-m) { diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss index f4e58c6d..059853fe 100644 --- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss +++ b/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss @@ -14,7 +14,7 @@ .content { display: flex; overflow: hidden; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); .overlay { position: absolute; @@ -66,7 +66,7 @@ justify-content: center; min-width: 56px; max-width: 56px; - height: calc(100vh - 83px); + height: calc(100vh - var(--header-height)); border-right: 1px var(--color-neutral-200 solid); @media (min-width: $screen-m) { diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx index 264db94d..3a02bd33 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx +++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx @@ -28,10 +28,17 @@ export default function ClientView(props: IProps) { const customers: ICustomer[] = useMemo( () => - folder?.customers?.map((customer) => ({ - id: customer.uid ?? "", - ...customer, - })) ?? [], + folder?.customers + ?.map((customer) => ({ + id: customer.uid ?? "", + ...customer, + })) + .sort((a, b) => { + return a.documents && + a.documents.filter((document) => document.document_status === EDocumentStatus.DEPOSITED).length > 0 + ? -1 + : 1; + }) ?? [], [folder], ); diff --git a/src/front/Components/Layouts/Folder/FolderInformation/InformationSection/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/InformationSection/index.tsx index ef264e44..c7c6722b 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/InformationSection/index.tsx +++ b/src/front/Components/Layouts/Folder/FolderInformation/InformationSection/index.tsx @@ -1,6 +1,5 @@ import CircleProgress from "@Front/Components/DesignSystem/CircleProgress"; import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton"; -import Menu, { IItem } from "@Front/Components/DesignSystem/Menu"; import Tag, { ETagColor } from "@Front/Components/DesignSystem/Tag"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import Module from "@Front/Config/Module"; @@ -10,6 +9,8 @@ import { useCallback } from "react"; import { AnchorStatus } from ".."; import classes from "./classes.module.scss"; +import { IItem } from "@Front/Components/DesignSystem/Menu/MenuItem"; +import Menu from "@Front/Components/DesignSystem/Menu"; type IProps = { folder: OfficeFolder | null; diff --git a/src/front/index.scss b/src/front/index.scss index 3b8e1f7e..5b066837 100644 --- a/src/front/index.scss +++ b/src/front/index.scss @@ -46,13 +46,6 @@ a, a:visited { color: initial; text-decoration: none !important; - opacity: 1; - transition: opacity 0.15s ease-in-out; - will-change: opacity; -} - -a:hover { - opacity: 0.9; } .react-select__input-container {