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

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

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

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

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