diff --git a/src/components/ProjectTiket/ProjectTiket.js b/src/components/ProjectTiket/ProjectTiket.js new file mode 100644 index 00000000..33e9ed7b --- /dev/null +++ b/src/components/ProjectTiket/ProjectTiket.js @@ -0,0 +1,69 @@ +import React, { useEffect, useState } from "react"; +import ModalSettings from "../UI/ModalSettings/ModalSettings"; + +import link from "../../images/link.svg"; +import archiveSet from "../../images/archive.svg"; +import del from "../../images/delete.svg"; +import edit from "../../images/edit.svg"; + +import "./projectTiket.scss"; + +export const ProjectTiket = ({ project, index, setOpenProject }) => { + const [modalSettings, setModalSettings] = useState(false); + + useEffect(() => { + initListeners(); + }, []); + + function initListeners() { + document.addEventListener("click", closeByClickingOut); + } + + function closeByClickingOut(event) { + const path = event.path || (event.composedPath && event.composedPath()); + + if ( + event && + !path.find((item) => item.classList && item.classList.contains("project")) + ) { + setModalSettings(false); + } + } + + return ( +
+

setOpenProject(true)}>{project.name}

+
+

Открытые задачи

+ {project.count} + + + setModalSettings(true)}> + ... + +
+ + +
+
+ +

редактировать

+
+
+ +

ссылка на проект

+
+
+ +

в архив

+
+
+ +

удалить

+
+
+
+
+ ); +}; + +export default ProjectTiket; diff --git a/src/components/ProjectTiket/projectTiket.scss b/src/components/ProjectTiket/projectTiket.scss new file mode 100644 index 00000000..6a3cc218 --- /dev/null +++ b/src/components/ProjectTiket/projectTiket.scss @@ -0,0 +1,85 @@ +.project { + position: relative; + width: 48%; + background: #f1f1f1; + border-radius: 12px; + padding: 17px 26px 16px; + cursor: pointer; + max-width: 440px; + + @media (max-width: 1068px) { + width: 47%; + } + + @media (max-width: 785px) { + width: 100%; + } + + @media (max-width: 430px) { + padding: 8px 13px 8px; + } + + h3 { + font-weight: 700; + font-size: 18px; + line-height: 32px; + color: #111112; + margin-bottom: 10px; + } + + &__info { + display: flex; + align-items: center; + position: relative; + + @media (max-width: 430px) { + justify-content: space-between; + } + + p { + color: #6f6f6f; + font-weight: 500; + font-size: 12px; + line-height: 24px; + margin-bottom: 0; + } + + .count { + margin-left: 8px; + width: 21px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + background: #dddddd; + border-radius: 4px; + font-weight: 500; + font-size: 14px; + line-height: 24px; + color: #6f6f6f; + } + + .add { + color: #6f6f6f; + font-size: 17px; + margin: 0 25px 0 auto; + + @media (max-width: 430px) { + display: none; + } + } + + .menu-settings { + position: absolute; + font-size: 21px; + color: #6f6f6f; + right: 0; + top: -35%; + z-index: 999; + + @media (max-width: 430px) { + display: none; + } + } + } +} diff --git a/src/components/UI/ModalSettings/modalSettings.scss b/src/components/UI/ModalSettings/modalSettings.scss index a2fb34f3..a77ea861 100644 --- a/src/components/UI/ModalSettings/modalSettings.scss +++ b/src/components/UI/ModalSettings/modalSettings.scss @@ -25,5 +25,6 @@ &__settings.active { transform: scale(1); + z-index: 99; } } diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 9aa6d3b6..a81ae8ff 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -10,6 +10,7 @@ import { getProjects } from "../../redux/projectsTrackerSlice"; import ModalTiket from "../../components/UI/ModalTiket/ModalTiket"; import ModalCreate from "../../components/UI/ModalCreate/ModalCreate"; import ModalAdd from "../../components/UI/ModalAdd/ModalAdd"; +import ProjectTiket from "../../components/ProjectTiket/ProjectTiket"; import project from "../../images/trackerProject.svg"; import tasks from "../../images/trackerTasks.svg"; @@ -21,13 +22,8 @@ import filesBoard from "../../images/filesBoard.svg"; import search from "../../images/serchIcon.png"; import noProjects from "../../images/noProjects.png"; import arrow from "../../images/arrowCalendar.png"; -import link from "../../images/link.svg"; -import archiveSet from "../../images/archive.svg"; -import del from "../../images/delete.svg"; -import edit from "../../images/edit.svg"; import "./tracker.scss"; -import ModalSettings from "../../components/UI/ModalSettings/ModalSettings"; export const Tracker = () => { const [toggleTab, setToggleTab] = useState(1); @@ -367,7 +363,6 @@ export const Tracker = () => { const [modalCreateProject, setModalCreateProject] = useState(false); const [modalCreateColl, setModalCreateColl] = useState(false); const [modalCreateTiket, setModalCreateTiket] = useState(false); - const [modalSettings, setModalSettings] = useState(false); const [valueTiket, setValueTiket] = useState(""); const [valueColl, setValueColl] = useState(""); // @@ -534,34 +529,6 @@ export const Tracker = () => { setModalCreateColl(false); } - function selectedProject(project) { - projects.filter((item) => { - if (item.name == project.name) { - console.log(project); - setModalSettings(true); - } - }); - } - - useEffect(() => { - initListeners(); - }, []); - - function initListeners() { - document.addEventListener("click", closeByClickingOut); - } - - function closeByClickingOut(event) { - const path = event.path || (event.composedPath && event.composedPath()); - - if ( - event && - !path.find((item) => item.classList && item.classList.contains("project")) - ) { - setModalSettings(false); - } - } - return (
@@ -618,43 +585,11 @@ export const Tracker = () => { !projectTasksOpen && projects.map((project, index) => { return ( -
-

setProjectTasksOpen(true)}> - {project.name} -

-
-

Открытые задачи

- {project.count} - + - selectedProject(project)} - > - ... - -
- - -
-
- -

редактировать

-
-
- -

ссылка на проект

-
-
- -

в архив

-
-
- -

удалить

-
-
-
-
+ ); })} {!Boolean(projects.length) && !projectTasksOpen && ( diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index f7efa14c..04a9566f 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -120,92 +120,6 @@ padding: 15px; } - .project { - position: relative; - width: 48%; - background: #f1f1f1; - border-radius: 12px; - padding: 17px 26px 16px; - cursor: pointer; - max-width: 440px; - - @media (max-width: 1068px) { - width: 47%; - } - - @media (max-width: 785px) { - width: 100%; - } - - @media (max-width: 430px) { - padding: 8px 13px 8px; - } - - h3 { - font-weight: 700; - font-size: 18px; - line-height: 32px; - color: #111112; - margin-bottom: 10px; - } - - &__info { - display: flex; - align-items: center; - position: relative; - - @media (max-width: 430px) { - justify-content: space-between; - } - - p { - color: #6f6f6f; - font-weight: 500; - font-size: 12px; - line-height: 24px; - margin-bottom: 0; - } - - .count { - margin-left: 8px; - width: 21px; - height: 24px; - display: flex; - align-items: center; - justify-content: center; - background: #dddddd; - border-radius: 4px; - font-weight: 500; - font-size: 14px; - line-height: 24px; - color: #6f6f6f; - } - - .add { - color: #6f6f6f; - font-size: 17px; - margin: 0 25px 0 auto; - - @media (max-width: 430px) { - display: none; - } - } - - .menu-settings { - position: absolute; - font-size: 21px; - color: #6f6f6f; - right: 0; - top: -35%; - z-index: 999; - - @media (max-width: 430px) { - display: none; - } - } - } - } - .no-projects { display: flex; flex-direction: column;