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>
{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>

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`
)
.then((el) => {
const allTasks = el?.length ? el.filter((item) => item.status !== 0) : [];
const completedTasks = el?.length ? el.filter((item) => item.status === 0) : [];
const allTasks = el?.length
? el.filter((item) => item.status !== 0)
: [];
const completedTasks = el?.length
? el.filter((item) => item.status === 0)
: [];
setAllTasks(allTasks);
setFilteredAllTasks(allTasks);
setAllCompletedTasks(completedTasks);

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

@ -555,13 +555,13 @@
}
&__list {
position: absolute;
border-radius: 2px;
border-radius: 8px;
background: #d9d9d9;
z-index: 8;
// padding: 0 8px 10px;
top: 30px;
width: 265px;
width: 216px;
display: flex;
flex-direction: column;
@ -586,6 +586,7 @@
align-items: center;
flex-direction: row;
justify-content: space-between;
column-gap: 5px;
padding: 0px 8px;
border-radius: 8px;
height: 40px;
@ -602,6 +603,29 @@
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 {
display: flex;
align-items: center;
@ -611,27 +635,6 @@
font-size: 12px;
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;
column-gap: 15px;
border-radius: 8px;
background: #252c32;
color: white;
height: 42px;
background: white;
color: #252c32;
height: 40px;
cursor: pointer;
justify-content: center;
margin: 8px 8px 0px;
p {
font-size: 15px;