added new modal settings

2023-04-13 22:10:20 +03:00
parent b91c8acd0c
commit e19ee11560
4 changed files with 146 additions and 43 deletions
--- a/src/components/UI/ModalSettings/ModalSettings.js
+++ b/src/components/UI/ModalSettings/ModalSettings.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+import "./modalSettings.scss";
+
+export const ModalSettings = ({ active, children }) => {
+  return (
+    <div className={active ? "project__settings active" : "project__settings "}>
+      {children}
+    </div>
+  );
+};
+
+export default ModalSettings;
--- a/src/components/UI/ModalSettings/modalSettings.scss
+++ 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);
+  }
+}
--- 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 (
    <div className="tracker">
      <ProfileHeader />
@@ -579,21 +613,47 @@ export const Tracker = () => {
              setActive={setModalCreateProject}
              title={"Укажите название проекта:"}
            />
+
            {Boolean(projects.length) &&
              !projectTasksOpen &&
              projects.map((project, index) => {
                return (
-                  <div
-                    className="project"
-                    key={index}
-                    onClick={() => setProjectTasksOpen(true)}
-                  >
-                    <h3>{project.name}</h3>
+                  <div className="project" key={index}>
+                    <h3 onClick={() => setProjectTasksOpen(true)}>
+                      {project.name}
+                    </h3>
                    <div className="project__info">
                      <p>Открытые задачи</p>
                      <span className="count">{project.count}</span>
                      <span className="add">+</span>
+                      <span
+                        className="menu-settings"
+                        onClick={() => selectedProject(project)}
+                      >
+                        ...
+                      </span>
                    </div>
+
+                    <ModalSettings active={modalSettings}>
+                      <div className="project__settings-menu">
+                        <div>
+                          <img src={edit}></img>
+                          <p>редактировать</p>
+                        </div>
+                        <div>
+                          <img src={link}></img>
+                          <p>ссылка на проект</p>
+                        </div>
+                        <div>
+                          <img src={archive}></img>
+                          <p>в архив</p>
+                        </div>
+                        <div>
+                          <img src={del}></img>
+                          <p>удалить</p>
+                        </div>
+                      </div>
+                    </ModalSettings>
                  </div>
                );
              })}
--- 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;