apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tracker fixes

Browse Source
This commit is contained in:
Николай Полтщук 2023-07-07 00:46:40 +03:00
parent e6689c315d
commit 7f0dc9612b
14 changed files with 226 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/archiveIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

11
src/components/AuthBox/authBox.scss
View File

@ -133,13 +133,14 @@
text-align: center;
border: 2px solid #6aaf5c;
margin-right: 1.5rem;
transition: 0.3s;
&:hover {
background-image: none;
background-color: #ffffff;
border: 2px solid #6aaf5c;
color: #6aaf5c !important;
transition: 0.3s;
transform: scale(1.03);
//background-image: none;
//background-color: #ffffff;
//border: 2px solid #6aaf5c;
//color: #6aaf5c !important;
.loader * {
fill: #6aaf5c;

10
src/components/Common/Loader/loader.scss
View File

@ -6,9 +6,9 @@
align-items: center;
position: relative;
&:hover {
path {
fill: #6aaf5c;
}
}
//&:hover {
// path {
// fill: #6aaf5c;
// }
//}
}

51
src/components/Common/ModalLayout/modalLayout.scss
View File

@ -15,11 +15,60 @@
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
border-radius: 24px;
padding: 60px 60px 30px 60px;
padding: 20px 40px 30px 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.selectPerson {
align-items: start;
&__info {
font-size: 15px;
font-weight: 300;
margin: 12px 0 20px;
}
}
.invite__blocks {
display: flex;
column-gap: 20px;
span {
margin-top: 8px;
font-size: 15px;
font-weight: 300;
}
.invitePersonBlock {
display: flex;
flex-direction: column;
row-gap: 20px;
&__input {
margin: 0;
min-width: 320px;
height: 42px;
input {
height: 42px;
}
}
&__btn {
margin: 0 auto 0 0;
max-width: 242px;
width: 100%;
}
}
}
.select__person {
display: flex;
flex-direction: column;
row-gap: 10px;
padding: 39px 10px 29px 10px;
}
}
}

6
src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
View File

@ -363,9 +363,9 @@ export const ModalTiсket = ({
</h3>
<div className="content__task">
<span>Задача</span>
{editOpen ? (
<input
maxLength="100"
value={inputsValue.title}
onChange={(e) => {
setInputsValue((prevValue) => ({
@ -463,8 +463,8 @@ export const ModalTiсket = ({
</div>
<div className="workers">
<div className="workers_box task__info">
<span className="exit" onClick={() => setActive(false)}></span>
<span className="nameProject">{task.title}</span>
<span className="exit" onClick={() => setActive(false)}>
</span>
<p className="workers__creator">Создатель : {task.user?.fio}</p>
{executor ? (

27
src/components/Modal/Tracker/ModalTicket/modalTicket.scss
View File

@ -33,6 +33,9 @@
display: flex;
align-items: center;
flex-direction: row;
color: #1458DD;
font-weight: 700;
font-size: 22px;
&__category {
margin-right: 17px;
@ -104,9 +107,9 @@
h5 {
font-family: "Inter", sans-serif;
font-weight: 500;
font-weight: 600;
font-style: normal;
font-size: 16px;
font-size: 19px;
line-height: 24px;
color: #1a1919;
margin-bottom: 0;
@ -280,7 +283,7 @@
&__description {
display: flex;
flex-direction: column;
margin-top: 10px;
margin-top: 12px;
textarea {
min-height: 120px;
@ -405,6 +408,7 @@
display: flex;
flex-direction: column;
font-size: 14px;
margin-top: 8px;
&__list {
display: flex;
@ -420,13 +424,17 @@
.exit {
cursor: pointer;
position: absolute;
top: 35px;
right: 40px;
top: 25px;
right: 30px;
width: 13px;
height: 13px;
display: flex;
align-items: center;
justify-content: center;
&:before,
&:after {
content: "";
position: absolute;
width: 16px;
height: 2px;
background: #263238;
@ -459,6 +467,7 @@
align-items: center;
position: relative;
margin-bottom: 5px;
margin-top: 12px;
span {
color: #000000;
@ -552,6 +561,7 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 8px;
span {
margin-left: 5px;
@ -585,7 +595,6 @@
.task__info {
display: flex;
flex-direction: column;
row-gap: 5px;
.delete {
cursor: pointer;
@ -669,6 +678,10 @@
align-items: center;
padding-left: 10px;
img {
width: 11px;
}
p {
margin: 0 0 0 12px;
}

9
src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
View File

@ -24,8 +24,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
import archive from "assets/icons/archive.svg";
import archive2 from "assets/icons/archive.svg";
import archive from "assets/images/archiveIcon.png";
import arrow from "assets/icons/arrows/arrowCalendar.png";
import arrowStart from "assets/icons/arrows/arrowStart.png";
import close from "assets/icons/close.png";
@ -412,7 +411,7 @@ export const TicketFullScreen = () => {
<>
<div className="tracker__tabs__content content-tabs">
<div className="tasks__head">
<div className="tasks__head__wrapper">
<div className="tasks__head__wrapper tasks__head__wrapper__fullScreen">
<h5>Проект : {projectInfo.name}</h5>
<TrackerModal
@ -518,9 +517,9 @@ export const TicketFullScreen = () => {
<div className="modal-tiket__content ticket">
<div className="content ticket-whith">
<div className="content__task">
<span>Задача</span>
{editOpen ? (
<input
maxLength="100"
value={inputsValue.title}
onChange={(e) => {
setInputsValue((prevValue) => ({
@ -810,7 +809,7 @@ export const TicketFullScreen = () => {
<p onClick={copyTicketLink}>ссылка на задачу</p>
</div>
<div>
<img src={archive2} alt="arch"></img>
<img src={archive} alt="arch"></img>
<p>в архив</p>
</div>
<div onClick={deleteTask}>

30
src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
View File

@ -53,7 +53,7 @@ export const TrackerModal = ({
const [valueColumn, setValueColumn] = useState("");
const [nameProject, setNameProject] = useState("");
const [valueTiket, setValueTiket] = useState("");
const [descriptionTicket, setDescriptionTicket] = useState("Описание задачи");
const [descriptionTicket, setDescriptionTicket] = useState("");
const [workers, setWorkers] = useState([]);
const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
const [selectedWorker, setSelectedWorker] = useState(null);
@ -271,8 +271,9 @@ export const TrackerModal = ({
// }}
>
{modalType === "addWorker" && (
<div>
<div className="title-project">
<>
<div className='select__person'>
<div className="title-project selectPerson">
<h4>Добавьте участника</h4>
{/*<div className="input-container">*/}
{/* <input*/}
@ -281,6 +282,9 @@ export const TrackerModal = ({
{/* onChange={(e) => setEmailWorker(e.target.value)}*/}
{/* />*/}
{/*</div>*/}
<p className='selectPerson__info'>Выберите пользователя в проекте или добавьте по e- mail</p>
<div className='invite__blocks'>
<div className='addPersonBlock'>
<div
className={
selectWorkersOpen ? "select__worker open" : "select__worker"
@ -322,11 +326,23 @@ export const TrackerModal = ({
</div>
)}
</div>
</div>
<BaseButton styles={"button-add"} onClick={addUserToProject}>
<BaseButton styles={"button-add addPersonBtn"} onClick={addUserToProject}>
Добавить
</BaseButton>
</div>
<span>или</span>
<div className='invitePersonBlock'>
<div className='input-container invitePersonBlock__input'>
<input className="name-project" placeholder='email' type="email" />
</div>
<BaseButton styles={"button-add invitePersonBlock__btn"}>
Отправить приглашение
</BaseButton>
</div>
</div>
</div>
</div>
</>
)}
{modalType === "createTiketProject" && (
<>
@ -334,6 +350,7 @@ export const TrackerModal = ({
<h4>Введите название и описание задачи</h4>
<div className="input-container">
<input
maxLength="100"
className="name-project"
value={valueTiket}
onChange={(e) => setValueTiket(e.target.value)}
@ -355,6 +372,7 @@ export const TrackerModal = ({
"blockQuote",
],
removePlugins: ["BlockQuote"],
placeholder: "Описание задачи"
}}
onChange={(event, editor) => {
const data = editor.getData();
@ -443,6 +461,7 @@ export const TrackerModal = ({
<h4>{titleProject}</h4>
<div className="input-container">
<input
maxLength="30"
className="name-project"
value={nameProject}
onChange={(e) => setNameProject(e.target.value)}
@ -477,6 +496,7 @@ export const TrackerModal = ({
<h4>Введите название колонки</h4>
<div className="input-container">
<input
maxLength="100"
className="name-project"
value={valueColumn}
onChange={(e) => setValueColumn(e.target.value)}

28
src/components/Modal/Tracker/TrackerModal/trackerModal.scss
View File

@ -30,7 +30,6 @@
display: flex;
align-items: center;
flex-direction: column;
margin: 0 0 15px 0;
row-gap: 5px;
.select-priority {
@ -79,7 +78,7 @@
}
.input-container {
width: 320px;
width: 100%;
height: 35px;
background: #ffffff;
border-radius: 8px;
@ -91,7 +90,7 @@
}
.ck-editor {
max-width: 320px;
width: 100%;
}
.ck-editor__editable.ck-rounded-corners {
@ -104,6 +103,10 @@
border-radius: 8px 8px 0 0 !important;
}
.ck-placeholder {
display: block !important;
}
.ck-content {
border: none !important;
border-radius: 0 0 8px 8px !important;
@ -111,7 +114,7 @@
}
.select__executor {
width: 320px;
width: 100%;
background: white;
border-radius: 8px;
margin: 5px 0;
@ -215,6 +218,7 @@
cursor: pointer;
position: relative;
min-width: 320px;
height: 42px;
width: 100%;
p {
@ -237,7 +241,7 @@
position: absolute;
width: 100%;
padding: 9.5px 12px;
top: 35px;
top: 48px;
left: 0;
background: white;
border-radius: 5px;
@ -286,6 +290,11 @@
margin: 0 auto;
}
.addPersonBtn {
margin: 0 auto 0 0;
margin-top: 20px;
}
.modal-add.active {
transform: scale(1);
}
@ -293,8 +302,13 @@
.exit {
cursor: pointer;
position: absolute;
top: 35px;
right: 40px;
top: 15px;
right: 20px;
width: 13px;
height: 13px;
display: flex;
align-items: center;
justify-content: center;
&:before,
&:after {

6
src/components/Modal/TrackerModal/trackerModal.scss
View File

@ -153,11 +153,15 @@
position: absolute;
top: 35px;
right: 40px;
width: 13px;
height: 13px;
display: flex;
align-items: center;
justify-content: center;
&:before,
&:after {
content: "";
position: absolute;
width: 16px;
height: 2px;
background: #263238;

6
src/pages/ProjectTracker/ProjectTracker.js
View File

@ -34,7 +34,7 @@ import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import archive from "assets/icons/archiveTracker.svg";
import archive from "assets/images/archiveIcon.png";
import arrow from "assets/icons/arrows/arrowCalendar.png";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import close from "assets/icons/close.png";
@ -390,7 +390,7 @@ export const ProjectTracker = () => {
/>
<div className="persons__list__count">
<span>{projectBoard.projectUsers?.length}</span>
участник
{caseOfNum(projectBoard.projectUsers?.length, "persons")}
</div>
<div className="persons__list__info">
<span>В проекте - </span>
@ -480,7 +480,7 @@ export const ProjectTracker = () => {
setSelectedExecutorOpen(!selectExecutorOpen)
}
>
<p>Выберите исполнитель</p>
<p>Выберите исполнителя</p>
<img
className={selectExecutorOpen ? "open" : ""}
src={arrowDown}

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

@ -23,7 +23,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import ProjectTiket from "@components/ProjectTiket/ProjectTiket";
import archive from "assets/icons/archiveTracker.svg";
import archive from "assets/images/archiveIcon.png";
import search from "assets/icons/serchIcon.png";
import project from "assets/icons/trackerProject.svg";
import tasks from "assets/icons/trackerTasks.svg";

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

@ -55,6 +55,11 @@
align-items: center;
color: black;
img {
width: 16px;
height: 16px;
}
@media (max-width: 490px) {
padding: 8px 20px 8px 14px;
}
@ -214,6 +219,10 @@
justify-content: space-between;
padding: 0 10px;
align-items: center;
&__fullScreen {
max-width: 1160px;
}
}
h5 {
@ -616,6 +625,8 @@
margin: 0 auto;
overflow: auto;
max-width: 100%;
transform: scaleY(-1);
align-items: end;
&::-webkit-scrollbar {
height: 8px;
@ -650,6 +661,7 @@
transition: all 0.3s ease;
//max-height: 500px;
//overflow-y: auto;
transform: scaleY(-1);
&::-webkit-scrollbar {
width: 3px;
@ -692,9 +704,8 @@
transition: 0.4s;
&:hover {
transform: scale(0.99);
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
transition: 0.4s;
transform: scale(1.025);
transition: 0.3s;
}
&__hide {
@ -712,6 +723,12 @@
font-size: 16px;
line-height: 24px;
margin-bottom: 0;
max-height: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
span {
@ -852,11 +869,13 @@
&__noItems {
font-weight: 500;
font-size: 25px;
transform: scaleY(-1);
}
&__noTasks {
display: flex;
flex-direction: column;
transform: scaleY(-1);
&Info {
display: flex;
@ -1057,6 +1076,7 @@
&__info {
display: flex;
flex-direction: column;
max-width: 730px;
h5 {
font-weight: 700;
@ -1068,7 +1088,7 @@
p {
font-size: 16px;
line-height: 32px;
max-width: 400px;
max-width: 710px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

11
src/utils/helper.js
View File

@ -64,7 +64,8 @@ export function getCorrectRequestDate(date) {
export function caseOfNum(number, type) {
const comments = ["коментарий", "комментария", " коментариев"];
const files = ["файлов", "файла", "файлов"];
const files = ["файл", "файла", "файлов"];
const persons = ["участник", "участника", "участников"]
const cases = [2, 0, 1, 1, 1, 2];
if (type === "comments") {
return comments[
@ -80,4 +81,12 @@ export function caseOfNum(number, type) {
: cases[number % 10 < 5 ? number % 10 : 5]
];
}
if (type === "persons") {
return persons[
number % 100 > 4 && number % 100 < 20
? 2
: cases[number % 10 < 5 ? number % 10 : 5]
];
}
}