Fixed list tags
This commit is contained in:
MaxOvs19
parent
652918cd0a
commit
6bb948befb
@ -414,6 +414,11 @@ export const ProjectTracker = () => {
|
|||||||
add: false,
|
add: false,
|
||||||
edit: false,
|
edit: false,
|
||||||
});
|
});
|
||||||
|
setTagInfo({
|
||||||
|
description: "",
|
||||||
|
name: "",
|
||||||
|
});
|
||||||
|
setColor("#aabbcc");
|
||||||
}
|
}
|
||||||
|
|
||||||
if (
|
if (
|
||||||
@ -703,23 +708,19 @@ export const ProjectTracker = () => {
|
|||||||
</div>
|
</div>
|
||||||
{tags.open && (
|
{tags.open && (
|
||||||
<div className="tags__list">
|
<div className="tags__list">
|
||||||
<img
|
<div
|
||||||
src={close}
|
className="addNewTag"
|
||||||
className="close"
|
onClick={() =>
|
||||||
alt="close"
|
setTags((prevState) => ({
|
||||||
onClick={() => {
|
...prevState,
|
||||||
setTags({
|
add: true,
|
||||||
open: false,
|
}))
|
||||||
add: false,
|
}
|
||||||
edit: false,
|
>
|
||||||
});
|
<p>Добавить новый тег</p>
|
||||||
setTagInfo({
|
<span>+</span>
|
||||||
description: "",
|
</div>
|
||||||
name: "",
|
|
||||||
});
|
|
||||||
setColor("#aabbcc");
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{!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) => {
|
||||||
@ -736,46 +737,35 @@ export const ProjectTracker = () => {
|
|||||||
className="tagItem__info__color"
|
className="tagItem__info__color"
|
||||||
style={{ background: tag.color }}
|
style={{ background: tag.color }}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
<div className="tagItem__images">
|
<div className="tagItem__info__images">
|
||||||
<img
|
<img
|
||||||
src={edit}
|
src={edit}
|
||||||
alt="edit"
|
alt="edit"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setTags((prevState) => ({
|
setTags((prevState) => ({
|
||||||
...prevState,
|
...prevState,
|
||||||
edit: true,
|
edit: true,
|
||||||
}));
|
}));
|
||||||
setTagInfo({
|
setTagInfo({
|
||||||
description: tag.title,
|
description: tag.title,
|
||||||
name: tag.slug,
|
name: tag.slug,
|
||||||
editMarkId: tag.id,
|
editMarkId: tag.id,
|
||||||
});
|
});
|
||||||
setColor(tag.color);
|
setColor(tag.color);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
onClick={() => deleteTag(tag.id)}
|
onClick={() => deleteTag(tag.id)}
|
||||||
className="delete"
|
className="delete"
|
||||||
src={close}
|
src={close}
|
||||||
alt="delete"
|
alt="delete"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
<div
|
|
||||||
className="addNewTag"
|
|
||||||
onClick={() =>
|
|
||||||
setTags((prevState) => ({
|
|
||||||
...prevState,
|
|
||||||
add: true,
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<p>Добавить новый тег</p>
|
|
||||||
<span>+</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{(tags.add || tags.edit) && (
|
{(tags.add || tags.edit) && (
|
||||||
|
|||||||
@ -786,12 +786,13 @@
|
|||||||
}
|
}
|
||||||
&__list {
|
&__list {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #f8f9fa;
|
border-radius: 2px;
|
||||||
|
background: #d9d9d9;
|
||||||
z-index: 8;
|
z-index: 8;
|
||||||
border-radius: 8px;
|
|
||||||
padding: 20px 10px 10px;
|
// padding: 0 8px 10px;
|
||||||
top: 30px;
|
top: 30px;
|
||||||
width: 220px;
|
width: 265px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
@ -809,17 +810,27 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
row-gap: 8px;
|
row-gap: 8px;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
|
padding: 0 8px 8px;
|
||||||
|
|
||||||
.tagItem {
|
.tagItem {
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
padding: 5px;
|
flex-direction: row;
|
||||||
border: 1px solid #e3e2e2;
|
justify-content: space-between;
|
||||||
|
padding: 0px 8px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
height: 50px;
|
||||||
|
max-height: 50px;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
&__description {
|
&__description {
|
||||||
font-size: 14px;
|
font-size: 12px;
|
||||||
|
word-break: break-word;
|
||||||
|
max-width: 115px;
|
||||||
|
max-height: 40px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-wrap: wrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__info {
|
&__info {
|
||||||
@ -828,32 +839,29 @@
|
|||||||
column-gap: 10px;
|
column-gap: 10px;
|
||||||
|
|
||||||
&__name {
|
&__name {
|
||||||
font-size: 16px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__color {
|
&__color {
|
||||||
border: 1px solid #e3e2e2;
|
width: 22.25px;
|
||||||
width: 20px;
|
height: 23.217px;
|
||||||
height: 20px;
|
border-radius: 8px;
|
||||||
border-radius: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__images {
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 3px;
|
|
||||||
display: flex;
|
|
||||||
column-gap: 3px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.delete {
|
&__images {
|
||||||
width: 14px;
|
display: flex;
|
||||||
height: 14px;
|
flex-direction: column-reverse;
|
||||||
|
row-gap: 6px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -862,17 +870,21 @@
|
|||||||
.addNewTag {
|
.addNewTag {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
column-gap: 8px;
|
column-gap: 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #252c32;
|
||||||
|
color: white;
|
||||||
|
height: 42px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 13px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
width: 16px;
|
width: 19px;
|
||||||
height: 16px;
|
height: 19px;
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -887,8 +899,9 @@
|
|||||||
.formTag {
|
.formTag {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding-top: 8px;
|
padding: 8px;
|
||||||
row-gap: 8px;
|
row-gap: 8px;
|
||||||
|
|
||||||
.arrow {
|
.arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -909,11 +922,12 @@
|
|||||||
&__btn {
|
&__btn {
|
||||||
outline: none;
|
outline: none;
|
||||||
border: none;
|
border: none;
|
||||||
background: #6f6f6f;
|
background: #252c32;
|
||||||
color: whitesmoke;
|
color: whitesmoke;
|
||||||
margin: 0 auto;
|
margin: 10px auto 0;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
padding: 5px 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.disable {
|
.disable {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user