Fixed list tags

This commit is contained in:
MaxOvs19 2023-11-24 17:24:43 +03:00
parent 652918cd0a
commit 6bb948befb
2 changed files with 93 additions and 89 deletions

View File

@ -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,8 +737,8 @@ 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"
@ -762,20 +763,9 @@ export const ProjectTracker = () => {
/> />
</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) && (

View File

@ -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,24 +839,20 @@
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 { &__images {
position: absolute;
right: 5px;
top: 3px;
display: flex; display: flex;
column-gap: 3px; flex-direction: column-reverse;
row-gap: 6px;
img { img {
cursor: pointer; cursor: pointer;
@ -858,21 +865,26 @@
} }
} }
} }
}
.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 {