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

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

@ -645,6 +645,7 @@ export const ProjectTracker = () => {
</div> </div>
{tags.open && ( {tags.open && (
<div className="tags__list"> <div className="tags__list">
{!tags.add && !tags.edit && (
<div <div
className="add-new-tag" className="add-new-tag"
onClick={() => onClick={() =>
@ -657,25 +658,27 @@ export const ProjectTracker = () => {
<p>Добавить новый тег</p> <p>Добавить новый тег</p>
<span>+</span> <span>+</span>
</div> </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__color"
style={{ background: tag.color }}
/>
<div>
<span className="tag-item__info__name"> <span className="tag-item__info__name">
{tag.slug} {tag.slug}
</span> </span>
<span <p className="tag-item__description">
className="tag-item__info__color" {tag.title}
style={{ background: tag.color }} </p>
/> </div>
</div>
<div className="tag-item__info__images"> <div className="tag-item__images">
<img <img
src={edit} src={edit}
alt="edit" alt="edit"
@ -700,30 +703,12 @@ export const ProjectTracker = () => {
/> />
</div> </div>
</div> </div>
</div>
); );
})} })}
</div> </div>
)} )}
{(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);

40
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,16 +603,6 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&__info {
display: flex;
align-items: center;
column-gap: 10px;
&__name {
font-size: 12px;
font-weight: 600;
}
&__color { &__color {
width: 22.25px; width: 22.25px;
height: 23.217px; height: 23.217px;
@ -621,17 +612,29 @@
&__images { &__images {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
row-gap: 6px; row-gap: 3px;
img { img {
height: 14px;
width: 14px;
cursor: pointer; cursor: pointer;
} }
.delete { .delete {
width: 14px; width: 16px;
height: 14px; height: 16px;
} }
} }
&__info {
display: flex;
align-items: center;
column-gap: 10px;
&__name {
font-size: 12px;
font-weight: 600;
}
} }
} }
} }
@ -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;