Merge remote-tracking branch 'origin/trecker-modal-tiсket' into tracker

# Conflicts:
#	src/pages/Tracker/Tracker.js
#	src/pages/Tracker/tracker.scss
This commit is contained in:
Николай Полтщук 2023-03-07 19:05:04 +03:00
commit cf0cf69a6e
15 changed files with 340 additions and 9 deletions

View File

@ -0,0 +1,16 @@
import React from "react";
import "./ModalProject.scss";
export const ModalProject = ({ active, setActive }) => {
return (
<div className={active ? "modal-project active" : "modal-project"}>
<div
className="modal-project__content"
onClick={(e) => e.stopPropagation()}
></div>
</div>
);
};
export default ModalProject;

View File

@ -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;
}

View File

@ -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 (
<div
className={active ? "modal-tiket active" : "modal-tiket"}
onClick={() => setActive(false)}
>
<div
className="modal-tiket__content"
onClick={(e) => e.stopPropagation()}
>
<div className="author">
<a href="#">
<img src={creatorMock}></img>
</a>
<a href="#">
<img src={creatorMock}></img>
</a>
</div>
<div className="content">
<h3 className="title-project">
<img src={category} className="title-project__category"></img>
Проект: {tiket.name}
</h3>
<div className="content__task">
<h5>{tiket.code}</h5>
<div className="content__description">
<p>{tiket.descriptions}</p>
<img src={task} className="image-task"></img>
<p>{tiket.descriptions}</p>
</div>
<div className="content__communication">
<p className="comment">
<img src={comments}></img>
<span>{0}</span>
Коментариев
</p>
<p className="file">
<img src={files}></img>
<span>{0}</span>
Файлов
</p>
</div>
</div>
</div>
<div className="workers">
<span>{tiket.code}</span>
<p className="workers__creator">Создатель : {tiket.creator}</p>
<div>
{workers.map((worker) => {
return (
<div className="worker">
<img src={worker.avatar}></img>
<p>{worker.name}</p>
</div>
);
})}
</div>
<div className="add-worker">
<button>+</button>
<span>Добавить участников</span>
</div>
<div className="time">
<img src={watch}></img>
<span>Длительность : </span>
<p>{"8:30:22"}</p>
</div>
<button className="start">
Начать делать <img src={arrow}></img>
</button>
</div>
</div>
</div>
);
};
export default ModalTiket;

View File

@ -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;
}
}
}
}

BIN
src/images/arrowStart.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 B

BIN
src/images/avatarMoсk1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/images/avatarMoсk2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/images/category.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 593 B

BIN
src/images/comments.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 457 B

BIN
src/images/files.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 424 B

BIN
src/images/tasksMock.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

BIN
src/images/watch.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 475 B

View File

@ -3,6 +3,7 @@
height: 100%;
min-height: 100vh;
font-family: "LabGrotesque", sans-serif;
position: relative;
.container {
max-width: 1160px;

View File

@ -1,9 +0,0 @@
{
"compilerOptions": {
"target": "es5", // компилируем ts код в js код версии ES5
"module": "esnext",
// для поддержки динамического импорта модулей
"allowSyntheticDefaultImports": true,
"jsx": "react"
}
}