From 3489a102242671c4759a433788446df0a07c08bb Mon Sep 17 00:00:00 2001
From: Fefedu973 <80718477+Fefedu973@users.noreply.github.com>
Date: Mon, 11 Nov 2024 13:56:04 +0100
Subject: [PATCH 1/4] documents error messages lifting

---
 src/components/app/Account/Account.css | 21 +++++-
 src/components/app/Account/Account.jsx | 96 ++++++++++++++------------
 2 files changed, 73 insertions(+), 44 deletions(-)

diff --git a/src/components/app/Account/Account.css b/src/components/app/Account/Account.css
index 9b74a3a..7f05bfe 100644
--- a/src/components/app/Account/Account.css
+++ b/src/components/app/Account/Account.css
@@ -65,11 +65,13 @@ body:has(#account) {
     display: flex;
     flex-flow: column nowrap;
 }
+
 #documents.frame {
     display: flex;
     flex-flow: column nowrap;
     overflow: auto;
 }
+
 .coming-soon {
     height: 100%;
     color: rgb(var(--text-color-alt));
@@ -82,6 +84,7 @@ body:has(#account) {
     border-radius: 8px;
     opacity: .5;
 }
+
 #profile .coming-soon {
     margin-top: 30px;
 }
@@ -152,7 +155,7 @@ body:has(#account) {
         grid-column: auto;
         grid-row: 3 / 4;
     }
-    
+
     #account .frame .frame-heading {
         padding-block: 10px;
     }
@@ -245,12 +248,16 @@ body:has(#account) {
     font-size: var(--font-size-16);
     font-weight: 500;
 }
+
 .no-available-documents {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100%;
     width: 100%;
+    gap: 15px;
+    color: rgb(var(--text-color));
 }
 
 .document-container {
@@ -259,4 +266,16 @@ body:has(#account) {
 
 .single-year {
     padding-left: 0 !important;
+}
+
+.documents-container {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+}
+
+.sleeping-logo {
+    width: 100px;
+    height: 100px;
+    margin: 0 auto;
 }
\ No newline at end of file
diff --git a/src/components/app/Account/Account.jsx b/src/components/app/Account/Account.jsx
index 88b15f7..558b958 100644
--- a/src/components/app/Account/Account.jsx
+++ b/src/components/app/Account/Account.jsx
@@ -7,9 +7,10 @@ import DropDownMenu from "../../generic/UserInputs/DropDownMenu";
 import { getProxiedURL } from "../../../utils/requests";
 import FileComponent from "../../generic/FileComponent";
 import ContentLoader from "react-content-loader";
+import CanardmanSleeping from "../../graphics/CanardmanSleeping";
+import ConfusedCanardman from "../../graphics/ConfusedCanardman";
 
 import "./Account.css";
-import { is } from "date-fns/locale";
 
 export default function Account({ schoolLife, fetchSchoolLife, fetchAdministrativeDocuments, sortSchoolLife, isLoggedIn, activeAccount }) {
     const { actualDisplayTheme, accountsListState, useUserData, useUserSettings } = useContext(AppContext)
@@ -154,48 +155,53 @@ export default function Account({ schoolLife, fetchSchoolLife, fetchAdministrati
                             ) : null
                             }
                         </div>
-                        <div className="documents-container">
+                        <div className="documents-container" style={
+                            {
+                                //if isLoadingDocuments is true, set overflow to hidden to prevent scrolling
+                                overflow: isLoadingDocuments ? "hidden" : "auto"
+                            }
+                        }>
                             {isLoadingDocuments ? (
                                 <div>
                                     <div className="document-category">
                                         {Array.from({ length: 5 }).map((_, index) => (
-                                        <div style={{padding: "15px"}}>
-                                        <h3 style={{paddingBottom: "10px"}}>
-                                            <ContentLoader
-                                            animate={settings.get("displayMode") === "quality"}
-                                            speed={1}
-                                            backgroundColor={actualDisplayTheme === "dark" ? "#63638c" : "#9d9dbd"}
-                                            foregroundColor={actualDisplayTheme === "dark" ? "#7e7eb2" : "#bcbce3"}
-                                            height="30"
-                                            style={{ width: "30%" }}
-                                        >
-                                            <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" />
-                                            </ContentLoader>
-                                        </h3>
-                                            {Array.from({ length: Math.floor(Math.random() * 10 + 1) }, (_, index) => (
-                                            <div className="file-box-loader " style={{paddingBottom: "3px"}}>
-                                                <ContentLoader
-                                                    animate={settings.get("displayMode") === "quality"}
-                                                    speed={1}
-                                                    backgroundColor={actualDisplayTheme === "dark" ? "#63638c" : "#9d9dbd"}
-                                                    foregroundColor={actualDisplayTheme === "dark" ? "#7e7eb2" : "#bcbce3"}
-                                                    height="30"
-                                                    style={{ width: `${Math.floor(Math.random() * 31) + 60}%` }}
-                                                >
-                                                    <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" />
-                                                </ContentLoader>
-                                                <h2 className="file-date">                                <ContentLoader
-                                                    animate={settings.get("displayMode") === "quality"}
-                                                    speed={1}
-                                                    backgroundColor={actualDisplayTheme === "dark" ? "#63638c" : "#9d9dbd"}
-                                                    foregroundColor={actualDisplayTheme === "dark" ? "#7e7eb2" : "#bcbce3"}
-                                                    height="30"
-                                                    style={{ width: "100%" }}
-                                                >
-                                                    <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" />
-                                                </ContentLoader></h2>
-                                            </div>
-                                        ))}
+                                            <div style={{ padding: "15px" }}>
+                                                <h3 style={{ paddingBottom: "10px" }}>
+                                                    <ContentLoader
+                                                        animate={settings.get("displayMode") === "quality"}
+                                                        speed={1}
+                                                        backgroundColor={actualDisplayTheme === "dark" ? "#63638c" : "#9d9dbd"}
+                                                        foregroundColor={actualDisplayTheme === "dark" ? "#7e7eb2" : "#bcbce3"}
+                                                        height="30"
+                                                        style={{ width: "30%" }}
+                                                    >
+                                                        <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" />
+                                                    </ContentLoader>
+                                                </h3>
+                                                {Array.from({ length: Math.floor(Math.random() * 10 + 1) }, (_, index) => (
+                                                    <div className="file-box-loader " style={{ paddingBottom: "3px" }}>
+                                                        <ContentLoader
+                                                            animate={settings.get("displayMode") === "quality"}
+                                                            speed={1}
+                                                            backgroundColor={actualDisplayTheme === "dark" ? "#63638c" : "#9d9dbd"}
+                                                            foregroundColor={actualDisplayTheme === "dark" ? "#7e7eb2" : "#bcbce3"}
+                                                            height="30"
+                                                            style={{ width: `${Math.floor(Math.random() * 31) + 60}%` }}
+                                                        >
+                                                            <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" />
+                                                        </ContentLoader>
+                                                        <h2 className="file-date">                                <ContentLoader
+                                                            animate={settings.get("displayMode") === "quality"}
+                                                            speed={1}
+                                                            backgroundColor={actualDisplayTheme === "dark" ? "#63638c" : "#9d9dbd"}
+                                                            foregroundColor={actualDisplayTheme === "dark" ? "#7e7eb2" : "#bcbce3"}
+                                                            height="30"
+                                                            style={{ width: "100%" }}
+                                                        >
+                                                            <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" />
+                                                        </ContentLoader></h2>
+                                                    </div>
+                                                ))}
                                             </div>
                                         ))}
                                     </div>
@@ -208,8 +214,10 @@ export default function Account({ schoolLife, fetchSchoolLife, fetchAdministrati
                                     documents?.factures?.length === 0
                                     // && documents?.inscriptionsReinscriptions?.length === 0
                                     ? (
-                                        <span className="no-available-documents">Aucun document disponible.</span>
-                                        // TODO: add content-loader
+                                        <div className="no-available-documents">
+                                            <span>Aucun document disponible</span>
+                                            <CanardmanSleeping className="sleeping-logo" />
+                                        </div>
                                     ) : (
                                         <>
                                             {/* {module.params.DocumentsInscriptionsReinscriptionsActif === "1" && documents?.inscriptionsReinscriptions?.length > 0 && (
@@ -284,8 +292,10 @@ export default function Account({ schoolLife, fetchSchoolLife, fetchAdministrati
                         </div>
                     </>
                 ) : (
-                    <div className="documents-container">
-                        <span className="no-available-documents">Le module de documents n'est pas accessible.</span>
+
+                    <div className="no-available-documents">
+                        <span>Le module de documents n'est pas accessible</span>
+                        <ConfusedCanardman className="sleeping-logo" />
                     </div>
                 )}
             </section>

From 3ab446275485f53033301aefae8f7193b3458ff6 Mon Sep 17 00:00:00 2001
From: Fefedu973 <80718477+Fefedu973@users.noreply.github.com>
Date: Mon, 11 Nov 2024 14:26:54 +0100
Subject: [PATCH 2/4] fix fullscreen mobile bug

---
 src/components/app/Grades/MobileResults.jsx |  6 ++++--
 src/components/generic/Window.jsx           | 13 ++++---------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/components/app/Grades/MobileResults.jsx b/src/components/app/Grades/MobileResults.jsx
index b7b9900..0772fa1 100644
--- a/src/components/app/Grades/MobileResults.jsx
+++ b/src/components/app/Grades/MobileResults.jsx
@@ -6,7 +6,8 @@ import {
     MoveableContainer,
     Window,
     WindowHeader,
-    WindowContent
+    WindowContent,
+    WindowsContainer
 } from "../../generic/Window";
 
 import InfoButton from "../../generic/Informative/InfoButton";
@@ -58,7 +59,7 @@ export default function Results({ activeAccount, sortedGrades, selectedPeriod, s
                         </div>
                     }
                 </MoveableContainer>
-                <Window>
+                <Window allowFullscreen={true}>
                     <WindowHeader className="results-header">
                         <div className="results-title">
                             <h2>Résultats</h2>
@@ -292,5 +293,6 @@ export default function Results({ activeAccount, sortedGrades, selectedPeriod, s
                 </Window>
             </MoveableContainer>
         </MoveableContainer>
+        
     )
 }
\ No newline at end of file
diff --git a/src/components/generic/Window.jsx b/src/components/generic/Window.jsx
index 959a181..4d8405d 100644
--- a/src/components/generic/Window.jsx
+++ b/src/components/generic/Window.jsx
@@ -773,22 +773,18 @@ export function WindowsContainer({ children, name = "", className = "", id = "",
 
         function cleanup() {
             for (let header of headers) {
-                header.removeEventListener("mousedown", handleMouseDown);
-                header.removeEventListener("touchstart", handleMouseDown);
+                header.removeEventListener("pointerdown", handleMouseDown);
                 for (let child of header.children) {
-                    child.removeEventListener("mousedown", stopEventPropagation);
-                    child.removeEventListener("touchstart", stopEventPropagation);
+                    child.removeEventListener("pointerdown", stopEventPropagation);
                 }
             }
         }
 
         for (let header of headers) {
             if (allowWindowsManagement) {
-                header.addEventListener("mousedown", handleMouseDown);
-                header.addEventListener("touchstart", handleMouseDown);
+                header.addEventListener("pointerdown", handleMouseDown);
                 for (let child of header.children) {
-                    child.addEventListener("mousedown", stopEventPropagation);
-                    child.addEventListener("touchstart", stopEventPropagation);
+                    child.addEventListener("pointerdown", stopEventPropagation);
                 }
             }
         }
@@ -798,7 +794,6 @@ export function WindowsContainer({ children, name = "", className = "", id = "",
         };
     }, [isTabletLayout, allowWindowsManagement]);
 
-
     useEffect(() => {
         // load and apply old windowArrangement
         if (name) {

From ec03262430b37aa9d773e39703d355a885e341cc Mon Sep 17 00:00:00 2001
From: Fefedu973 <80718477+Fefedu973@users.noreply.github.com>
Date: Mon, 11 Nov 2024 14:41:42 +0100
Subject: [PATCH 3/4] better mobile layout

---
 src/components/app/Messaging/MessageReader.css | 11 +++++++++++
 src/components/app/Messaging/MessageReader.jsx |  2 +-
 src/components/app/Messaging/Messaging.jsx     |  2 +-
 src/components/generic/PopUps/Tooltip.jsx      | 16 +++++++++++++---
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/app/Messaging/MessageReader.css b/src/components/app/Messaging/MessageReader.css
index a8657e3..e596f37 100644
--- a/src/components/app/Messaging/MessageReader.css
+++ b/src/components/app/Messaging/MessageReader.css
@@ -112,6 +112,17 @@
     }
 }
 
+@media (max-width: 600px) {
+    #message-reader .email-footer {
+        height: 200px;
+        flex-direction: column;
+    }
+
+    .actions-container {
+        margin: auto;
+    }
+}
+
 #message-reader .attachments-container {
     list-style-type: none;
     height: 100%;
diff --git a/src/components/app/Messaging/MessageReader.jsx b/src/components/app/Messaging/MessageReader.jsx
index f03cce0..b3eedf6 100644
--- a/src/components/app/Messaging/MessageReader.jsx
+++ b/src/components/app/Messaging/MessageReader.jsx
@@ -138,7 +138,7 @@ export default function MessageReader({ selectedMessage, fetchMessageMarkAsUnrea
                                 }
                             }><PrintIcon /></button></TooltipTrigger><TooltipContent>Imprimer</TooltipContent></Tooltip>
                             {parsedHashFolder != -2 && parsedHashFolder != -1 && parsedHashFolder != -4 ? (
-                                <Tooltip className="action-button-main"><TooltipTrigger><button className="action-button"><FolderIcon /></button></TooltipTrigger><TooltipContent>
+                                <Tooltip className="action-button-main" closeOnClickInside={true}><TooltipTrigger><button className="action-button"><FolderIcon /></button></TooltipTrigger><TooltipContent>
                                     <TooltipContent className="no-questionmark">
                                         <h3>Changer De Dossier</h3>
                                         <ul className="folders-container">
diff --git a/src/components/app/Messaging/Messaging.jsx b/src/components/app/Messaging/Messaging.jsx
index 427ebdc..2a6ac2f 100644
--- a/src/components/app/Messaging/Messaging.jsx
+++ b/src/components/app/Messaging/Messaging.jsx
@@ -242,7 +242,7 @@ export default function Messaging({ isLoggedIn, activeAccount, fetchMessages, fe
                     <Window allowFullscreen={true} className="inbox-window">
                         <WindowHeader className="inbox-window-header">
                             {folders !== undefined && folders.length > 1
-                                ? <Tooltip className="folder-tooltip" placement="bottom" onClick={(event) => event.stopPropagation()}>
+                                ? <Tooltip className="folder-tooltip" placement="bottom" closeOnClickInside={true} onClick={(event) => event.stopPropagation()}>
                                     <TooltipTrigger> <FolderIcon className="folder-icon" /> </TooltipTrigger>
                                     <TooltipContent className="no-questionmark">
                                         <h3>Dossiers</h3>
diff --git a/src/components/generic/PopUps/Tooltip.jsx b/src/components/generic/PopUps/Tooltip.jsx
index 0a650c1..30a48b4 100644
--- a/src/components/generic/PopUps/Tooltip.jsx
+++ b/src/components/generic/PopUps/Tooltip.jsx
@@ -126,6 +126,7 @@ function useTooltip(options) {
         isOpen,
         setIsOpen,
         arrowRef,
+        options,
         ...interactions,
         ...transition,
         ...data
@@ -146,7 +147,7 @@ function useTooltipContext() {
 };
 
 export function Tooltip({ children, className = "", id = "", ...options }) {
-    const tooltip = useTooltip(options)
+    const tooltip = useTooltip(options);
 
     return (
         <div className={`tooltip ${className}`} id={id}>
@@ -154,7 +155,7 @@ export function Tooltip({ children, className = "", id = "", ...options }) {
                 {children}
             </TooltipContext.Provider>
         </div>
-    )
+    );
 }
 
 export const TooltipTrigger = forwardRef(function TooltipTrigger({ children, ...props }, propRef) {
@@ -198,6 +199,13 @@ export const TooltipContent = forwardRef(function TooltipContent({ children, sty
     // Affiche / N'affiche pas la tooltip
     if (!context.isMounted) return null;
 
+    // Gestion du clic à l'intérieur pour fermer la tooltip
+    const handleClickInside = () => {
+        if (context.options.closeOnClickInside) {
+            context.setIsOpen(false);
+        }
+    };
+
     return (
         <FloatingPortal>
             <div
@@ -209,10 +217,12 @@ export const TooltipContent = forwardRef(function TooltipContent({ children, sty
                     ...style
                 }}
                 {...context.getFloatingProps(props)}
+                onClick={handleClickInside}
             >
                 <FloatingArrow className={`floating-arrow ${className}`} ref={context.arrowRef} context={context} tipRadius={2} width={ARROW_WIDTH} height={ARROW_HEIGHT} />
                 {children}
             </div>
         </FloatingPortal>
-    )
+    );
 });
+

From 307cde9cd1f722dfdeaf44f95dca47fcecf4c621 Mon Sep 17 00:00:00 2001
From: Fefedu973 <80718477+Fefedu973@users.noreply.github.com>
Date: Mon, 11 Nov 2024 14:47:32 +0100
Subject: [PATCH 4/4] only for mobile close tooltip

---
 src/components/generic/PopUps/Tooltip.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/generic/PopUps/Tooltip.jsx b/src/components/generic/PopUps/Tooltip.jsx
index 30a48b4..ec271e8 100644
--- a/src/components/generic/PopUps/Tooltip.jsx
+++ b/src/components/generic/PopUps/Tooltip.jsx
@@ -19,6 +19,7 @@ import {
     useMergeRefs,
     FloatingPortal
 } from "@floating-ui/react";
+import { AppContext } from "../../../App";
 // Check out the FloatingUI docs for more information : https://floating-ui.com/docs/react
 
 import './Tooltip.css'
@@ -194,6 +195,7 @@ export const TooltipTrigger = forwardRef(function TooltipTrigger({ children, ...
 
 export const TooltipContent = forwardRef(function TooltipContent({ children, style, className = "", ...props }, propRef) {
     const context = useTooltipContext();
+    const { isTabletLayout } = useContext(AppContext);
     const ref = useMergeRefs([context.refs.setFloating, children.ref, propRef]);
 
     // Affiche / N'affiche pas la tooltip
@@ -201,7 +203,7 @@ export const TooltipContent = forwardRef(function TooltipContent({ children, sty
 
     // Gestion du clic à l'intérieur pour fermer la tooltip
     const handleClickInside = () => {
-        if (context.options.closeOnClickInside) {
+        if (context.options.closeOnClickInside && isTabletLayout) {
             context.setIsOpen(false);
         }
     };