From e19ee11560711911f835857aa45e086c6bfb35e3 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 13 Apr 2023 22:10:20 +0300 Subject: [PATCH] added new modal settings --- .../UI/ModalSettings/ModalSettings.js | 13 ++++ .../UI/ModalSettings/modalSettings.scss | 29 ++++++++ src/pages/Tracker/Tracker.js | 74 +++++++++++++++++-- src/pages/Tracker/tracker.scss | 73 +++++++++--------- 4 files changed, 146 insertions(+), 43 deletions(-) create mode 100644 src/components/UI/ModalSettings/ModalSettings.js create mode 100644 src/components/UI/ModalSettings/modalSettings.scss diff --git a/src/components/UI/ModalSettings/ModalSettings.js b/src/components/UI/ModalSettings/ModalSettings.js new file mode 100644 index 00000000..e3ffb5d5 --- /dev/null +++ b/src/components/UI/ModalSettings/ModalSettings.js @@ -0,0 +1,13 @@ +import React from "react"; + +import "./modalSettings.scss"; + +export const ModalSettings = ({ active, children }) => { + return ( +
+ {children} +
+ ); +}; + +export default ModalSettings; diff --git a/src/components/UI/ModalSettings/modalSettings.scss b/src/components/UI/ModalSettings/modalSettings.scss new file mode 100644 index 00000000..a2fb34f3 --- /dev/null +++ b/src/components/UI/ModalSettings/modalSettings.scss @@ -0,0 +1,29 @@ +.project { + &__settings { + position: absolute; + padding: 32px 23px 10px 11px; + background: #e1fccf; + border-radius: 12px; + transform: scale(0); + bottom: -148px; + right: -120px; + + &-menu { + font-size: 14px; + line-height: 38px; + + div { + display: flex; + align-items: center; + + img { + margin-right: 12px; + } + } + } + } + + &__settings.active { + transform: scale(1); + } +} diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 71c0238b..9aa6d3b6 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader"; import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; @@ -21,8 +21,13 @@ 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); @@ -362,6 +367,7 @@ 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(""); // @@ -528,6 +534,34 @@ 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 (
@@ -579,21 +613,47 @@ export const Tracker = () => { setActive={setModalCreateProject} title={"Укажите название проекта:"} /> + {Boolean(projects.length) && !projectTasksOpen && projects.map((project, index) => { return ( -
setProjectTasksOpen(true)} - > -

{project.name}

+
+

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

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

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

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

+
+
+ +

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

+
+
+ +

в архив

+
+
+ +

удалить

+
+
+
); })} diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index d0515f06..f7efa14c 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -41,7 +41,7 @@ display: flex; max-width: 1160px; width: 100%; - background: #E1FCCF; + background: #e1fccf; border-radius: 12px; margin: 0 auto; position: relative; @@ -89,7 +89,8 @@ } img { - filter: invert(0%) sepia(0%) saturate(2411%) hue-rotate(-25deg) brightness(118%) contrast(119%); + filter: invert(0%) sepia(0%) saturate(2411%) hue-rotate(-25deg) + brightness(118%) contrast(119%); } } @@ -120,6 +121,7 @@ } .project { + position: relative; width: 48%; background: #f1f1f1; border-radius: 12px; @@ -189,13 +191,13 @@ } } - &:after { - content: "..."; + .menu-settings { position: absolute; font-size: 21px; color: #6f6f6f; right: 0; top: -35%; + z-index: 999; @media (max-width: 430px) { display: none; @@ -226,7 +228,6 @@ } } button { - } } @@ -239,25 +240,25 @@ } .createProjectBtn { - background: #52b709; - border-radius: 44px; - max-width: 188px; - height: 50px; - width: 100%; - border: none; - font-weight: 400; - font-size: 15px; - line-height: 32px; - color: #ffffff; - display: flex; - align-items: center; - justify-content: center; + background: #52b709; + border-radius: 44px; + max-width: 188px; + height: 50px; + width: 100%; + border: none; + font-weight: 400; + font-size: 15px; + line-height: 32px; + color: #ffffff; + display: flex; + align-items: center; + justify-content: center; - span { - margin-right: 9px; - font-weight: 700; - font-size: 18px; - } + span { + margin-right: 9px; + font-weight: 700; + font-size: 18px; + } } .create-newProject { @@ -307,7 +308,7 @@ } h4 { - color: #1458DD; + color: #1458dd; font-weight: 700; font-size: 22px; line-height: 32px; @@ -376,7 +377,7 @@ } .addPerson { - background: #00C5A8; + background: #00c5a8; color: white; font-size: 14px; left: -35px; @@ -642,7 +643,7 @@ font-size: 18px; line-height: 32px; margin-bottom: 0; - color: #1458DD; + color: #1458dd; @media (max-width: 590px) { font-size: 15px; @@ -654,8 +655,8 @@ padding: 6px 12px; display: flex; align-items: center; - background: #FFFFFF; - border: 1px solid #DDE2E4; + background: #ffffff; + border: 1px solid #dde2e4; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); border-radius: 6px; max-width: 450px; @@ -720,7 +721,7 @@ .task { display: flex; - background: #F1F1F1; + background: #f1f1f1; border-radius: 12px; padding: 12px 42px 7px 32px; justify-content: space-between; @@ -792,7 +793,7 @@ padding-bottom: 8px; display: flex; align-items: center; - color: #1458DD; + color: #1458dd; min-height: 48px; h3 { @@ -855,7 +856,7 @@ justify-content: space-between; cursor: pointer; transition: all 0.3s ease; - background: #F1F1F1; + background: #f1f1f1; border-radius: 12px; padding: 12px 42px 7px 32px; @@ -883,7 +884,7 @@ font-weight: 500; font-size: 10px; line-height: 24px; - color: #6F6F6F; + color: #6f6f6f; } } @@ -904,7 +905,7 @@ font-size: 10px; } p { - color: #1A1919; + color: #1a1919; font-weight: 500; font-size: 14px; line-height: 24px; @@ -930,8 +931,8 @@ padding: 6px 12px; display: flex; align-items: center; - background: #FFFFFF; - border: 1px solid #DDE2E4; + background: #ffffff; + border: 1px solid #dde2e4; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); border-radius: 6px; max-width: 300px; @@ -976,7 +977,7 @@ } &__noItem { - background: #F1F1F1; + background: #f1f1f1; border-radius: 12px; padding: 23px 0 19px;