Fixed buttons in tracker page

This commit is contained in:
MaxOvs19 2023-06-22 19:18:41 +03:00
parent 5ab7e65905
commit 055225d747
10 changed files with 103 additions and 63 deletions

View File

@ -9,7 +9,7 @@ import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
import BaseButton from "@components/Common/BaseButton/BaseButton";
import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
import archive from "assets/icons/archive.svg";
@ -370,10 +370,10 @@ export const ModalTiсket = ({
</BaseButton>
</p>
<p className="file">
<button>
<BaseButton styles={"button-add-file"}>
<img src={file}></img>
Загрузить файл
</button>
</BaseButton>
<span>{0}</span>
Файлов
</p>
@ -425,7 +425,12 @@ export const ModalTiсket = ({
</div>
) : (
<div className="add-worker moreItems ">
<button onClick={() => setDropListOpen(true)}>+</button>
<BaseButton
onClick={() => setDropListOpen(true)}
styles={"button-add-worker"}
>
+
</BaseButton>
<span>Добавить исполнителя</span>
{dropListOpen && (
<div className="dropdownList">
@ -473,7 +478,12 @@ export const ModalTiсket = ({
)}
<div className="add-worker moreItems">
<button onClick={() => setDropListMembersOpen(true)}>+</button>
<BaseButton
onClick={() => setDropListMembersOpen(true)}
styles={"button-add-worker"}
>
+
</BaseButton>
<span>Добавить участников</span>
{dropListMembersOpen && (
<div className="dropdownList">

View File

@ -277,7 +277,7 @@
justify-content: space-between;
margin-left: 20px;
button {
.button-add-file {
display: flex;
align-items: center;
justify-content: center;
@ -332,6 +332,10 @@
cursor: pointer;
margin-right: 18px;
}
&:focus-within {
border: 1px solid #0000004d;
}
}
}
@ -392,6 +396,7 @@
display: flex;
align-items: center;
position: relative;
margin-bottom: 5px;
span {
color: #000000;
@ -402,17 +407,12 @@
font-weight: 400;
}
button {
cursor: pointer;
background: #8bcc60;
border-radius: 44px;
.button-add-worker {
width: 33px;
height: 33px;
display: flex;
justify-content: center;
align-items: center;
border: none;
color: white;
font-size: 17px;
}
}
@ -601,6 +601,10 @@
font-weight: 700;
}
}
p:hover {
text-decoration: underline;
}
}
}
}

View File

@ -18,7 +18,7 @@ import { apiRequest } from "@api/request";
import BaseButton from "@components/Common/BaseButton/BaseButton";
import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@ -386,10 +386,10 @@ export const TicketFullScreen = () => {
</BaseButton>
</p>
<p className="file">
<button>
<img src={file} alt="file"></img>
<BaseButton styles={"button-add-file"}>
<img src={file}></img>
Загрузить файл
</button>
</BaseButton>
<span>{0}</span>
Файлов
</p>
@ -441,25 +441,28 @@ export const TicketFullScreen = () => {
</div>
<div className="add-worker moreItems">
<button
<BaseButton
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAddWorker(true);
}}
styles={"button-add-worker"}
>
+
</button>
</BaseButton>
<span>Добавить исполнителя</span>
</div>
<div className="add-worker moreItems">
<button
<BaseButton
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAddWorker(true);
}}
styles={"button-add-worker"}
>
+
</button>
</BaseButton>
<span>Добавить участников</span>
</div>
</div>

View File

@ -1,8 +1,6 @@
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { apiRequest } from "../../../api/request";
import arrowDown from "../../../assets/icons/arrows/selectArrow.png";
import {
addPersonToProject,
editColumnName,
@ -16,8 +14,16 @@ import {
setColumnPriority,
setProject,
setProjectBoardFetch,
} from "../../../redux/projectsTrackerSlice";
import { urlForLocal } from "../../../utils/helper";
} from "@redux/projectsTrackerSlice";
import { urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
import BaseButton from "@components/Common/BaseButton/BaseButton";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import "./trackerModal.scss";
export const TrackerModal = ({
@ -266,9 +272,9 @@ export const TrackerModal = ({
)}
</div>
</div>
<button className="button-add" onClick={addUserToProject}>
<BaseButton styles={"button-add"} onClick={addUserToProject}>
Добавить
</button>
</BaseButton>
</div>
)}
{modalType === "createTiketProject" && (
@ -292,9 +298,9 @@ export const TrackerModal = ({
/>
</div>
</div>
<button className="button-add" onClick={createTiket}>
<BaseButton styles={"button-add"} onClick={createTiket}>
Создать
</button>
</BaseButton>
</div>
)}
{modalType === "editProject" && (
@ -309,9 +315,10 @@ export const TrackerModal = ({
/>
</div>
</div>
<button className="button-add" onClick={editProject}>
<BaseButton styles={"button-add"} onClick={editProject}>
Сохранить
</button>
</BaseButton>
</div>
)}
{modalType === "createProject" && (
@ -325,9 +332,9 @@ export const TrackerModal = ({
onChange={(e) => setNameProject(e.target.value)}
/>
</div>
<button className="button-add" onClick={createProject}>
<BaseButton styles={"button-add"} onClick={createProject}>
Создать
</button>
</BaseButton>
</div>
</div>
)}
@ -343,9 +350,12 @@ export const TrackerModal = ({
<textarea className="title-project__textarea"></textarea>
</div>
</div>
<button className="button-add" onClick={(e) => e.preventDefault()}>
<BaseButton
styles={"button-add"}
onClick={(e) => e.preventDefault()}
>
Добавить
</button>
</BaseButton>
</div>
)}
{modalType === "createColumn" && (
@ -360,9 +370,9 @@ export const TrackerModal = ({
/>
</div>
</div>
<button className="button-add" onClick={createTab}>
<BaseButton styles={"button-add"} onClick={createTab}>
Создать
</button>
</BaseButton>
</div>
)}
{modalType === "editColumn" && (
@ -388,9 +398,9 @@ export const TrackerModal = ({
/>
</div>
</div>
<button className="button-add" onClick={changeColumnParams}>
<BaseButton styles={"button-add"} onClick={changeColumnParams}>
Сохранить
</button>
</BaseButton>
</div>
)}

View File

@ -28,6 +28,7 @@
display: flex;
align-items: center;
flex-direction: column;
margin: 0 0 15px 0;
.input-container {
width: 287px;
@ -129,13 +130,13 @@
.button-add {
width: 130px;
height: 37px;
background: #52b709;
border-radius: 44px;
border: none;
// background: #52b709;
// border-radius: 44px;
// border: none;
font-weight: 400;
font-size: 15px;
line-height: 32px;
color: #ffffff;
// color: #ffffff;
display: flex;
align-items: center;
justify-content: center;

View File

@ -7,7 +7,7 @@ import { deleteProject, modalToggle } from "@redux/projectsTrackerSlice";
import { apiRequest } from "@api/request";
import { ModalSelect } from "@components/Modal/ModalSelect/ModalSelect";
import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
import archiveSet from "assets/icons/archive.svg";
import del from "assets/icons/delete.svg";

View File

@ -1,12 +1,15 @@
import React, { useState } from "react";
import { apiRequest } from "../../api/request";
import del from "../../assets/icons/delete.svg";
import edit from "../../assets/icons/edit.svg";
import accept from "../../assets/images/accept.png";
import { urlForLocal } from "../../utils/helper";
import { getCorrectDate } from "../Calendar/calendarHelper";
import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment";
import { urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
import { getCorrectDate } from "@components/Calendar/calendarHelper";
import TrackerTaskSubComment from "@components/TrackerTaskComment/TrackerTaskComment";
import del from "assets/icons/delete.svg";
import edit from "assets/icons/edit.svg";
import accept from "assets/images/accept.png";
export const TrackerTaskComment = ({
taskId,

View File

@ -23,10 +23,11 @@ import { urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
import BaseButton from "@components/Common/BaseButton/BaseButton";
import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket";
import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@ -298,14 +299,23 @@ export const ProjectTracker = () => {
<h4>Проект : {projectBoard.name}</h4>
<div className="tasks__head__add">
<span
<BaseButton
onClick={() => {
dispatch(modalToggle("createColumn"));
setModalAdd(true);
}}
styles={"button-add-column"}
>
+
</BaseButton>
{/* <span
onClick={() => {
dispatch(modalToggle("createColumn"));
setModalAdd(true);
}}
>
+
</span>
</span> */}
<p>добавить колонку</p>
</div>
<div className="tasks__head__persons">

View File

@ -16,7 +16,7 @@ import { apiRequest } from "@api/request";
import { getCorrectDate } from "@components/Calendar/calendarHelper";
import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";

View File

@ -232,13 +232,11 @@
&__add {
display: flex;
span {
margin: 0 15px 0 10px;
.button-add-column {
width: 33px;
height: 33px;
background: #52b709;
border-radius: 44px;
color: whitesmoke;
cursor: pointer;
font-size: 15px;
display: flex;
align-items: center;
@ -315,7 +313,7 @@
z-index: 2;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #FFFFFF 0%, #EBEBEB 100%);
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
border-radius: 40px;
padding: 33px 24px 44px 34px;
width: 425px;
@ -331,7 +329,7 @@
&__count {
display: flex;
align-items: end;
color: #1458DD;
color: #1458dd;
font-size: 22px;
margin-top: 10px;
span {
@ -355,7 +353,7 @@
span {
width: auto;
height: auto;
color: #1458DD;
color: #1458dd;
font-weight: 600;
font-size: 18px;
line-height: 22px;
@ -407,7 +405,7 @@
cursor: pointer;
span {
background: #8BCC60;
background: #8bcc60;
left: 0;
}
@ -424,6 +422,7 @@
}
&__checkBox {
margin: 0 15px 0 0;
cursor: pointer;
display: flex;
align-items: center;