tracker-tasks

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -78,8 +78,22 @@
         font-style: normal;
         font-size: 16px;
         line-height: 24px;
-        max-width: 340px;
+        padding: 5px;
         outline: none;
+        border-radius: 8px;
+        border: 1px solid rgb(204, 206, 209);
+      }
+
+      .ck-toolbar {
+        border-radius: 8px 8px 0 0 !important;
+      }
+
+      .ck-content {
+        font-size: 14px;
+        min-height: 100px;
+        border: 1px solid rgb(204, 206, 209) !important;
+        border-radius: 0 0 8px 8px !important;
+        box-shadow: none !important;
       }
 
       button {
@@ -228,7 +242,7 @@
             margin-left: 34px;
             text-decoration-line: underline;
             font-weight: 400;
-            font-size: 10px;
+            font-size: 11px;
             line-height: 32px;
             cursor: pointer;
 
@@ -381,9 +395,9 @@
         margin-right: 18px;
       }
 
-      &:focus-within {
+      //&:focus-within {
-        border: 1px solid #0000004d;
+      //  border: 1px solid #0000004d;
-      }
+      //}
     }
   }
 
@@ -467,6 +481,11 @@
         border: none;
         color: white;
         font-size: 17px;
+        transition: all 0.3s ease;
+
+        &:hover {
+          background: #6cc933;
+        }
       }
     }
 
@@ -479,6 +498,11 @@
       color: white;
       background: #1458dd;
       border-radius: 44px;
+      transition: all 0.15s ease;
+
+      &:hover {
+        background: #0255ff;
+      }
 
       img {
         margin-left: 10px;
@@ -499,6 +523,11 @@
       color: white;
       background: red;
       border-radius: 44px;
+      transition: all 0.3s ease;
+
+      &:hover {
+        background: #f5693d;
+      }
     }
 
     .time {

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -8,7 +8,6 @@ import {
   deletePersonOnProject,
   getBoarderLoader,
   modalToggle,
-  setProjectBoardFetch,
   setToggleTab,
 } from "@redux/projectsTrackerSlice";
 

src/components/Modal/Tracker/TrackerModal/trackerModal.scss

@@ -94,6 +94,22 @@
     max-width: 320px;
   }
 
+  .ck-editor__editable.ck-rounded-corners {
+    min-height: 100px;
+    font-size: 14px;
+  }
+
+  .ck-toolbar {
+    border: none !important;
+    border-radius: 8px 8px 0 0 !important;
+  }
+
+  .ck-content {
+    border: none !important;
+    border-radius: 0 0 8px 8px !important;
+    box-shadow: none !important;
+  }
+
   .select__executor {
     width: 320px;
     background: white;
@@ -229,6 +245,12 @@
       .worker {
         display: flex;
         justify-content: space-between;
+
+        &:hover {
+          p {
+            font-weight: 500;
+          }
+        }
       }
     }
   }

src/components/TrackerTaskComment/TrackerTaskComment.jsx

@@ -12,6 +12,7 @@ import TrackerTaskSubComment from "@components/TrackerTaskComment/TrackerTaskCom
 import del from "assets/icons/delete.svg";
 import edit from "assets/icons/edit.svg";
 import accept from "assets/images/accept.png";
+import avatarMok from "assets/images/avatarMok.png";
 
 export const TrackerTaskComment = ({
   taskId,
@@ -84,7 +85,11 @@ export const TrackerTaskComment = ({
     >
       <div className="comments__list__item__info">
         <div className="comments__list__item__fio">
-          <img src={urlForLocal(comment.user.avatar)} alt="avatar" />
+          <img
+            src={
+              comment.user?.avatar ? urlForLocal(comment.user.avatar) : avatarMok
+            }
+            alt="avatar" />
           <p>{comment.user.fio}</p>
         </div>
         <div className="comments__list__item__date">

src/pages/ProjectTracker/ProjectTracker.js

@@ -28,7 +28,6 @@ import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
 import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket";
 import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
-// import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@@ -44,6 +43,7 @@ import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
 import accept from "assets/images/accept.png";
 import avatarMok from "assets/images/avatarMok.png";
+import { caseOfNum } from "@utils/helper";
 
 export const ProjectTracker = () => {
   const dispatch = useDispatch();
@@ -563,11 +563,11 @@ export const ProjectTracker = () => {
                               <div className="tasks__board__item__info">
                                 <div className="tasks__board__item__info__more">
                                   <img src={commentsBoard} alt="commentsImg" />
-                                  <span>{task.comment_count} коментариев</span>
+                                  <span>{task.comment_count} {caseOfNum(task.comment_count, 'comments')}</span>
                                 </div>
                                 <div className="tasks__board__item__info__more">
                                   <img src={filesBoard} alt="filesImg" />
-                                  <span>{task.files} файлов</span>
+                                  <span>{task.files ? task.files : 0} {caseOfNum(0, 'files')}</span>
                                 </div>
                               </div>
                             </div>

src/pages/Tracker/Tracker.js

@@ -30,6 +30,7 @@ import tasks from "assets/icons/trackerTasks.svg";
 import noProjects from "assets/images/noProjects.png";
 
 import "./tracker.scss";
+import avatarMok from "assets/images/avatarMok.png";
 
 export const Tracker = () => {
   const dispatch = useDispatch();
@@ -253,11 +254,13 @@ export const Tracker = () => {
                       <div className="task" key={task.id}>
                         <div className="task__info">
                           <h5>{task.title}</h5>
-                          <p>{task.description}</p>
+                          <p dangerouslySetInnerHTML={{ __html: task.description }} />
                         </div>
                         <div className="task__person">
                           <img
-                            src={urlForLocal(task.user.avatar)}
+                            src={
+                              task.user?.avatar ? urlForLocal(task.user.avatar) : avatarMok
+                            }
                             alt="avatar"
                           />
                           <div className="task__project">
@@ -301,11 +304,13 @@ export const Tracker = () => {
                           <div className="archive__completeTask" key={index}>
                             <div className="archive__completeTask__description">
                               <p>{task.title}</p>
-                              <p className="date">{task.description}</p>
+                              <p className="date" dangerouslySetInnerHTML={{ __html: task.description }} />
                             </div>
                             <div className="archive__completeTask__info">
                               <img
-                                src={urlForLocal(task.user.avatar)}
+                                src={
+                                  task.user?.avatar ? urlForLocal(task.user.avatar) : avatarMok
+                                }
                                 alt="avatar"
                               />
                               <div className="archive__completeTask__info__project">

src/pages/Tracker/tracker.scss

@@ -252,7 +252,6 @@
           &__persons {
             position: relative;
             display: flex;
-            cursor: pointer;
             align-items: center;
 
             .projectPersons {
@@ -302,8 +301,14 @@
               background: #00c5a8;
               color: white;
               font-size: 14px;
+              transition: all 0.15s ease;
               left: -28px;
               z-index: 2;
+              cursor: pointer;
+
+              &:hover {
+                background: #10d5bb;
+              }
             }
 
             p {
@@ -466,6 +471,8 @@
             display: flex;
             align-items: center;
             color: black;
+            max-width: 180px;
+            width: 100%;
 
             p {
               font-weight: 400;
@@ -477,6 +484,12 @@
               margin-left: 10px;
               width: 20px;
             }
+
+            &:hover {
+              p {
+                font-weight: 500;
+              }
+            }
           }
         }
 
@@ -738,12 +751,20 @@
               font-weight: 500;
               font-size: 16px;
               line-height: 24px;
-              cursor: pointer;
+              max-width: 250px;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
             }
 
             .add {
               color: #6f6f6f;
               font-size: 19px;
+              cursor: pointer;
+
+              &:hover {
+                font-weight: 600;
+              }
             }
 
             .more {
@@ -751,6 +772,11 @@
               position: relative;
               bottom: 4px;
               font-size: 20px;
+              cursor: pointer;
+
+              &:hover {
+                font-weight: 600;
+              }
             }
 
             .done {

src/utils/helper.js

@@ -61,3 +61,23 @@ export function getCorrectRequestDate(date) {
   const sec = String(date.getUTCSeconds());
   return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}`;
 }
+
+export function caseOfNum(number, type) {
+  const comments = ["коментарий", "комментария", " коментариев"];
+  const files = ["файлов", "файла", "файлов"]
+  const cases = [2, 0, 1, 1, 1, 2];
+  if (type === 'comments') {
+    return comments[
+      number % 100 > 4 && number % 100 < 20
+        ? 2
+        : cases[number % 10 < 5 ? number % 10 : 5]
+      ];
+  }
+  if (type === 'files') {
+    return files[
+      number % 100 > 4 && number % 100 < 20
+        ? 2
+        : cases[number % 10 < 5 ? number % 10 : 5]
+      ];
+  }
+}