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

finish tags style remake

Browse Source
This commit is contained in:
Victor Batischev 2024-02-09 21:47:19 +03:00
parent a7ceb942a8
commit 6ce0da40c6
3 changed files with 93 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -645,61 +645,63 @@ export const ProjectTracker = () => {
</div> </div>
{tags.open && ( {tags.open && (
<div className="tags__list"> <div className="tags__list">
<div {!tags.add && !tags.edit && (
className="add-new-tag" <div
onClick={() => className="add-new-tag"
setTags((prevState) => ({ onClick={() =>
...prevState, setTags((prevState) => ({
add: true ...prevState,
})) add: true
} }))
> }
<p>Добавить новый тег</p> >
<span>+</span> <p>Добавить новый тег</p>
</div> <span>+</span>
</div>
)}
{!tags.add && !tags.edit && ( {!tags.add && !tags.edit && (
<div className="tags__list__created"> <div className="tags__list__created">
{projectBoard.mark.map((tag) => { {projectBoard.mark.map((tag) => {
return ( return (
<div className="tag-item" key={tag.id}> <div className="tag-item" key={tag.id}>
<p className="tag-item__description">
{tag.title}
</p>
<div className="tag-item__info"> <div className="tag-item__info">
<span className="tag-item__info__name">
{tag.slug}
</span>
<span <span
className="tag-item__info__color" className="tag-item__color"
style={{ background: tag.color }} style={{ background: tag.color }}
/> />
<div>
<div className="tag-item__info__images"> <span className="tag-item__info__name">
<img {tag.slug}
src={edit} </span>
alt="edit" <p className="tag-item__description">
onClick={() => { {tag.title}
setTags((prevState) => ({ </p>
...prevState,
edit: true
}));
setTagInfo({
description: tag.title,
name: tag.slug,
editMarkId: tag.id
});
setColor(tag.color);
}}
/>
<img
onClick={() => deleteTag(tag.id)}
className="delete"
src={close}
alt="delete"
/>
</div> </div>
</div> </div>
<div className="tag-item__images">
<img
src={edit}
alt="edit"
onClick={() => {
setTags((prevState) => ({
...prevState,
edit: true
}));
setTagInfo({
description: tag.title,
name: tag.slug,
editMarkId: tag.id
});
setColor(tag.color);
}}
/>
<img
onClick={() => deleteTag(tag.id)}
className="delete"
src={close}
alt="delete"
/>
</div>
</div> </div>
); );
})} })}
@ -707,23 +709,6 @@ export const ProjectTracker = () => {
)} )}
{(tags.add || tags.edit) && ( {(tags.add || tags.edit) && (
<div className="form-tag"> <div className="form-tag">
<img
src={arrow}
className="arrow"
alt="arrow"
onClick={() => {
setTags((prevState) => ({
...prevState,
add: false,
edit: false
}));
setTagInfo({
description: "",
name: ""
});
setColor("#aabbcc");
}}
/>
<input <input
className="form-tag__input" className="form-tag__input"
placeholder="Описание метки" placeholder="Описание метки"
@ -761,15 +746,21 @@ export const ProjectTracker = () => {
> >
{tags.add ? "Добавить" : "Изменить"} {tags.add ? "Добавить" : "Изменить"}
</button> </button>
{tags.add && ( {(tags.add || tags.edit) && (
<button <button
className={"form-tag__btn"} className={"form-tag__btn"}
onClick={() => onClick={() => {
setTags((prevState) => ({ setTags((prevState) => ({
...prevState, ...prevState,
add: !tags.add add: false,
})) edit: false
} }));
setTagInfo({
description: "",
name: ""
});
setColor("#aabbcc");
}}
> >
Отмена Отмена
</button> </button>

8
src/pages/Tracker/Tracker.jsx
View File

@ -76,8 +76,12 @@ export const Tracker = () => {
`/task/get-user-tasks?user_id=${localStorage.getItem("id")}&expand=timers` `/task/get-user-tasks?user_id=${localStorage.getItem("id")}&expand=timers`
) )
.then((el) => { .then((el) => {
const allTasks = el?.length ? el.filter((item) => item.status !== 0) : []; const allTasks = el?.length
const completedTasks = el?.length ? el.filter((item) => item.status === 0) : []; ? el.filter((item) => item.status !== 0)
: [];
const completedTasks = el?.length
? el.filter((item) => item.status === 0)
: [];
setAllTasks(allTasks); setAllTasks(allTasks);
setFilteredAllTasks(allTasks); setFilteredAllTasks(allTasks);
setAllCompletedTasks(completedTasks); setAllCompletedTasks(completedTasks);

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

@ -555,13 +555,13 @@
} }
&__list { &__list {
position: absolute; position: absolute;
border-radius: 2px; border-radius: 8px;
background: #d9d9d9; background: #d9d9d9;
z-index: 8; z-index: 8;
// padding: 0 8px 10px; // padding: 0 8px 10px;
top: 30px; top: 30px;
width: 265px; width: 216px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -586,6 +586,7 @@
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
column-gap: 5px;
padding: 0px 8px; padding: 0px 8px;
border-radius: 8px; border-radius: 8px;
height: 40px; height: 40px;
@ -602,6 +603,29 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&__color {
width: 22.25px;
height: 23.217px;
border-radius: 8px;
}
&__images {
display: flex;
flex-direction: column-reverse;
row-gap: 3px;
img {
height: 14px;
width: 14px;
cursor: pointer;
}
.delete {
width: 16px;
height: 16px;
}
}
&__info { &__info {
display: flex; display: flex;
align-items: center; align-items: center;
@ -611,27 +635,6 @@
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
} }
&__color {
width: 22.25px;
height: 23.217px;
border-radius: 8px;
}
&__images {
display: flex;
flex-direction: column-reverse;
row-gap: 6px;
img {
cursor: pointer;
}
.delete {
width: 14px;
height: 14px;
}
}
} }
} }
} }
@ -641,11 +644,12 @@
align-items: center; align-items: center;
column-gap: 15px; column-gap: 15px;
border-radius: 8px; border-radius: 8px;
background: #252c32; background: white;
color: white; color: #252c32;
height: 42px; height: 40px;
cursor: pointer; cursor: pointer;
justify-content: center; justify-content: center;
margin: 8px 8px 0px;
p { p {
font-size: 15px; font-size: 15px;