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

View File

@ -277,7 +277,7 @@
justify-content: space-between; justify-content: space-between;
margin-left: 20px; margin-left: 20px;
button { .button-add-file {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -332,6 +332,10 @@
cursor: pointer; cursor: pointer;
margin-right: 18px; margin-right: 18px;
} }
&:focus-within {
border: 1px solid #0000004d;
}
} }
} }
@ -392,6 +396,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
margin-bottom: 5px;
span { span {
color: #000000; color: #000000;
@ -402,17 +407,12 @@
font-weight: 400; font-weight: 400;
} }
button { .button-add-worker {
cursor: pointer;
background: #8bcc60;
border-radius: 44px;
width: 33px; width: 33px;
height: 33px; height: 33px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none;
color: white;
font-size: 17px; font-size: 17px;
} }
} }
@ -601,6 +601,10 @@
font-weight: 700; 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 BaseButton from "@components/Common/BaseButton/BaseButton";
import { Footer } from "@components/Common/Footer/Footer"; import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader"; 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 { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@ -386,10 +386,10 @@ export const TicketFullScreen = () => {
</BaseButton> </BaseButton>
</p> </p>
<p className="file"> <p className="file">
<button> <BaseButton styles={"button-add-file"}>
<img src={file} alt="file"></img> <img src={file}></img>
Загрузить файл Загрузить файл
</button> </BaseButton>
<span>{0}</span> <span>{0}</span>
Файлов Файлов
</p> </p>
@ -441,25 +441,28 @@ export const TicketFullScreen = () => {
</div> </div>
<div className="add-worker moreItems"> <div className="add-worker moreItems">
<button <BaseButton
onClick={() => { onClick={() => {
dispatch(modalToggle("addWorker")); dispatch(modalToggle("addWorker"));
setModalAddWorker(true); setModalAddWorker(true);
}} }}
styles={"button-add-worker"}
> >
+ +
</button> </BaseButton>
<span>Добавить исполнителя</span> <span>Добавить исполнителя</span>
</div> </div>
<div className="add-worker moreItems"> <div className="add-worker moreItems">
<button <BaseButton
onClick={() => { onClick={() => {
dispatch(modalToggle("addWorker")); dispatch(modalToggle("addWorker"));
setModalAddWorker(true); setModalAddWorker(true);
}} }}
styles={"button-add-worker"}
> >
+ +
</button> </BaseButton>
<span>Добавить участников</span> <span>Добавить участников</span>
</div> </div>
</div> </div>

View File

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

View File

@ -28,6 +28,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
margin: 0 0 15px 0;
.input-container { .input-container {
width: 287px; width: 287px;
@ -129,13 +130,13 @@
.button-add { .button-add {
width: 130px; width: 130px;
height: 37px; height: 37px;
background: #52b709; // background: #52b709;
border-radius: 44px; // border-radius: 44px;
border: none; // border: none;
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
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;

View File

@ -7,7 +7,7 @@ import { deleteProject, modalToggle } from "@redux/projectsTrackerSlice";
import { apiRequest } from "@api/request"; import { apiRequest } from "@api/request";
import { ModalSelect } from "@components/Modal/ModalSelect/ModalSelect"; 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 archiveSet from "assets/icons/archive.svg";
import del from "assets/icons/delete.svg"; import del from "assets/icons/delete.svg";

View File

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

View File

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

View File

@ -16,7 +16,7 @@ import { apiRequest } from "@api/request";
import { getCorrectDate } from "@components/Calendar/calendarHelper"; import { getCorrectDate } from "@components/Calendar/calendarHelper";
import { Footer } from "@components/Common/Footer/Footer"; import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader"; 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 { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";

View File

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