diff --git a/src/assets/icons/filterIcon.svg b/src/assets/icons/filterIcon.svg new file mode 100644 index 00000000..5df49a34 --- /dev/null +++ b/src/assets/icons/filterIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/Tracker/Tracker.jsx b/src/pages/Tracker/Tracker.jsx index 4075fcfd..db011d83 100644 --- a/src/pages/Tracker/Tracker.jsx +++ b/src/pages/Tracker/Tracker.jsx @@ -26,6 +26,7 @@ import ProjectTiket from "@components/ProjectTiket/ProjectTiket"; import addProjectImg from "assets/icons/addProjectImg.svg"; import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg"; import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg"; +import filterIcon from "assets/icons/filterIcon.svg"; import search from "assets/icons/serchIcon.png"; import project from "assets/icons/trackerProject.svg"; import tasks from "assets/icons/trackerTasks.svg"; @@ -246,7 +247,25 @@ export const Tracker = () => { } >
-

Список всех задач

+
+
+

+ {25} - {35} +

+

Сентября,

+

2023

+
+ +
+ + +
+
+
search { onChange={(event) => filterAllTask(event)} />
+ +
+ + # +

Фильтр

+
+ +

Очистить фильтр

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ЗадачаСтатусПотраченное времяДата началаДедлайн
+
+ Разработка трекера # +
+
+

Проект:

+

Туман

+
+
+
In Progress
+
14ч 25 мин13.09.202020.09.2020
+
+ Разработка трекера # +
+
+

Проект:

+

Туман

+
+
+
In Progress
+
14ч 25 мин13.09.202020.09.2020
+ {loader && } {!loader && (
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index f1312308..cdbc777b 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -1184,7 +1184,7 @@ } &__search { - margin-left: auto; + // margin-left: auto; padding: 6px 12px; display: flex; align-items: center; @@ -1192,7 +1192,7 @@ border: 1px solid #dde2e4; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); border-radius: 6px; - max-width: 450px; + max-width: 300px; width: 100%; &: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 { margin-top: 10px; display: flex;