diff --git a/src/assets/icons/trackerNoTasks.svg b/src/assets/icons/trackerNoTasks.svg new file mode 100644 index 00000000..f6953bef --- /dev/null +++ b/src/assets/icons/trackerNoTasks.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index 5337973d..49f0a72b 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -462,7 +462,7 @@ export const TicketFullScreen = () => { участник
- В проекте - “{projectInfo.name}” + В проекте -

“{projectInfo.name}”

{projectInfo.projectUsers?.map((person) => { diff --git a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss index e5928691..fc4253af 100644 --- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss +++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss @@ -213,21 +213,22 @@ background: white; border-radius: 5px; cursor: pointer; - width: 100%; position: relative; + min-width: 320px; + width: 100%; p { - max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; + max-width: 270px; } img { transition: all 0.3s ease; - width: 16px; - height: 16px; + width: 20px; + height: 20px; } &__dropDown { @@ -235,12 +236,12 @@ flex-direction: column; position: absolute; width: 100%; - padding: 5px; + padding: 9.5px 12px; top: 35px; left: 0; background: white; border-radius: 5px; - row-gap: 5px; + row-gap: 10px; .worker { display: flex; diff --git a/src/components/ProjectTiket/projectTiket.scss b/src/components/ProjectTiket/projectTiket.scss index bc851751..27524b7b 100644 --- a/src/components/ProjectTiket/projectTiket.scss +++ b/src/components/ProjectTiket/projectTiket.scss @@ -35,6 +35,7 @@ white-space: nowrap; display: flex; text-overflow: ellipsis; + max-width: 380px; &:hover { color: black; diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 768a4f30..074d24ad 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -46,6 +46,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 trackerNoTasks from "assets/icons/trackerNoTasks.svg" export const ProjectTracker = () => { const dispatch = useDispatch(); @@ -62,6 +63,7 @@ export const ProjectTracker = () => { const [personListOpen, setPersonListOpen] = useState(false); const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] = useState(false); + const [filteredNoTasks, setFilteredNoTasks] = useState(false) const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false); const [selectedExecutor, setSelectedExecutor] = useState(null); const [selectExecutorOpen, setSelectedExecutorOpen] = useState(false); @@ -77,8 +79,10 @@ export const ProjectTracker = () => { useEffect(() => { const tasksHover = {}; const columnHover = {}; + let columnsTasksEmpty = true if (Object.keys(projectBoard).length) { projectBoard.columns.forEach((column) => { + if (column.tasks.length) columnsTasksEmpty = false setOpenColumnSelect((prevState) => ({ ...prevState, [column.id]: false, @@ -87,6 +91,11 @@ export const ProjectTracker = () => { column.tasks.forEach((task) => (tasksHover[task.id] = false)); }); } + if (columnsTasksEmpty && (checkBoxMyTasks || selectedExecutor || checkBoxParticipateTasks)) { + setFilteredNoTasks(true) + } else { + setFilteredNoTasks(false) + } setWrapperHover(columnHover); setTaskHover(tasksHover); }, [projectBoard]); @@ -261,6 +270,8 @@ export const ProjectTracker = () => { dispatch(setProjectBoardFetch(projectId.id)); } + + return (
@@ -381,7 +392,7 @@ export const ProjectTracker = () => { участник
- В проекте - “{projectBoard.name}” + В проекте -

“{projectBoard.name}”

{projectBoard.projectUsers?.map((person) => { @@ -517,7 +528,7 @@ export const ProjectTracker = () => { )}
- {Boolean(projectBoard?.columns) && + {Boolean(projectBoard?.columns) && !filteredNoTasks && Boolean(projectBoard.columns.length) && projectBoard.columns.map((column) => { return ( @@ -663,6 +674,15 @@ export const ProjectTracker = () => { В проекте нет задач.
)} + {filteredNoTasks && +
+
+ noTasks +

Пока нет подходящих задач

+
+

Ставьте задачи, следите за прогрессом, ведите учёт рабочего времени

+
+ }
)} diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 9ed708bb..0c6ed89b 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -208,7 +208,7 @@ &__wrapper { display: flex; - max-width: 1260px; + max-width: 1280px; width: 100%; margin: 0 auto; justify-content: space-between; @@ -222,8 +222,11 @@ font-size: 22px; line-height: 32px; margin-bottom: 0; - max-width: 30%; + max-width: 21%; word-break: break-all; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } &__add { @@ -360,19 +363,30 @@ &__info { display: flex; - font-size: 18px; - line-height: 22px; - color: #263238; - font-weight: 500; margin: 13px 0 10px; + align-items: center; span { + display: flex; width: auto; - height: auto; + font-size: 18px; + line-height: 22px; + color: #263238; + font-weight: 500; + white-space: nowrap; + } + + p { color: #1458dd; font-weight: 600; font-size: 18px; line-height: 22px; + display: flex; + max-width: 250px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-left: 30px; } } @@ -839,6 +853,33 @@ font-weight: 500; font-size: 25px; } + + &__noTasks { + display: flex; + flex-direction: column; + + &Info { + display: flex; + align-items: center; + margin-bottom: 15px; + img { + width: 27px; + height: 27px; + margin-right: 17px; + } + + p { + font-weight: 700; + font-size: 22px; + line-height: 32px; + } + } + + &More { + font-size: 14px; + line-height: 22px; + } + } } .board {