new design tasks
This commit is contained in:
MaxOvs19
parent
533e765581
commit
8b170fe43d
3
src/assets/icons/filterIcon.svg
Normal file
3
src/assets/icons/filterIcon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.7172 3.09109C11.7172 2.67543 11.8405 2.26911 12.0714 1.92351C12.3023 1.57791 12.6306 1.30854 13.0146 1.14948C13.3986 0.990413 13.8212 0.948794 14.2288 1.02988C14.6365 1.11097 15.011 1.31113 15.3049 1.60504C15.5988 1.89895 15.7989 2.27342 15.88 2.68109C15.9611 3.08876 15.9195 3.51131 15.7604 3.89533C15.6014 4.27934 15.332 4.60757 14.9864 4.83849C14.6408 5.06942 14.2345 5.19267 13.8188 5.19267C13.2614 5.19267 12.7269 4.97126 12.3328 4.57713C11.9387 4.18301 11.7172 3.64846 11.7172 3.09109ZM1.20932 3.79162H9.61566C9.80145 3.79162 9.97963 3.71781 10.111 3.58644C10.2424 3.45506 10.3162 3.27688 10.3162 3.09109C10.3162 2.9053 10.2424 2.72711 10.111 2.59574C9.97963 2.46436 9.80145 2.39056 9.61566 2.39056H1.20932C1.02353 2.39056 0.845344 2.46436 0.713969 2.59574C0.582594 2.72711 0.508789 2.9053 0.508789 3.09109C0.508789 3.27688 0.582594 3.45506 0.713969 3.58644C0.845344 3.71781 1.02353 3.79162 1.20932 3.79162ZM5.41249 5.8932C4.9789 5.89442 4.5563 6.02972 4.20263 6.28055C3.84896 6.53138 3.58152 6.88546 3.437 7.29426H1.20932C1.02353 7.29426 0.845344 7.36806 0.713969 7.49944C0.582594 7.63081 0.508789 7.80899 0.508789 7.99478C0.508789 8.18058 0.582594 8.35876 0.713969 8.49013C0.845344 8.62151 1.02353 8.69531 1.20932 8.69531H3.437C3.56551 9.0588 3.79154 9.37993 4.09034 9.62356C4.38914 9.8672 4.74921 10.0239 5.13113 10.0766C5.51305 10.1293 5.9021 10.076 6.25572 9.92235C6.60933 9.76874 6.91388 9.52082 7.13603 9.20571C7.35818 8.89061 7.48936 8.52047 7.51523 8.1358C7.54111 7.75113 7.46066 7.36676 7.28271 7.02475C7.10476 6.68273 6.83615 6.39626 6.50629 6.19669C6.17643 5.99711 5.79802 5.89212 5.41249 5.8932ZM15.2199 7.29426H9.61566C9.42986 7.29426 9.25168 7.36806 9.12031 7.49944C8.98893 7.63081 8.91513 7.80899 8.91513 7.99478C8.91513 8.18058 8.98893 8.35876 9.12031 8.49013C9.25168 8.62151 9.42986 8.69531 9.61566 8.69531H15.2199C15.4057 8.69531 15.5839 8.62151 15.7152 8.49013C15.8466 8.35876 15.9204 8.18058 15.9204 7.99478C15.9204 7.80899 15.8466 7.63081 15.7152 7.49944C15.5839 7.36806 15.4057 7.29426 15.2199 7.29426ZM6.81354 12.198H1.20932C1.02353 12.198 0.845344 12.2718 0.713969 12.4031C0.582594 12.5345 0.508789 12.7127 0.508789 12.8985C0.508789 13.0843 0.582594 13.2625 0.713969 13.3938C0.845344 13.5252 1.02353 13.599 1.20932 13.599H6.81354C6.99933 13.599 7.17752 13.5252 7.30889 13.3938C7.44027 13.2625 7.51407 13.0843 7.51407 12.8985C7.51407 12.7127 7.44027 12.5345 7.30889 12.4031C7.17752 12.2718 6.99933 12.198 6.81354 12.198ZM15.2199 12.198H12.9922C12.8269 11.7306 12.5018 11.3366 12.0742 11.0858C11.6466 10.8349 11.144 10.7433 10.6554 10.8272C10.1668 10.911 9.72356 11.1649 9.40402 11.5439C9.08448 11.9229 8.90922 12.4027 8.90922 12.8985C8.90922 13.3942 9.08448 13.874 9.40402 14.2531C9.72356 14.6321 10.1668 14.886 10.6554 14.9698C11.144 15.0536 11.6466 14.962 12.0742 14.7112C12.5018 14.4603 12.8269 14.0664 12.9922 13.599H15.2199C15.4057 13.599 15.5839 13.5252 15.7152 13.3938C15.8466 13.2625 15.9204 13.0843 15.9204 12.8985C15.9204 12.7127 15.8466 12.5345 15.7152 12.4031C15.5839 12.2718 15.4057 12.198 15.2199 12.198Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
@ -26,6 +26,7 @@ import ProjectTiket from "@components/ProjectTiket/ProjectTiket";
|
|||||||
import addProjectImg from "assets/icons/addProjectImg.svg";
|
import addProjectImg from "assets/icons/addProjectImg.svg";
|
||||||
import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg";
|
import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg";
|
||||||
import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
|
import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
|
||||||
|
import filterIcon from "assets/icons/filterIcon.svg";
|
||||||
import search from "assets/icons/serchIcon.png";
|
import search from "assets/icons/serchIcon.png";
|
||||||
import project from "assets/icons/trackerProject.svg";
|
import project from "assets/icons/trackerProject.svg";
|
||||||
import tasks from "assets/icons/trackerTasks.svg";
|
import tasks from "assets/icons/trackerTasks.svg";
|
||||||
@ -246,7 +247,25 @@ export const Tracker = () => {
|
|||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className="taskList__head">
|
<div className="taskList__head">
|
||||||
<h3>Список всех задач</h3>
|
<div className="taskList__tasks-period">
|
||||||
|
<div className="month-period">
|
||||||
|
<p>
|
||||||
|
{25} - {35}
|
||||||
|
</p>
|
||||||
|
<h2>Сентября,</h2>
|
||||||
|
<h3>2023</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="buttons-month">
|
||||||
|
<button>
|
||||||
|
<img src={arrowViewReport} alt="<"></img>
|
||||||
|
</button>
|
||||||
|
<button>
|
||||||
|
<img src={arrowViewReport} alt=">"></img>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="taskList__head__search">
|
<div className="taskList__head__search">
|
||||||
<img src={search} alt="search" />
|
<img src={search} alt="search" />
|
||||||
<input
|
<input
|
||||||
@ -255,7 +274,68 @@ export const Tracker = () => {
|
|||||||
onChange={(event) => filterAllTask(event)}
|
onChange={(event) => filterAllTask(event)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="taskList__filters">
|
||||||
|
<BaseButton styles={"taskList__filters-filter"}>
|
||||||
|
<img src={filterIcon} alt="#" />
|
||||||
|
<p>Фильтр</p>
|
||||||
|
</BaseButton>
|
||||||
|
<BaseButton styles={"taskList__filters-clear"}>
|
||||||
|
<p> Очистить фильтр</p>
|
||||||
|
</BaseButton>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table className="taskList__table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Задача</th>
|
||||||
|
<th>Статус</th>
|
||||||
|
<th>Потраченное время</th>
|
||||||
|
<th>Дата начала</th>
|
||||||
|
<th>Дедлайн</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div className="taskList__table__title-task">
|
||||||
|
Разработка трекера <img src="#" alt="#" />
|
||||||
|
</div>
|
||||||
|
<div className="taskList__table__name-project">
|
||||||
|
<h4>Проект:</h4>
|
||||||
|
<p>Туман</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="task-status">In Progress</div>
|
||||||
|
</td>
|
||||||
|
<td>14ч 25 мин</td>
|
||||||
|
<td>13.09.2020</td>
|
||||||
|
<td>20.09.2020</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div className="taskList__table__title-task">
|
||||||
|
Разработка трекера <img src="#" alt="#" />
|
||||||
|
</div>
|
||||||
|
<div className="taskList__table__name-project">
|
||||||
|
<h4>Проект:</h4>
|
||||||
|
<p>Туман</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="task-status">In Progress</div>
|
||||||
|
</td>
|
||||||
|
<td>14ч 25 мин</td>
|
||||||
|
<td>13.09.2020</td>
|
||||||
|
<td>20.09.2020</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
{loader && <Loader style="green" />}
|
{loader && <Loader style="green" />}
|
||||||
{!loader && (
|
{!loader && (
|
||||||
<div className="taskList__wrapper">
|
<div className="taskList__wrapper">
|
||||||
|
|||||||
@ -1184,7 +1184,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__search {
|
&__search {
|
||||||
margin-left: auto;
|
// margin-left: auto;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -1192,7 +1192,7 @@
|
|||||||
border: 1px solid #dde2e4;
|
border: 1px solid #dde2e4;
|
||||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
max-width: 450px;
|
max-width: 300px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&:focus-within {
|
&:focus-within {
|
||||||
@ -1224,6 +1224,154 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__tasks-period {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 25px;
|
||||||
|
|
||||||
|
.buttons-month {
|
||||||
|
display: flex;
|
||||||
|
gap: 34px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background-color: #8dc63f;
|
||||||
|
border-radius: 15px;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-period {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #1458dd;
|
||||||
|
font-size: 33px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 32px;
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: #252c32;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__filters {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
&-filter {
|
||||||
|
width: 116px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-right: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-clear {
|
||||||
|
width: 151px;
|
||||||
|
height: 40px;
|
||||||
|
background: #b0babf;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__table {
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 32px;
|
||||||
|
|
||||||
|
thead {
|
||||||
|
height: 65px;
|
||||||
|
background: #f1f1f1;
|
||||||
|
color: #5b6871;
|
||||||
|
|
||||||
|
th {
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 10px;
|
||||||
|
border-top-left-radius: 12px;
|
||||||
|
border-bottom-left-radius: 12px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-top-right-radius: 12px;
|
||||||
|
border-bottom-right-radius: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
color: #000;
|
||||||
|
td {
|
||||||
|
height: 65px;
|
||||||
|
border-bottom: 1px solid rgba(241, 241, 241, 1);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
max-width: 275px;
|
||||||
|
|
||||||
|
color: #111112;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-status {
|
||||||
|
width: 130px;
|
||||||
|
border: 1px solid #52b709;
|
||||||
|
border-radius: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #000;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title-task {
|
||||||
|
}
|
||||||
|
|
||||||
|
&__name-project {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin: 0;
|
||||||
|
color: #807777;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #000;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user