sarted working on a more sustainable solutions to show form data

ai-cfia · May 22, 2024 · 82823db · 82823db
1 parent 3d1c6ec
commit 82823db
Show file tree

Hide file tree

Showing 4 changed files with 316 additions and 53 deletions.
diff --git a/src/Components/Modal/Modal.css b/src/Components/Modal/Modal.css
@@ -1,16 +1,20 @@
 
 /* Styles de l'overlay */
 .overlay {
+    display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
-    display: flex;
     justify-content: center;
     align-items: center;
   }
+
+  .overlay.active{
+    display: flex;
+  }
 
   /* Styles de la carte */
   .card {

diff --git a/src/Components/Modal/Modal.tsx b/src/Components/Modal/Modal.tsx
@@ -5,9 +5,10 @@ interface ModalProps{
     text: string;
     handleTextChange: (event: { target: { value: React.SetStateAction<string>;}; })=> void;
     close: ()=>void;
+    toRef:  React.MutableRefObject<HTMLDivElement|null>;
 }
 
-const Modal: React.FC<ModalProps>=({text, handleTextChange, close})=>{
+const Modal: React.FC<ModalProps>=({text, handleTextChange, close, toRef})=>{
     const [isEditing, setIsEditing] = useState(false); // Added state for edit mode
 
     const handleOverlayTextChange = (event: React.ChangeEvent<HTMLTextAreaElement>)=>{
@@ -17,8 +18,7 @@ const Modal: React.FC<ModalProps>=({text, handleTextChange, close})=>{
 
     const handleOverlayClick = (event: React.MouseEvent<HTMLElement>)=>{
         const element = event!.target as HTMLElement
-        console.log(event);
-        if(element.className == "overlay"|| element.className == "close-icon"){
+        if(element.className == "overlay active"|| element.className == "close-icon"){
             close();
         };
     };
@@ -28,7 +28,7 @@ const Modal: React.FC<ModalProps>=({text, handleTextChange, close})=>{
     };
 
     return(
-        <div className="overlay" onClick={handleOverlayClick}>
+        <div className="overlay" onClick={handleOverlayClick} ref={toRef}>
           <div className="card">
             <img src={closeIcon} alt="Fermer la carte" className="close-icon" onClick={handleOverlayClick} />
             <div className="card-content">

diff --git a/src/Pages/Form/Form.css b/src/Pages/Form/Form.css
@@ -31,23 +31,32 @@ textarea {
   position: relative;
   top: 40px;
   right: 50px;
+  margin: -8.5%;
 }
 
 .data-section{
-  display: flex;
+  display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 10px;
 }
 
+.data-section.active{
+  display: flex;
+}
+
 .input-container{
-  display: inline-flex;
+  display: none;
   flex-direction: column;
   align-items: baseline;
   width: 300px; 
 }
 
+.input-container.active{
+  display: inline-flex;
+}
+
 .input-container input{
   width: 98%;
 }