diff --git a/src/components/UI/ModalProject/ModalProject.js b/src/components/UI/ModalProject/ModalProject.js new file mode 100644 index 00000000..97f2e739 --- /dev/null +++ b/src/components/UI/ModalProject/ModalProject.js @@ -0,0 +1,16 @@ +import React from "react"; + +import "./ModalProject.scss"; + +export const ModalProject = ({ active, setActive }) => { + return ( +
+
e.stopPropagation()} + >
+
+ ); +}; + +export default ModalProject; diff --git a/src/components/UI/ModalProject/ModalProject.scss b/src/components/UI/ModalProject/ModalProject.scss new file mode 100644 index 00000000..5af31dff --- /dev/null +++ b/src/components/UI/ModalProject/ModalProject.scss @@ -0,0 +1,25 @@ +.modal-project { + z-index: 9; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.11); + position: fixed; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + transform: scale(0); +} + +.modal-project.active { + transform: scale(1); +} + +.modal-project__content { + background: #ffffff; + border: 1px solid #dde2e4; + border-radius: 8px; + display: flex; + flex-direction: row; +} diff --git a/src/components/UI/ModalTiket/ModalTiket.js b/src/components/UI/ModalTiket/ModalTiket.js new file mode 100644 index 00000000..1f8bc842 --- /dev/null +++ b/src/components/UI/ModalTiket/ModalTiket.js @@ -0,0 +1,111 @@ +import React, { useState } from "react"; +import "./ModalTiket.scss"; + +import creatorMock from "../../../images/avatarMoсkCreator.png"; +import avatarMock1 from "../../../images/avatarMoсk1.png"; +import avatarMock2 from "../../../images/avatarMoсk2.png"; +import category from "../../../images/category.png"; +import comments from "../../../images/comments.png"; +import watch from "../../../images/watch.png"; +import files from "../../../images/files.png"; +import task from "../../../images/tasksMock.png"; +import arrow from "../../../images/arrowStart.png"; + +export const ModalTiket = ({ active, setActive }) => { + const [tiket] = useState({ + name: "Разработка трекера", + code: "PR - 2245", + creator: "Василий Тарасов", + descriptions: + "На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска.Необходимо исправить все страницы где есть ошибки или отсутствует Title и Description.", + }); + + const [workers] = useState([ + { + name: "Дмитрий Рогов", + avatar: avatarMock2, + }, + { + name: "Марина Серова", + avatar: avatarMock1, + }, + ]); + + return ( +
setActive(false)} + > +
e.stopPropagation()} + > +
+ + + + + + +
+
+

+ + Проект: {tiket.name} +

+
+
{tiket.code}
+
+

{tiket.descriptions}

+ +

{tiket.descriptions}

+
+
+

+ + {0} + Коментариев +

+

+ + {0} + Файлов +

+
+
+
+
+ {tiket.code} +

Создатель : {tiket.creator}

+
+ {workers.map((worker) => { + return ( +
+ +

{worker.name}

+
+ ); + })} +
+ +
+ + Добавить участников +
+ +
+ + Длительность : +

{"8:30:22"}

+
+ + +
+
+
+ ); +}; + +export default ModalTiket; diff --git a/src/components/UI/ModalTiket/ModalTiket.scss b/src/components/UI/ModalTiket/ModalTiket.scss new file mode 100644 index 00000000..160adeaa --- /dev/null +++ b/src/components/UI/ModalTiket/ModalTiket.scss @@ -0,0 +1,187 @@ +.modal-tiket { + z-index: 9; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.11); + position: fixed; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + transform: scale(0); +} + +.modal-tiket.active { + transform: scale(1); +} + +.modal-tiket__content { + background: #ffffff; + border: 1px solid #dde2e4; + border-radius: 8px; + display: flex; + flex-direction: row; + + .author { + padding: 25px 0 0 0; + border-radius: 8px 0 0 8px; + display: flex; + flex-direction: column; + align-items: center; + width: 76px; + background: #fbfbfb; + + a { + margin-bottom: 16px; + } + } + + .content { + display: flex; + flex-direction: column; + width: 600px; + margin: 26px 0 0 21px; + + .title-project { + font-family: "LabGrotesque", sans-serif; + display: flex; + align-items: center; + font-weight: 700; + font-size: 16px; + + &__category { + margin-right: 17px; + } + } + + &__task { + margin-top: 22px; + padding: 18px; + + h5 { + font-family: "Inter", sans-serif; + font-weight: 500; + font-style: normal; + font-size: 16px; + line-height: 24px; + + color: #1a1919; + } + } + + &__description { + p { + font-weight: 400; + font-size: 14px; + line-height: 140%; + color: #252c32; + text-align: justify; + } + + .image-task { + margin: 0 0 20px 0; + } + } + + &__communication { + display: flex; + flex-direction: row; + margin: 29px 0 0 -5px; + + .comment { + width: 100px; + justify-content: space-evenly; + } + + .comment, + .file { + display: flex; + align-items: center; + } + + .file { + justify-content: space-between; + margin-left: 20px; + width: 70px; + } + } + } + + .workers { + border-left: 1px solid #f1f1f1; + width: 300px; + padding: 40px; + + span { + font-family: "Inter", sans-serif; + font-weight: 500; + font-size: 11px; + color: #807777; + } + + .add-worker { + display: flex; + align-items: center; + + span { + color: #000000; + font-size: 12px; + line-height: 32px; + margin-left: 17px; + font-style: normal; + font-weight: 400; + } + + button { + background: #8bcc60; + width: 33px; + height: 33px; + } + } + + .start { + margin-top: 25px; + background: #1458dd; + border-radius: 44px; + + img { + margin-left: 10px; + } + } + + .time { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 12px; + margin-top: 20px; + width: 160px; + + p { + color: #000000; + margin: 0; + } + } + + &__creator { + font-size: 14px; + line-height: 32px; + font-weight: 500; + color: #2d4a17; + } + + .worker { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 15px; + + p { + margin: 0 0 0 11px; + font-size: 12px; + color: #807777; + } + } + } +} diff --git a/src/images/arrowStart.png b/src/images/arrowStart.png new file mode 100644 index 00000000..fe784765 Binary files /dev/null and b/src/images/arrowStart.png differ diff --git a/src/images/avatarMoсk1.png b/src/images/avatarMoсk1.png new file mode 100644 index 00000000..467e1de2 Binary files /dev/null and b/src/images/avatarMoсk1.png differ diff --git a/src/images/avatarMoсk2.png b/src/images/avatarMoсk2.png new file mode 100644 index 00000000..e51856fe Binary files /dev/null and b/src/images/avatarMoсk2.png differ diff --git a/src/images/avatarMoсkCreator.png b/src/images/avatarMoсkCreator.png new file mode 100644 index 00000000..9841cf0b Binary files /dev/null and b/src/images/avatarMoсkCreator.png differ diff --git a/src/images/category.png b/src/images/category.png new file mode 100644 index 00000000..98b4fa64 Binary files /dev/null and b/src/images/category.png differ diff --git a/src/images/comments.png b/src/images/comments.png new file mode 100644 index 00000000..f87be131 Binary files /dev/null and b/src/images/comments.png differ diff --git a/src/images/files.png b/src/images/files.png new file mode 100644 index 00000000..8f9d9567 Binary files /dev/null and b/src/images/files.png differ diff --git a/src/images/tasksMock.png b/src/images/tasksMock.png new file mode 100644 index 00000000..a2b736ca Binary files /dev/null and b/src/images/tasksMock.png differ diff --git a/src/images/watch.png b/src/images/watch.png new file mode 100644 index 00000000..5cbc3aef Binary files /dev/null and b/src/images/watch.png differ diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index d4c058f8..fde15016 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -3,6 +3,7 @@ height: 100%; min-height: 100vh; font-family: "LabGrotesque", sans-serif; + position: relative; .container { max-width: 1160px; diff --git a/tsconfig.json b/tsconfig.json deleted file mode 100644 index b8b1fcef..00000000 --- a/tsconfig.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", // компилируем ts код в js код версии ES5 - "module": "esnext", - // для поддержки динамического импорта модулей - "allowSyntheticDefaultImports": true, - "jsx": "react" - } -} \ No newline at end of file