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

Added modal ticket

Browse Source
This commit is contained in:
MaxOvs19 2023-03-06 12:16:52 +03:00
parent 6d113852c4
commit 42db13cef8
4 changed files with 160 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/UI/ModalTiket/ModalTiket.js Normal file
View File

@ -0,0 +1,22 @@
import React from "react";
import "./ModalTiket.scss";
export const ModalTiket = ({ active, setActive }) => {
return (
<div
className={active ? "modal-tiket active" : "modal-tiket"}
onClick={() => setActive(false)}
>
<div
className="modal-tiket__content"
onClick={(e) => e.stopPropagation()}
>
<div className="colum author"></div>
<div className="colum content"></div>
<div className="colum workers"></div>
</div>
</div>
);
};
export default ModalTiket;

36
src/components/UI/ModalTiket/ModalTiket.scss Normal file
View File

@ -0,0 +1,36 @@
.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);
.colum {
.author {
}
.content {
}
.workers {
}
}
}
.modal-tiket.active {
transform: scale(1);
}
.modal-tiket__content {
padding: 20px;
width: 700px;
height: 400px;
background: #ffffff;
border: 1px solid #dde2e4;
border-radius: 8px;
}

112
src/pages/Tracker/Tracker.js
View File

@ -1,70 +1,94 @@
import React, {useState} from 'react'; import React, { useState } from "react";
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import {Footer} from '../../components/Footer/Footer' import { Footer } from "../../components/Footer/Footer";
import project from '../../images/trackerProject.svg' import project from "../../images/trackerProject.svg";
import tasks from '../../images/trackerTasks.svg' import tasks from "../../images/trackerTasks.svg";
import archive from '../../images/archiveTracker.svg' import archive from "../../images/archiveTracker.svg";
import './tracker.scss' import "./tracker.scss";
import ModalTiket from "../../components/UI/ModalTiket/ModalTiket";
export const Tracker = () => { export const Tracker = () => {
const [toggleTab, setToggleTab] = useState(1);
const [toggleTab, setToggleTab] = useState(1)
const [projects] = useState([ const [projects] = useState([
{ {
name: 'Разработка трекера', name: "Разработка трекера",
count: 4 count: 4,
}, },
{ {
name: 'Кинотеатр', name: "Кинотеатр",
count: 4 count: 4,
}, },
{ {
name: 'Проект страхование', name: "Проект страхование",
count: 4 count: 4,
} },
]) ]);
// TODO: тест на готовом элементе(потом перенести в другую вкладку(ЗАДАЧИ))
const [modalActive, setModalActive] = useState(false);
const toggleTabs = (index) => { const toggleTabs = (index) => {
setToggleTab(index) setToggleTab(index);
} };
return ( return (
<div className='tracker'> <div className="tracker">
<ProfileHeader /> <ProfileHeader />
<div className='container'> <div className="container">
<div className='tracker__content'> <div className="tracker__content">
<h2 className='tracker__title'>Трекер</h2> <h2 className="tracker__title">Трекер</h2>
<div className='tracker__tabs'> <div className="tracker__tabs">
<div className='tracker__tabs__head'> <div className="tracker__tabs__head">
<div className={toggleTab === 1 ? 'tab active-tab' : 'tab'} onClick={() => toggleTabs(1)}> <div
<img src={project} alt='img' /> className={toggleTab === 1 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(1)}
>
<img src={project} alt="img" />
<p>Проекты </p> <p>Проекты </p>
</div> </div>
<div className={toggleTab === 2 ? 'tab active-tab' : 'tab'} onClick={() => toggleTabs(2)}> <div
<img src={tasks} alt='img' /> className={toggleTab === 2 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(2)}
>
<img src={tasks} alt="img" />
<p>Задачи</p> <p>Задачи</p>
</div> </div>
<div className={toggleTab === 3 ? 'tab active-tab' : 'tab'} onClick={() => toggleTabs(3)}> <div
<img src={archive} alt='img' /> className={toggleTab === 3 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(3)}
>
<img src={archive} alt="img" />
<p>Архив</p> <p>Архив</p>
</div> </div>
</div> </div>
<div className='tracker__tabs__content'> <div className="tracker__tabs__content">
<div className={toggleTab === 1 ? 'tracker__tabs__content__projects active__content' : 'tracker__tabs__content__projects'}> <div
{projects.map((project, index) => { className={
return <div className='project'> toggleTab === 1
<h3>{project.name}</h3> ? "tracker__tabs__content__projects active__content"
<div className='project__info'> : "tracker__tabs__content__projects"
<p>Открытые задачи</p>
<span className='count'>{project.count}</span>
<span className='add'>+</span>
</div>
</div>
})
} }
<button><span>+</span>Создать проект</button> >
{projects.map((project, index) => {
return (
<div className="project">
<h3>{project.name}</h3>
<div className="project__info">
<p>Открытые задачи</p>
<span className="count">{project.count}</span>
<span className="add">+</span>
</div>
</div>
);
})}
{/* TODO: убрать потом клик на кнопке и перенести модалку*/}
<button onClick={() => setModalActive(true)}>
<span>+</span>Создать проект
</button>
<ModalTiket active={modalActive} setActive={setModalActive} />
</div> </div>
</div> </div>
</div> </div>
@ -72,5 +96,5 @@ export const Tracker = () => {
</div> </div>
<Footer /> <Footer />
</div> </div>
) );
}; };

23
src/pages/Tracker/tracker.scss
View File

@ -1,8 +1,9 @@
.tracker { .tracker {
background: #F1F1F1; background: #f1f1f1;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
font-family: "LabGrotesque", sans-serif; font-family: "LabGrotesque", sans-serif;
position: relative;
.container { .container {
max-width: 1160px; max-width: 1160px;
@ -58,7 +59,7 @@
width: 100%; width: 100%;
&__projects { &__projects {
background: #FFFFFF; background: #ffffff;
border-radius: 0 12px 12px 12px; border-radius: 0 12px 12px 12px;
padding: 26px 24px 40px; padding: 26px 24px 40px;
flex-wrap: wrap; flex-wrap: wrap;
@ -69,7 +70,7 @@
.project { .project {
width: 48%; width: 48%;
background: #F1F1F1; background: #f1f1f1;
border-radius: 12px; border-radius: 12px;
padding: 17px 26px 16px; padding: 17px 26px 16px;
cursor: pointer; cursor: pointer;
@ -88,7 +89,7 @@
position: relative; position: relative;
p { p {
color: #6F6F6F; color: #6f6f6f;
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
line-height: 24px; line-height: 24px;
@ -102,25 +103,25 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #DDDDDD; background: #dddddd;
border-radius: 4px; border-radius: 4px;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
color: #6F6F6F; color: #6f6f6f;
} }
.add { .add {
color: #6F6F6F; color: #6f6f6f;
font-size: 17px; font-size: 17px;
margin: 0 25px 0 auto; margin: 0 25px 0 auto;
} }
&:after { &:after {
content: '...'; content: "...";
position: absolute; position: absolute;
font-size: 17px; font-size: 17px;
color: #6F6F6F; color: #6f6f6f;
right: 0; right: 0;
top: -15%; top: -15%;
} }
@ -128,7 +129,7 @@
} }
button { button {
background: #52B709; background: #52b709;
border-radius: 44px; border-radius: 44px;
max-width: 150px; max-width: 150px;
height: 40px; height: 40px;
@ -137,7 +138,7 @@
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 32px; line-height: 32px;
color: #FFFFFF; color: #ffffff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;