diff --git a/src/App.js b/src/App.js index 609e416d..0dfef9e3 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import { import AuthForPartners from "./pages/AuthForPartners/AuthForPartners"; import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers"; +import { TrackerIntro } from "./pages/TrackerIntro/TrackerIntro" import Home from "./pages/Home/Home"; import Candidate from "./components/Candidate/Candidate"; import Calendar from "./components/Calendar/Calendar"; @@ -52,6 +53,7 @@ const App = () => { } /> } /> + } /> } /> + + + + + + + + diff --git a/src/assets/icons/trackerIntroInfo.svg b/src/assets/icons/trackerIntroInfo.svg new file mode 100644 index 00000000..3f89fddf --- /dev/null +++ b/src/assets/icons/trackerIntroInfo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + 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/assets/images/trackerBoardImg.png b/src/assets/images/trackerBoardImg.png new file mode 100644 index 00000000..de6a2733 Binary files /dev/null and b/src/assets/images/trackerBoardImg.png differ diff --git a/src/assets/images/trackerHeard.png b/src/assets/images/trackerHeard.png new file mode 100644 index 00000000..ed358b9f Binary files /dev/null and b/src/assets/images/trackerHeard.png differ diff --git a/src/assets/images/trackerIntroImg.png b/src/assets/images/trackerIntroImg.png new file mode 100644 index 00000000..222243b0 Binary files /dev/null and b/src/assets/images/trackerIntroImg.png differ diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx index 5337973d..b6acf4fb 100644 --- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx +++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx @@ -462,7 +462,8 @@ 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/components/SideBar/SideBar.jsx b/src/components/SideBar/SideBar.jsx index 8e2e4c72..e535a862 100644 --- a/src/components/SideBar/SideBar.jsx +++ b/src/components/SideBar/SideBar.jsx @@ -52,6 +52,9 @@ export const SideBar = () => {
  • Кабинет разработчика
    • +
  • + Трекер +
  • Школа
    • diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 768a4f30..812905f4 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -42,6 +42,7 @@ import commentsBoard from "assets/icons/commentsBoard.svg"; import del from "assets/icons/delete.svg"; import edit from "assets/icons/edit.svg"; import filesBoard from "assets/icons/filesBoard.svg"; +import trackerNoTasks from "assets/icons/trackerNoTasks.svg"; import project from "assets/icons/trackerProject.svg"; import tasks from "assets/icons/trackerTasks.svg"; import accept from "assets/images/accept.png"; @@ -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,14 @@ 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]); @@ -381,7 +393,8 @@ export const ProjectTracker = () => { участник
    - В проекте - “{projectBoard.name}” + В проекте - +

    “{projectBoard.name}”

    {projectBoard.projectUsers?.map((person) => { @@ -518,6 +531,7 @@ export const ProjectTracker = () => {
    {Boolean(projectBoard?.columns) && + !filteredNoTasks && Boolean(projectBoard.columns.length) && projectBoard.columns.map((column) => { return ( @@ -663,6 +677,18 @@ 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 { diff --git a/src/pages/TrackerIntro/TrackerIntro.js b/src/pages/TrackerIntro/TrackerIntro.js new file mode 100644 index 00000000..8adc9997 --- /dev/null +++ b/src/pages/TrackerIntro/TrackerIntro.js @@ -0,0 +1,109 @@ +import React from "react"; +import { NavLink } from "react-router-dom"; + +import AuthHeader from "@components/Common/AuthHeader/AuthHeader"; +import { Footer } from "@components/Common/Footer/Footer"; +import SideBar from "@components/SideBar/SideBar"; + +import introInfo from "assets/icons/starTrackerIntro.svg"; +import arrowInfo from "assets/icons/trackerIntroInfo.svg"; +import trackerBoard from "assets/images/trackerBoardImg.png"; +import trackerHeard from "assets/images/trackerHeard.png"; +import introImg from "assets/images/trackerIntroImg.png"; + +import "./trackerIntro.scss"; + +export const TrackerIntro = () => { + return ( +
    + + +
    +
    +
    +
    +
    + img + Подключись и пользуйся бесплатно! +
    +

    + Сервис для планирования и работы + для Вашей команды + img +

    +

    + Российский сервис для совместной работы команд. Все процессы + компании в одном месте: проекты, задачи, цели, сотрудники, + документы, переписки, отчеты +

    + + Начать работу + +
    + img +
    +
    +
    +
    + board + heard +
    +
    +

    + Управление большим количеством проектов и гибкая настройка + структуры под любые процессы +

    + + Начать работу + +
    +
    +
    +
    +

    + Используйте сервис, который позаботится о персональных данных + вашей компании и
    + не уйдет с рынка. + img +

    +
    +
    +
    + + +

    + Настраиваемые +
    + доски +

    +
    +

    + Настраиваемые доски позволяют контролировать все ваши задачи и + работу вашей команды. +

    +
    +
    +
    + + +

    + Учет +
    + времени +

    +
    +

    + Учитывайте загрузку и ресурсы сотрудников, получайте доступные + отчеты о времени работы над каждой задачей или проектом. +

    +
    +
    +
    +
    +
    +
    + ); +}; diff --git a/src/pages/TrackerIntro/trackerIntro.scss b/src/pages/TrackerIntro/trackerIntro.scss new file mode 100644 index 00000000..571b2b78 --- /dev/null +++ b/src/pages/TrackerIntro/trackerIntro.scss @@ -0,0 +1,181 @@ +.trackerIntro { + &__content { + font-family: "LabGrotesque", sans-serif; + background-color: #f1f1f1; + color: #000000; + } + + &__intro { + display: flex; + justify-content: space-between; + align-items: end; + padding: 50px 0 75px; + + &__img { + max-width: 530px; + max-height: 287px; + } + + &__info { + display: flex; + flex-direction: column; + margin-right: 50px; + } + + &__suptitle { + display: flex; + align-items: center; + margin-bottom: 63px; + span { + margin-left: 25px; + font-weight: 500; + font-size: 16px; + } + } + + &__title { + position: relative; + font-size: 40px; + font-weight: 700; + margin-bottom: 75px; + + span { + color: #52B709; + } + + img { + position: absolute; + bottom: -30px; + right: 0; + max-width: 405px; + } + } + + &__subtitle { + font-size: 17px; + font-weight: 500; + margin-bottom: 105px; + } + } + + &__btn { + background: #52B709; + border-radius: 44px; + padding: 9px 48px; + color: white; + font-weight: 500; + font-size: 15px; + line-height: 32px; + max-width: 200px; + transition: all 0.3s ease; + + &:hover { + color: white; + scale: 1.05; + } + } + + &__board { + display: flex; + flex-direction: column; + max-width: 1350px; + align-items: end; + margin: 0 auto 115px; + + &Img { + position: relative; + margin-bottom: 34px; + } + + .heard { + position: absolute; + bottom: -64px; + left: 325px; + } + + &__info { + display: flex; + flex-direction: column; + padding-right: 140px; + p { + font-size: 27px; + line-height: 31px; + font-weight: 500; + max-width: 695px; + margin-bottom: 30px; + } + } + } + + &__info { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 100px; + + &__title { + position: relative; + font-size: 38px; + font-weight: 500; + text-align: center; + max-width: 900px; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 100px; + + span { + color: #52B709; + } + + img { + position: absolute; + max-width: 311px; + bottom: -28px; + } + } + + &__items { + display: flex; + justify-content: space-between; + width: 100%; + } + + &__item { + display: flex; + flex-direction: column; + max-width: 415px; + + &Head { + display: flex; + align-items: center; + margin-bottom: 45px; + + span { + background: #52B709; + border-radius: 44px; + display: flex; + align-items: center; + justify-content: center; + width: 71px; + height: 71px; + color: #FFFFFF; + font-size: 30px; + } + + h3 { + margin-left: 30px; + font-size: 32px; + font-weight: 500; + margin-bottom: 0; + } + } + + p { + font-size: 19px; + font-weight: 500; + line-height: 32px; + } + } + } +}