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

Fixed styles modalTracker

Browse Source
This commit is contained in:
MaxOvs19 2023-06-23 15:18:19 +03:00
parent bca8199a6a
commit f95812ac35
3 changed files with 283 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,6 +32,7 @@
max-width: 85%; max-width: 85%;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row;
&__category { &__category {
margin-right: 17px; margin-right: 17px;
@ -100,7 +101,7 @@
.comments__list { .comments__list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 420px; max-height: 300px;
overflow: auto; overflow: auto;
&::-webkit-scrollbar { &::-webkit-scrollbar {

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

@ -21,6 +21,7 @@ import { 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 ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import arrowDown from "assets/icons/arrows/selectArrow.png"; import arrowDown from "assets/icons/arrows/selectArrow.png";
@ -211,202 +212,197 @@ export const TrackerModal = ({
}, [active]); }, [active]);
return ( return (
<div <ModalLayout
className={active ? "modal-add active" : "modal-add"} active={active}
onClick={() => { setActive={setActive}
setActive(false); // onClick={() => {
setSelectWorkersOpen(false); // setSelectWorkersOpen(false);
}} // }}
> >
<div className="modal-add__content" onClick={(e) => e.stopPropagation()}> {modalType === "addWorker" && (
{modalType === "addWorker" && ( <div>
<div> <div className="title-project">
<div className="title-project"> <h4>Добавьте участника</h4>
<h4>Добавьте участника</h4> {/*<div className="input-container">*/}
{/*<div className="input-container">*/} {/* <input*/}
{/* <input*/} {/* className="name-project"*/}
{/* className="name-project"*/} {/* value={emailWorker}*/}
{/* value={emailWorker}*/} {/* onChange={(e) => setEmailWorker(e.target.value)}*/}
{/* onChange={(e) => setEmailWorker(e.target.value)}*/} {/* />*/}
{/* />*/} {/*</div>*/}
{/*</div>*/} <div
<div className={
className={ selectWorkersOpen ? "select__worker open" : "select__worker"
selectWorkersOpen ? "select__worker open" : "select__worker" }
} onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
>
<p>
{selectedWorker
? selectedWorker.employee.fio
: "Выберите пользователя"}
</p>
<img className="arrow" src={arrowDown} alt="arrow" />
{Boolean(selectWorkersOpen) && (
<div className="select__worker__dropDown">
{Boolean(workers.length) ? (
workers.map((worker) => {
if (worker === selectedWorker) {
return;
}
return (
<div
className="worker"
key={worker.id}
onClick={() => {
setSelectedWorker(worker);
}}
>
<p>{worker.employee.fio}</p>
<img
src={urlForLocal(worker.employee.avatar)}
alt="avatar"
/>
</div>
);
})
) : (
<div>Нет пользователей</div>
)}
</div>
)}
</div>
</div>
<BaseButton styles={"button-add"} onClick={addUserToProject}>
Добавить
</BaseButton>
</div>
)}
{modalType === "createTiketProject" && (
<div>
<div className="title-project">
<h4>Введите название и описание задачи</h4>
<div className="input-container">
<input
className="name-project"
value={valueTiket}
onChange={(e) => setValueTiket(e.target.value)}
placeholder="Название задачи"
/>
</div>
<div className="input-container">
<input
className="name-project"
value={descriptionTicket}
onChange={(e) => setDescriptionTicket(e.target.value)}
placeholder="Описание задачи"
/>
</div>
</div>
<BaseButton styles={"button-add"} onClick={createTiket}>
Создать
</BaseButton>
</div>
)}
{modalType === "editProject" && (
<div>
<div className="title-project">
<h4>Введите новое название</h4>
<div className="input-container">
<input
className="name-project"
value={projectName}
onChange={(e) => setProjectName(e.target.value)}
/>
</div>
</div>
<BaseButton styles={"button-add"} onClick={editProject}>
Сохранить
</BaseButton>
</div>
)}
{modalType === "createProject" && (
<div>
<div className="title-project">
<h4>{titleProject}</h4>
<div className="input-container">
<input
className="name-project"
value={nameProject}
onChange={(e) => setNameProject(e.target.value)}
/>
</div>
<BaseButton styles={"button-add"} onClick={createProject}>
Создать
</BaseButton>
</div>
</div>
)}
{modalType === "addSubtask" && (
<div>
<div className="title-project subtask">
<h4>
Вы добавляете подзадачу{" "}
<p>в колонку(id) задачи "{defautlInput}"</p>
</h4>
<p className="title-project__decs">Введите текст</p>
<div>
<textarea className="title-project__textarea"></textarea>
</div>
</div>
<BaseButton
styles={"button-add"}
onClick={(e) => e.preventDefault()}
> >
Добавить <p>
</BaseButton> {selectedWorker
</div> ? selectedWorker.employee.fio
)} : "Выберите пользователя"}
{modalType === "createColumn" && ( </p>
<div> <img className="arrow" src={arrowDown} alt="arrow" />
<div className="title-project"> {Boolean(selectWorkersOpen) && (
<h4>Введите название колонки</h4> <div className="select__worker__dropDown">
<div className="input-container"> {Boolean(workers.length) ? (
<input workers.map((worker) => {
className="name-project" if (worker === selectedWorker) {
value={valueColumn} return;
onChange={(e) => setValueColumn(e.target.value)} }
/> return (
</div> <div
className="worker"
key={worker.id}
onClick={() => {
setSelectedWorker(worker);
}}
>
<p>{worker.employee.fio}</p>
<img
src={urlForLocal(worker.employee.avatar)}
alt="avatar"
/>
</div>
);
})
) : (
<div>Нет пользователей</div>
)}
</div>
)}
</div> </div>
<BaseButton styles={"button-add"} onClick={createTab}> </div>
<BaseButton styles={"button-add"} onClick={addUserToProject}>
Добавить
</BaseButton>
</div>
)}
{modalType === "createTiketProject" && (
<div>
<div className="title-project">
<h4>Введите название и описание задачи</h4>
<div className="input-container">
<input
className="name-project"
value={valueTiket}
onChange={(e) => setValueTiket(e.target.value)}
placeholder="Название задачи"
/>
</div>
<div className="input-container">
<input
className="name-project"
value={descriptionTicket}
onChange={(e) => setDescriptionTicket(e.target.value)}
placeholder="Описание задачи"
/>
</div>
</div>
<BaseButton styles={"button-add"} onClick={createTiket}>
Создать
</BaseButton>
</div>
)}
{modalType === "editProject" && (
<div>
<div className="title-project">
<h4>Введите новое название</h4>
<div className="input-container">
<input
className="name-project"
value={projectName}
onChange={(e) => setProjectName(e.target.value)}
/>
</div>
</div>
<BaseButton styles={"button-add"} onClick={editProject}>
Сохранить
</BaseButton>
</div>
)}
{modalType === "createProject" && (
<div>
<div className="title-project">
<h4>{titleProject}</h4>
<div className="input-container">
<input
className="name-project"
value={nameProject}
onChange={(e) => setNameProject(e.target.value)}
/>
</div>
<BaseButton styles={"button-add"} onClick={createProject}>
Создать Создать
</BaseButton> </BaseButton>
</div> </div>
)} </div>
{modalType === "editColumn" && ( )}
<div> {modalType === "addSubtask" && (
<div className="title-project"> <div>
<h4>Введите новое название</h4> <div className="title-project subtask">
<div className="input-container"> <h4>
<input Вы добавляете подзадачу{" "}
className="name-project" <p>в колонку(id) задачи "{defautlInput}"</p>
value={columnName} </h4>
onChange={(e) => dispatch(setColumnName(e.target.value))} <p className="title-project__decs">Введите текст</p>
/> <div>
</div> <textarea className="title-project__textarea"></textarea>
<h4>Приоритет колонки</h4>
<div className="input-container">
<input
className="name-project"
placeholder="Приоритет колонки"
type="number"
step="1"
value={columnPriority}
onChange={(e) => dispatch(setColumnPriority(e.target.value))}
/>
</div>
</div> </div>
<BaseButton styles={"button-add"} onClick={changeColumnParams}>
Сохранить
</BaseButton>
</div> </div>
)} <BaseButton styles={"button-add"} onClick={(e) => e.preventDefault()}>
Добавить
</BaseButton>
</div>
)}
{modalType === "createColumn" && (
<div>
<div className="title-project">
<h4>Введите название колонки</h4>
<div className="input-container">
<input
className="name-project"
value={valueColumn}
onChange={(e) => setValueColumn(e.target.value)}
/>
</div>
</div>
<BaseButton styles={"button-add"} onClick={createTab}>
Создать
</BaseButton>
</div>
)}
{modalType === "editColumn" && (
<div>
<div className="title-project">
<h4>Введите новое название</h4>
<div className="input-container">
<input
className="name-project"
value={columnName}
onChange={(e) => dispatch(setColumnName(e.target.value))}
/>
</div>
<h4>Приоритет колонки</h4>
<div className="input-container">
<input
className="name-project"
placeholder="Приоритет колонки"
type="number"
step="1"
value={columnPriority}
onChange={(e) => dispatch(setColumnPriority(e.target.value))}
/>
</div>
</div>
<BaseButton styles={"button-add"} onClick={changeColumnParams}>
Сохранить
</BaseButton>
</div>
)}
<span className="exit" onClick={() => setActive(false)}></span> <span className="exit" onClick={() => setActive(false)}></span>
</div> </ModalLayout>
</div>
); );
}; };

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

@ -1,3 +1,4 @@
//Удалить при переходе всех модалок в обертку modalLayout
.modal-add { .modal-add {
z-index: 9; z-index: 9;
height: 100%; height: 100%;
@ -23,125 +24,123 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
}
.title-project { .title-project {
display: flex;
align-items: center;
flex-direction: column;
margin: 0 0 15px 0;
.input-container {
width: 287px;
height: 35px;
background: #ffffff;
border-radius: 8px;
margin: 12px 0;
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
}
h4 {
font-weight: 500;
font-size: 22px;
line-height: 26px;
color: #263238 !important;
}
&__decs {
font-weight: 300;
font-size: 12px;
line-height: 14px;
margin: 12px 0 16px 0;
}
&__textarea {
resize: none;
width: 302px;
height: 83px;
background: #ffffff;
border-radius: 8px;
border: none;
font-size: 15px;
line-height: 18px;
}
.select__worker {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
flex-direction: column; padding: 5px;
margin: 0 0 15px 0; background: white;
border-radius: 5px;
cursor: pointer;
width: 100%;
position: relative;
.input-container { p {
width: 287px; max-width: 150px;
height: 35px; overflow: hidden;
background: #ffffff; white-space: nowrap;
border-radius: 8px; text-overflow: ellipsis;
margin: 12px 0; font-size: 14px;
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
} }
h4 { img {
font-weight: 500; transition: all 0.3s ease;
font-size: 22px; width: 16px;
line-height: 26px; height: 16px;
color: #263238 !important;
} }
&__decs { &__dropDown {
font-weight: 300;
font-size: 12px;
line-height: 14px;
margin: 12px 0 16px 0;
}
&__textarea {
resize: none;
width: 302px;
height: 83px;
background: #ffffff;
border-radius: 8px;
border: none;
font-size: 15px;
line-height: 18px;
}
.select__worker {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center; position: absolute;
width: 100%;
padding: 5px; padding: 5px;
top: 35px;
left: 0;
background: white; background: white;
border-radius: 5px; border-radius: 5px;
cursor: pointer; row-gap: 5px;
width: 100%;
position: relative;
p { .worker {
max-width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
}
img {
transition: all 0.3s ease;
width: 16px;
height: 16px;
}
&__dropDown {
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
position: absolute;
width: 100%;
padding: 5px;
top: 35px;
left: 0;
background: white;
border-radius: 5px;
row-gap: 5px;
.worker {
display: flex;
justify-content: space-between;
}
}
}
.open {
.arrow {
transform: rotate(180deg);
} }
} }
} }
.name-project { .open {
margin-left: 10px; .arrow {
border: none; transform: rotate(180deg);
outline: none; }
height: 100%;
width: 90%;
font-size: 14px;
} }
}
.button-add { .name-project {
width: 130px; margin-left: 10px;
height: 37px; border: none;
// background: #52b709; outline: none;
// border-radius: 44px; height: 100%;
// border: none; width: 90%;
font-weight: 400; font-size: 14px;
font-size: 15px; }
line-height: 32px;
// color: #ffffff; .button-add {
display: flex; width: 130px;
align-items: center; height: 37px;
justify-content: center;
margin: 0 auto; font-weight: 400;
} font-size: 15px;
line-height: 32px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
} }
.modal-add.active { .modal-add.active {