apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added fullScreen ticket

Browse Source
This commit is contained in:
MaxOvs19
2023-04-20 20:10:08 +03:00
parent ab2ff123a0
commit cb79f3c063
11 changed files with 384 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/components/UI/ModalTicket/ModalTicket.js Normal file
View File

@ -0,0 +1,162 @@
import React, { useState } from "react";
import avatarMock1 from "../../../images/avatarMoсk1.png";
import avatarMock2 from "../../../images/avatarMoсk2.png";
import category from "../../../images/category.png";
import watch from "../../../images/watch.png";
import file from "../../../images/fileModal.svg";
import task from "../../../images/tasksMock.png";
import arrow from "../../../images/arrowStart.png";
import link from "../../../images/link.svg";
import archive from "../../../images/archive.svg";
import del from "../../../images/delete.svg";
import edit from "../../../images/edit.svg";
import send from "../../../images/send.svg";
import plus from "../../../images/plus.svg";
import fullScreen from "../../../images/inFullScreen.svg";
import ModalAdd from "../ModalAdd/ModalAdd";
import "./ModalTicket.scss";
import { Link } from "react-router-dom";
export const ModalTiсket = ({ active, setActive, index }) => {
const [tiket] = useState({
name: "Разработка трекера",
code: "PR - 2245",
creator: "Василий Тарасов",
descriptions:
"На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска. Необходимо исправить все страницы где есть ошибки или отсутствует Title и Description.",
});
const [workers] = useState([
{
name: "Дмитрий Рогов",
avatar: avatarMock2,
},
{
name: "Марина Серова",
avatar: avatarMock1,
},
]);
const [addSubtask, setAddSubtask] = useState(false);
return (
<div
className={active ? "modal-tiket active" : "modal-tiket"}
onClick={() => setActive(false)}
>
<div
className="modal-tiket__content"
onClick={(e) => e.stopPropagation()}
>
<div className="content">
<h3 className="title-project">
<img src={category} className="title-project__category"></img>
Проект: {tiket.name}
<Link to={`/tracker/${index}`} className="title-project__full">
<img src={fullScreen}></img>
</Link>
</h3>
<div className="content__task">
<span>Задача</span>
<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="tasks">
<button onClick={() => setAddSubtask(true)}>
<img src={plus}></img>
Добавить под задачу
</button>
</p>
<p className="file">
<button>
<img src={file}></img>
Загрузить файл
</button>
<span>{0}</span>
Файлов
</p>
</div>
<div className="content__input">
<input placeholder="Оставить комментарий"></input>
<img src={send}></img>
</div>
</div>
</div>
<div className="workers">
<div className="workers_box">
<span className="exit" onClick={() => setActive(false)}></span>
<span>{tiket.code}</span>
<p className="workers__creator">Создатель : {tiket.creator}</p>
<div>
{workers.map((worker, index) => {
return (
<div className="worker" key={index}>
<img src={worker.avatar}></img>
<p>{worker.name}</p>
</div>
);
})}
</div>
<div className="add-worker moreItems">
<button>+</button>
<span>Добавить участников</span>
</div>
</div>
<div className="workers_box-middle">
<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 className="workers_box-bottom">
<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>
</div>
</div>
<ModalAdd active={addSubtask} setActive={setAddSubtask}>
<div className="title-project subtask">
<h4>
Вы добавляете подзадачу <p>в колонку задачи {"Готово"}</p>
</h4>
<p className="title-project__decs">Введите текст</p>
<div>
<textarea className="title-project__textarea"></textarea>
</div>
</div>
<button className="button-add" onClick={(e) => e.preventDefault()}>
Добавить
</button>
</ModalAdd>
</div>
);
};
export default ModalTiсket;

319
src/components/UI/ModalTicket/ModalTicket.scss Normal file
View File

@ -0,0 +1,319 @@
.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;
.content {
display: flex;
flex-direction: column;
width: 600px;
margin: 26px 0 0 21px;
.title-project {
color: #1458dd;
font-family: "LabGrotesque", sans-serif;
display: flex;
align-items: center;
font-weight: 700;
font-size: 22px;
line-height: 32px;
&__category {
margin-right: 17px;
}
&__full {
margin-left: 35%;
}
}
&__task {
margin-top: -5px;
padding: 18px;
button {
img {
margin-right: 5px;
}
}
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;
.tasks {
justify-content: space-evenly;
button {
width: 180px;
height: 40px;
background: #52b709;
border-radius: 44px;
font-weight: 400;
font-size: 12px;
line-height: 32px;
border: none;
color: #ffffff;
}
}
.tasks,
.file {
display: flex;
align-items: center;
}
.file {
justify-content: space-between;
margin-left: 20px;
button {
display: flex;
align-items: center;
justify-content: center;
background: white;
width: 166px;
height: 40px;
border: 0.5px solid #1458dd;
border-radius: 44px;
font-weight: 400;
font-size: 12px;
line-height: 32px;
color: #1458dd;
img {
margin-right: 9px;
}
}
span {
margin: 0 3px 0 11px;
font-weight: 500;
font-size: 12px;
line-height: 15px;
color: #6e7c87;
}
}
}
&__input {
margin: 20px 0 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
width: 438px;
height: 40px;
background: #f1f1f1;
border-radius: 44px;
input {
width: 80%;
background: inherit;
border: none;
outline: none;
padding-left: 30px;
font-weight: 400;
font-size: 12px;
line-height: 32px;
border-radius: 44px;
}
img {
cursor: pointer;
margin-right: 18px;
}
}
}
.workers {
position: relative;
border-left: 1px solid #f1f1f1;
.exit {
cursor: pointer;
position: absolute;
top: 35px;
right: 40px;
&:before,
&:after {
content: "";
position: absolute;
width: 16px;
height: 2px;
background: #263238;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
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 {
cursor: pointer;
background: #8bcc60;
border-radius: 44px;
width: 33px;
height: 33px;
display: flex;
justify-content: center;
align-items: center;
border: none;
color: white;
font-size: 17px;
}
}
.start {
font-size: 12px;
margin-top: 25px;
width: 151px;
height: 40px;
border: none;
color: white;
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;
}
}
&_box {
padding: 25px 85px 40px 40px;
border-bottom: 1px solid #f1f1f1;
&-middle {
padding: 0px 40px 25px 40px;
border-bottom: 1px solid #f1f1f1;
}
&-bottom {
padding: 40px 0 75px 56px;
font-weight: 400;
font-size: 14px;
line-height: 38px;
div {
display: flex;
align-items: center;
p {
margin: 0 0 0 12px;
}
}
}
}
}
}
.subtask {
h4 {
width: 90%;
p {
color: #1458dd;
}
}
}