From cb79f3c06333abf4fdf58569d0b7926a3f994a0d Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 20 Apr 2023 20:10:08 +0300 Subject: [PATCH] Added fullScreen ticket --- src/App.js | 122 +++++---- src/components/ProjectTiket/projectTiket.scss | 3 + src/components/UI/ModalAdd/modalAdd.scss | 2 +- .../UI/ModalCreate/ModalCreate.scss | 2 +- .../ModalTicket.js} | 11 +- .../ModalTicket.scss} | 4 + .../UI/TicketFullScreen/TicketFullScreen.js | 256 ++++++++++++++++++ .../UI/TicketFullScreen/ticketFullScreen.scss | 28 ++ src/images/inFullScreen.svg | 3 + src/pages/Tracker/Tracker.js | 13 +- src/pages/Tracker/tracker.scss | 3 + 11 files changed, 384 insertions(+), 63 deletions(-) rename src/components/UI/{ModalTiket/ModalTiket.js => ModalTicket/ModalTicket.js} (93%) rename src/components/UI/{ModalTiket/ModalTiket.scss => ModalTicket/ModalTicket.scss} (99%) create mode 100644 src/components/UI/TicketFullScreen/TicketFullScreen.js create mode 100644 src/components/UI/TicketFullScreen/ticketFullScreen.scss create mode 100644 src/images/inFullScreen.svg diff --git a/src/App.js b/src/App.js index 9373a11f..d406281b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,10 @@ -import React from 'react' -import {BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-dom'; - +import React from "react"; +import { + BrowserRouter as Router, + Route, + Routes, + Navigate, +} from "react-router-dom"; import AuthForPartners from "./pages/AuthForPartners/AuthForPartners"; import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers"; @@ -22,6 +26,7 @@ import { Summary } from "./pages/Summary/Summary"; import { ViewReport } from "./pages/ViewReport/ViewReport"; import { Tracker } from "./pages/Tracker/Tracker"; import { Payouts } from "./pages/Payouts/Payouts"; +import { TicketFullScreen } from "./components/UI/TicketFullScreen/TicketFullScreen"; import { PartnerSettings } from "./pages/PartnerSettings/PartnerSettings"; import { PartnerRequests } from "./pages/PartnerRequests/PartnerRequests"; import { PartnerAddRequest } from "./pages/PartnerAddRequest/PartnerAddRequest"; @@ -29,66 +34,73 @@ import { PartnerBid } from "./pages/PartnerBid/PartnerBid"; import { PartnerCategories } from "./pages/PartnerСategories/PartnerСategories"; import { PartnerTreaties } from "./pages/PartnerTreaties/PartnerTreaties"; import { PartnerEmployees } from "./pages/PartnerEmployees/PartnerEmployees"; -import {AuthForCandidate} from "./pages/AuthForCandidate/AuthForCandidate"; -import {RegistrationForCandidate} from "./pages/RegistrationForCandidate/RegistrationForCandidate"; - - -import './fonts/stylesheet.css' -import 'bootstrap/dist/css/bootstrap.min.css' - - +import { AuthForCandidate } from "./pages/AuthForCandidate/AuthForCandidate"; +import { RegistrationForCandidate } from "./pages/RegistrationForCandidate/RegistrationForCandidate"; +import "./fonts/stylesheet.css"; +import "bootstrap/dist/css/bootstrap.min.css"; const App = () => { return ( - <> - + <> + + + } /> + } /> + } /> + } + > + } /> + } + /> - + } /> + } /> + } /> - }/> - }/> - } /> - }/> - }/> + } /> + } /> - }/> - }/> - }/> + + } /> + } /> + } /> + } /> + } /> + - }/> - }/> + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } + /> + - - }/> - }/> - }/> - }/> - }/> - - - - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - - - }/> - - - - ) + } /> + + + + ); }; -export default App +export default App; diff --git a/src/components/ProjectTiket/projectTiket.scss b/src/components/ProjectTiket/projectTiket.scss index 6a3cc218..e7042099 100644 --- a/src/components/ProjectTiket/projectTiket.scss +++ b/src/components/ProjectTiket/projectTiket.scss @@ -25,6 +25,9 @@ line-height: 32px; color: #111112; margin-bottom: 10px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } &__info { diff --git a/src/components/UI/ModalAdd/modalAdd.scss b/src/components/UI/ModalAdd/modalAdd.scss index 345b64ca..71fc24db 100644 --- a/src/components/UI/ModalAdd/modalAdd.scss +++ b/src/components/UI/ModalAdd/modalAdd.scss @@ -15,7 +15,7 @@ position: relative; width: 424px; background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%); - border-radius: 40px; + border-radius: 24px; padding: 60px 60px 30px 60px; display: flex; diff --git a/src/components/UI/ModalCreate/ModalCreate.scss b/src/components/UI/ModalCreate/ModalCreate.scss index 8db78e25..5139572e 100644 --- a/src/components/UI/ModalCreate/ModalCreate.scss +++ b/src/components/UI/ModalCreate/ModalCreate.scss @@ -1,5 +1,5 @@ .modal-project { - z-index: 9; + z-index: 9999; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.11); diff --git a/src/components/UI/ModalTiket/ModalTiket.js b/src/components/UI/ModalTicket/ModalTicket.js similarity index 93% rename from src/components/UI/ModalTiket/ModalTiket.js rename to src/components/UI/ModalTicket/ModalTicket.js index 9648200c..89933e43 100644 --- a/src/components/UI/ModalTiket/ModalTiket.js +++ b/src/components/UI/ModalTicket/ModalTicket.js @@ -13,11 +13,13 @@ 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 "./ModalTiket.scss"; +import "./ModalTicket.scss"; +import { Link } from "react-router-dom"; -export const ModalTiket = ({ active, setActive }) => { +export const ModalTiсket = ({ active, setActive, index }) => { const [tiket] = useState({ name: "Разработка трекера", code: "PR - 2245", @@ -50,6 +52,9 @@ export const ModalTiket = ({ active, setActive }) => {

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

@@ -154,4 +159,4 @@ export const ModalTiket = ({ active, setActive }) => { ); }; -export default ModalTiket; +export default ModalTiсket; diff --git a/src/components/UI/ModalTiket/ModalTiket.scss b/src/components/UI/ModalTicket/ModalTicket.scss similarity index 99% rename from src/components/UI/ModalTiket/ModalTiket.scss rename to src/components/UI/ModalTicket/ModalTicket.scss index 4cd60388..f1983bd1 100644 --- a/src/components/UI/ModalTiket/ModalTiket.scss +++ b/src/components/UI/ModalTicket/ModalTicket.scss @@ -41,6 +41,10 @@ &__category { margin-right: 17px; } + + &__full { + margin-left: 35%; + } } &__task { diff --git a/src/components/UI/TicketFullScreen/TicketFullScreen.js b/src/components/UI/TicketFullScreen/TicketFullScreen.js new file mode 100644 index 00000000..37a4b127 --- /dev/null +++ b/src/components/UI/TicketFullScreen/TicketFullScreen.js @@ -0,0 +1,256 @@ +import React, { useState } from "react"; + +import { ProfileHeader } from "../../ProfileHeader/ProfileHeader"; +import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs"; +import { Footer } from "../../Footer/Footer"; +import { Link } from "react-router-dom"; +import ModalAdd from "../ModalAdd/ModalAdd"; + +import avatarMock1 from "../../../images/avatarMoсk1.png"; +import avatarMock2 from "../../../images/avatarMoсk2.png"; +import project from "../../../images/trackerProject.svg"; +import watch from "../../../images/watch.png"; +import file from "../../../images/fileModal.svg"; +import task from "../../../images/tasksMock.png"; +import send from "../../../images/send.svg"; +import arrow2 from "../../../images/arrowStart.png"; +import plus from "../../../images/plus.svg"; +import tasks from "../../../images/trackerTasks.svg"; +import archive from "../../../images/archiveTracker.svg"; +import selectArrow from "../../../images/select.svg"; +import avatarTest from "../../../images/AvatarTest .png"; +import arrow from "../../../images/arrowCalendar.png"; +import link from "../../../images/link.svg"; +import archive2 from "../../../images/archive.svg"; +import del from "../../../images/delete.svg"; +import edit from "../../../images/edit.svg"; + +import "./ticketFullScreen.scss"; + +export const TicketFullScreen = ({}) => { + const [toggleTab, setToggleTab] = useState(1); + const [addSubtask, setAddSubtask] = useState(false); + const [modalAddWorker, setModalAddWorker] = useState(false); + const [valueTiket, setValueTiket] = useState(""); + + const [tiket] = useState({ + name: "Разработка трекера", + code: "PR - 2245", + creator: "Василий Тарасов", + descriptions: + "На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска. Необходимо исправить все страницы где есть ошибки или отсутствует Title и Description.", + }); + const [workers] = useState([ + { + name: "Дмитрий Рогов", + avatar: avatarMock2, + }, + { + name: "Марина Серова", + avatar: avatarMock1, + }, + ]); + + const toggleTabs = (index) => { + setToggleTab(index); + }; + + return ( +
+ +
+
+ +

Управление проектами с трекером

+
+
+
+
+
toggleTabs(1)} + > + img +

Проекты

+
+
toggleTabs(2)} + > + img + +

Все мои задачи

+ +
+
toggleTabs(3)} + > + img + +

Архив

+ +
+
+
+
+
+

Проект : Разработка трекера

+ + +
+

Добавьте участника

+

Введите имя или e-mail

+
+ setValueTiket(e.target.value)} + > +
+
+ + + +
+ avatar + avatar + +9 + + + + +

добавить участника в проект

+
+
+ Учавствую + arrow +
+
+ Мои + arrow +
+ +
+

Вернуться на проекты

+ arrow +
+ +
+
+
+
+
+
+ Задача +
{tiket.code}
+
+

{tiket.descriptions}

+ +

{tiket.descriptions}

+
+
+

+ +

+

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

+
+
+ + +
+
+
+
+
+

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

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

{worker.name}

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

{"8:30:22"}

+
+ + +
+ +
+
+ +

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

+
+
+ +

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

+
+
+ +

в архив

+
+
+ +

удалить

+
+
+
+
+ + +
+

+ Вы добавляете подзадачу

в колонку задачи {"Готово"}

+

+

Введите текст

+
+ +
+
+ + +
+
+
+ ); +}; + +export default TicketFullScreen; diff --git a/src/components/UI/TicketFullScreen/ticketFullScreen.scss b/src/components/UI/TicketFullScreen/ticketFullScreen.scss new file mode 100644 index 00000000..c61ae18a --- /dev/null +++ b/src/components/UI/TicketFullScreen/ticketFullScreen.scss @@ -0,0 +1,28 @@ +.ticket-full-screen { + background: #f5f5f5; +} + +.ticket { + border: none; + justify-content: center; + + &-whith { + width: 850px !important; + } +} + +// .modal-tiket__content .content { +// width: 70%; +// } + +.content-tabs { + padding-bottom: 0; +} + +.link { + color: #252c32; + &:hover { + color: #252c32; + text-decoration: none; + } +} diff --git a/src/images/inFullScreen.svg b/src/images/inFullScreen.svg new file mode 100644 index 00000000..8c074f29 --- /dev/null +++ b/src/images/inFullScreen.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index a81ae8ff..e4c5e765 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -7,7 +7,7 @@ import { Footer } from "../../components/Footer/Footer"; import { useDispatch, useSelector } from "react-redux"; import { getProjects } from "../../redux/projectsTrackerSlice"; -import ModalTiket from "../../components/UI/ModalTiket/ModalTiket"; +import ModalTicket from "../../components/UI/ModalTicket/ModalTicket"; import ModalCreate from "../../components/UI/ModalCreate/ModalCreate"; import ModalAdd from "../../components/UI/ModalAdd/ModalAdd"; import ProjectTiket from "../../components/ProjectTiket/ProjectTiket"; @@ -359,6 +359,7 @@ export const Tracker = () => { // Modal State const [modalActiveTicket, setModalActiveTicket] = useState(false); + const [indexTicket, setIndexTicket] = useState(0); const [modalAddWorker, setModalAddWorker] = useState(false); const [modalCreateProject, setModalCreateProject] = useState(false); const [modalCreateColl, setModalCreateColl] = useState(false); @@ -491,6 +492,11 @@ export const Tracker = () => { setModalCreateTiket(true); } + function openTicket(e, iTicket) { + setIndexTicket(iTicket); + setModalActiveTicket(true); + } + function createTiket() { tabTaskMok.filter((item) => { if (item.name == selectedTab.name) { @@ -710,9 +716,10 @@ export const Tracker = () => {
- @@ -781,7 +788,7 @@ export const Tracker = () => { dragStartHandler(e, task, wrapperIndex) } onDragEnd={(e) => dragEndHandler(e)} - onClick={() => setModalActiveTicket(true)} + onClick={(e) => openTicket(e, index)} >

{task.task}

diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 04a9566f..bc765bdc 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -411,6 +411,9 @@ font-size: 16px; line-height: 24px; margin-bottom: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } span {