Merge branch 'working' of https://github.com/fefedu973/ecole-directe-…

…plus into pr/Fefedu973/44
Magic-Fishes · Nov 11, 2024 · 4de1cfa · 4de1cfa
2 parents 53d1a0f + 307cde9
commit 4de1cfa
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 22 deletions.
diff --git 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;
 }
diff --git 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)
@@ -151,7 +152,12 @@ 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">
@@ -206,7 +212,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>
+                                        <div className="no-available-documents">
+                                            <CanardmanSleeping className="sleeping-logo" />
+                                            <span>Aucun document disponible</span>
+                                        </div>
                                     ) : (
                                         <>
                                             {/* {module.params.DocumentsInscriptionsReinscriptionsActif === "1" && documents?.inscriptionsReinscriptions?.length > 0 && (
@@ -281,8 +290,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>

diff --git 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>
+
     )
 }
diff --git 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
@@ -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
@@ -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
@@ -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'
@@ -126,6 +127,7 @@ function useTooltip(options) {
         isOpen,
         setIsOpen,
         arrowRef,
+        options,
         ...interactions,
         ...transition,
         ...data
@@ -146,15 +148,15 @@ function useTooltipContext() {
 };
 
 export function Tooltip({ children, className = "", id = "", ...options }) {
-    const tooltip = useTooltip(options)
+    const tooltip = useTooltip(options);
 
     return (
         <div className={`tooltip ${className}`} id={id}>
             <TooltipContext.Provider value={tooltip}>
                 {children}
             </TooltipContext.Provider>
         </div>
-    )
+    );
 }
 
 export const TooltipTrigger = forwardRef(function TooltipTrigger({ children, ...props }, propRef) {
@@ -193,11 +195,19 @@ 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
     if (!context.isMounted) return null;
 
+    // Gestion du clic à l'intérieur pour fermer la tooltip
+    const handleClickInside = () => {
+        if (context.options.closeOnClickInside && isTabletLayout) {
+            context.setIsOpen(false);
+        }
+    };
+
     return (
         <FloatingPortal>
             <div
@@ -209,10 +219,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>
-    )
+    );
 });
+
diff --git 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) {