chat modal v2 + some general fixes

Sicnecher · Jan 19, 2025 · afbeb10 · afbeb10
1 parent cf3b1ac
commit afbeb10
Show file tree

Hide file tree

Showing 11 changed files with 281 additions and 158 deletions.
diff --git a/index.html b/index.html
@@ -7,11 +7,14 @@
       href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="lib/animate.css">
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Monday Replica</title>
   </head>
   <body>
     <div id="root"></div>
+    <script src="https://kit.fontawesome.com/57fd0d515e.js" crossorigin="anonymous"></script>
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@mui/icons-material": "^6.3.1",
     "@mui/material": "^6.3.1",
     "@mui/x-date-pickers": "^7.23.6",
+    "animate.css": "^4.1.1",
     "dayjs": "^1.11.13",
     "gh-pages": "^6.3.0",
     "react": "^18.3.1",

diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/cmps/AppHeader.jsx b/src/cmps/AppHeader.jsx
@@ -26,10 +26,10 @@ export function AppHeader({ userData = null }) {
           width="20"
           height="20"
           aria-hidden="true"
-          class="icon_da9e87501e"
+          className="icon_da9e87501e"
           data-testid="topbar-icon"
         >
-          <g clip-path="url(#clip0_1150_158978)">
+          <g clipPath="url(#clip0_1150_158978)">
             <path
               d="M20.3812 4.62863C20.3812 2.47439 18.6357 0.728027 16.4826 0.728027C14.3294 0.728027 12.584 2.47439 12.584 4.62863V8.91568C12.584 11.0699 14.3294 12.8163 16.4826 12.8163C18.6357 12.8163 20.3812 11.0699 20.3812 8.91568V4.62863Z"
               fill="url(#paint0_linear_1150_158978)"
@@ -68,8 +68,8 @@ export function AppHeader({ userData = null }) {
               y2="13.595"
               gradientUnits="userSpaceOnUse"
             >
-              <stop offset=".411" stop-color="#6C6CFF" stop-opacity=".9"></stop>
-              <stop offset="1" stop-color="#6C6CFF" stop-opacity=".2"></stop>
+              <stop offset=".411" stopColor="#6C6CFF" stopOpacity=".9"></stop>
+              <stop offset="1" stopColor="#6C6CFF" stopOpacity=".2"></stop>
             </linearGradient>
             <linearGradient
               id="paint1_linear_1150_158978"
@@ -79,8 +79,8 @@ export function AppHeader({ userData = null }) {
               y2="16.521"
               gradientUnits="userSpaceOnUse"
             >
-              <stop offset=".411" stop-color="#6C6CFF" stop-opacity=".9"></stop>
-              <stop offset="1" stop-color="#6C6CFF" stop-opacity=".2"></stop>
+              <stop offset=".411" stopColor="#6C6CFF" stopOpacity=".9"></stop>
+              <stop offset="1" stopColor="#6C6CFF" stopOpacity=".2"></stop>
             </linearGradient>
             <linearGradient
               id="paint2_linear_1150_158978"
@@ -90,8 +90,8 @@ export function AppHeader({ userData = null }) {
               y2="21.306"
               gradientUnits="userSpaceOnUse"
             >
-              <stop offset=".411" stop-color="#6C6CFF" stop-opacity=".9"></stop>
-              <stop offset="1" stop-color="#6C6CFF" stop-opacity=".2"></stop>
+              <stop offset=".411" stopColor="#6C6CFF" stopOpacity=".9"></stop>
+              <stop offset="1" stopColor="#6C6CFF" stopOpacity=".2"></stop>
             </linearGradient>
             <linearGradient
               id="paint3_linear_1150_158978"
@@ -101,8 +101,8 @@ export function AppHeader({ userData = null }) {
               y2="21.333"
               gradientUnits="userSpaceOnUse"
             >
-              <stop offset=".411" stop-color="#6C6CFF" stop-opacity=".9"></stop>
-              <stop offset="1" stop-color="#6C6CFF" stop-opacity=".2"></stop>
+              <stop offset=".411" stopColor="#6C6CFF" stopOpacity=".9"></stop>
+              <stop offset="1" stopColor="#6C6CFF" stopOpacity=".2"></stop>
             </linearGradient>
             <linearGradient
               id="paint4_linear_1150_158978"
@@ -112,8 +112,8 @@ export function AppHeader({ userData = null }) {
               y2="16.52"
               gradientUnits="userSpaceOnUse"
             >
-              <stop offset=".411" stop-color="#6C6CFF" stop-opacity=".9"></stop>
-              <stop offset="1" stop-color="#6C6CFF" stop-opacity=".2"></stop>
+              <stop offset=".411" stopColor="#6C6CFF" stopOpacity=".9"></stop>
+              <stop offset="1" stopColor="#6C6CFF" stopOpacity=".2"></stop>
             </linearGradient>
             <clipPath id="clip0_1150_158978">
               <path fill="#fff" d="M0 0H33V33H0z"></path>

diff --git a/src/cmps/dynamicCmps/TaskTitle.jsx b/src/cmps/dynamicCmps/TaskTitle.jsx
@@ -4,6 +4,7 @@ import { ChatModal } from "./modals/ChatModal.jsx"
 import ChatIcon from '@mui/icons-material/MapsUgcOutlined';
 import { openModal } from '../../store/actions/boards.actions.js'
 import { useSelector } from "react-redux";
+import { utilService } from "../../services/util.service.js";
 
 export function TaskTitle({ cellId,
   users,
@@ -22,28 +23,32 @@ export function TaskTitle({ cellId,
   const modalRef = useRef(null)
   const ChatButtonRef = useRef(null)
 
-  // close and open modal as needed
-  function modalToggle() {
-    modal
-      ? openModal(null)
-      : openModal(cellId)
-  }
+  useEffect(() => {
+    if (modalRef.current && modal) {
+      chatAnimation(true)
+    }
+  }, [modal])
 
-  function handleClickOutsideModal(event) {
-    if (!modalRef.current.contains(event.target)
-      && !ChatButtonRef.current.contains(event.target))
-      modalToggle()
-  }
+  function chatAnimation(isEnter){
+    isEnter
+    ? utilService.animateCSS(modalRef.current, 'fadeInRightBig', 0.3,
+      { position: 'fixed',
+        top: '0px',
+        right: '0px',
+        opacity: 1,
+        zIndex: 100,
+      })
+      : utilService.animateCSS(modalRef.current, 'fadeOutRightBig', 0.3)
 
-  useEffect(() => {
-    if (modal) document.addEventListener
-      ('mousedown', handleClickOutsideModal)
-    else document.removeEventListener
-      ('mousedown', handleClickOutsideModal)
-    return () => document.removeEventListener
-      ('mousedown', handleClickOutsideModal)
+  }
 
-  }, [modal])
+  // close and open modal as needed
+  function modalToggle() {
+    if(modal){
+      chatAnimation(false)
+      setTimeout(()=>openModal(null), 275)
+    } else openModal(cellId)
+  }
 
   function onAddComment(comment) {
     const newComment = {