finish tags style remake

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

View File

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