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

background welcome folder

Browse Source
This commit is contained in:
Max S 2024-07-23 11:16:00 +02:00
parent 2cdd13eceb
commit 63b3551e2e
4 changed files with 59 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/front/Assets/images/background_refonte_reverse.svg Normal file
View File

@ -0,0 +1,22 @@
<svg width="348" height="908" viewBox="0 0 348 908" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_38_40737)">
<path opacity="0.5" d="M-138.555 -474.276L170.214 -474.276C109.669 -351.818 93.546 -207.015 135.77 -65.7741C179.425 80.2311 277.292 195.115 400.753 263.411L400.753 583.806L246.578 630.046C218.728 638.402 189.388 622.559 181.045 594.667L-138.555 -474.276Z" fill="#005BCB"/>
</g>
<g clip-path="url(#clip1_38_40737)">
<g clip-path="url(#clip2_38_40737)">
<path d="M410.131 204.837L590.401 385.106C483.532 421.279 389.548 496.437 331.709 603.579C271.923 714.34 261.964 838.575 294.157 950.543L107.033 1137.67L-9.98578 1074.66C-31.126 1063.28 -39.0026 1036.9 -27.5838 1015.74L410.131 204.837Z" stroke="#005BCB" stroke-width="2" stroke-miterlimit="10"/>
</g>
</g>
<defs>
<clipPath id="clip0_38_40737">
<rect width="653.982" height="348" fill="white" transform="translate(3.05176e-05 653.981) rotate(-90)"/>
</clipPath>
<clipPath id="clip1_38_40737">
<rect width="348" height="626.271" fill="white" transform="translate(3.05176e-05 281.729)"/>
</clipPath>
<clipPath id="clip2_38_40737">
<rect width="796.226" height="435.126" fill="white" transform="translate(-198 811.836) rotate(-45)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

16
src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
View File

@ -11,6 +11,7 @@
} }
.root { .root {
position: relative;
.content { .content {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
@ -114,4 +115,19 @@
} }
} }
} }
.background-image-container {
position: fixed;
top: 0;
right: 0;
@media (max-width: $screen-l) {
display: none;
}
.background-image {
width: 100%;
height: 100%;
object-fit: cover;
}
}
} }

12
src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
View File

@ -1,20 +1,20 @@
import ChevronIcon from "@Assets/Icons/chevron.svg"; import ChevronIcon from "@Assets/Icons/chevron.svg";
import Folders, { IGetFoldersParams } from "@Front/Api/LeCoffreApi/Notary/Folders/Folders"; import Folders, { IGetFoldersParams } from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
import FolderArchivedListContainer from "@Front/Components/DesignSystem/FolderArchivedListContainer"; import FolderArchivedListContainer from "@Front/Components/DesignSystem/FolderArchivedListContainer";
import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
import Header from "@Front/Components/DesignSystem/Header"; import Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version"; import Version from "@Front/Components/DesignSystem/Version";
import BackArrow from "@Front/Components/Elements/BackArrow"; import BackArrow from "@Front/Components/Elements/BackArrow";
import WindowStore from "@Front/Stores/WindowStore"; import WindowStore from "@Front/Stores/WindowStore";
import { ChevronLeftIcon } from "@heroicons/react/24/outline";
import classNames from "classnames"; import classNames from "classnames";
import EFolderStatus from "le-coffre-resources/dist/Customer/EFolderStatus"; import EFolderStatus from "le-coffre-resources/dist/Customer/EFolderStatus";
import { OfficeFolder } from "le-coffre-resources/dist/Notary"; import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import Image from "next/image"; import Image, { StaticImageData } from "next/image";
import React, { ReactNode } from "react"; import React, { ReactNode } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import { ChevronLeftIcon } from "@heroicons/react/24/outline";
type IProps = { type IProps = {
title: string; title: string;
@ -24,6 +24,7 @@ type IProps = {
hasBackArrow: boolean; hasBackArrow: boolean;
backArrowUrl?: string; backArrowUrl?: string;
mobileBackText?: string; mobileBackText?: string;
image?: StaticImageData;
}; };
type IState = { type IState = {
folders: OfficeFolder[] | null; folders: OfficeFolder[] | null;
@ -96,6 +97,11 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
)} )}
{this.props.children} {this.props.children}
</div> </div>
{this.props.image && (
<div className={classes["background-image-container"]}>
<Image alt={"right side image"} src={this.props.image} className={classes["background-image"]} priority />
</div>
)}
</div> </div>
<Version /> <Version />
</div> </div>

19
src/front/Components/Layouts/Folder/index.tsx
View File

@ -1,15 +1,16 @@
import backgroundImage from "@Assets/images/background_refonte_reverse.svg";
import LogoIcon from "@Assets/logo_small_blue.svg"; import LogoIcon from "@Assets/logo_small_blue.svg";
import Button, { EButtonVariant, EButtonstyletype } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard"; import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import { DocumentIcon } from "@heroicons/react/24/outline"; import { DocumentIcon } from "@heroicons/react/24/outline";
import { OfficeFolder } from "le-coffre-resources/dist/Notary"; import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { useCallback, useState } from "react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
import { useCallback, useState } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import Link from "next/link";
import Module from "@Front/Config/Module";
export default function Folder() { export default function Folder() {
const [_folder, setFolder] = useState<OfficeFolder | null>(null); const [_folder, setFolder] = useState<OfficeFolder | null>(null);
@ -20,7 +21,11 @@ export default function Folder() {
}, []); }, []);
return ( return (
<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={onSelectedFolder} mobileBackText={"Liste des dossiers"}> <DefaultNotaryDashboard
title={"Dossier"}
onSelectedFolder={onSelectedFolder}
mobileBackText={"Liste des dossiers"}
image={backgroundImage}>
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["content"]}> <div className={classes["content"]}>
<div className={classes["title-container"]}> <div className={classes["title-container"]}>
@ -56,7 +61,7 @@ export default function Folder() {
<div className={classes["box"]}> <div className={classes["box"]}>
<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Besoin d'aide ?</Typography> <Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Besoin d'aide ?</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>Consultez nos guides pour bien démarrer.</Typography> <Typography typo={ETypo.TEXT_MD_REGULAR}>Consultez nos guides pour bien démarrer.</Typography>
<Button variant={EButtonVariant.WARNING} styletype={EButtonstyletype.TEXT}> <Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD}>
Accéder aux guides Accéder aux guides
</Button> </Button>
</div> </div>
@ -65,7 +70,7 @@ export default function Folder() {
<div className={classes["box"]}> <div className={classes["box"]}>
<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Vous avez des questions ?</Typography> <Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Vous avez des questions ?</Typography>
<Typography typo={ETypo.TEXT_MD_REGULAR}>Notre équipe de support est là pour vous aider.</Typography> <Typography typo={ETypo.TEXT_MD_REGULAR}>Notre équipe de support est là pour vous aider.</Typography>
<Button variant={EButtonVariant.WARNING} styletype={EButtonstyletype.TEXT}> <Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD}>
Contactez le support Contactez le support
</Button> </Button>
</div> </div>