apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed list tags

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -414,6 +414,11 @@ export const ProjectTracker = () => {
add: false,
edit: false,
});
setTagInfo({
description: "",
name: "",
});
setColor("#aabbcc");
}
if (
@ -703,23 +708,19 @@ export const ProjectTracker = () => {
</div>
{tags.open && (
<div className="tags__list">
<img
src={close}
className="close"
alt="close"
onClick={() => {
setTags({
open: false,
add: false,
edit: false,
});
setTagInfo({
description: "",
name: "",
});
setColor("#aabbcc");
}}
/>
<div
className="addNewTag"
onClick={() =>
setTags((prevState) => ({
...prevState,
add: true,
}))
}
>
<p>Добавить новый тег</p>
<span>+</span>
</div>
{!tags.add && !tags.edit && (
<div className="tags__list__created">
{projectBoard.mark.map((tag) => {
@ -736,8 +737,8 @@ export const ProjectTracker = () => {
className="tagItem__info__color"
style={{ background: tag.color }}
/>
</div>
<div className="tagItem__images">
<div className="tagItem__info__images">
<img
src={edit}
alt="edit"
@ -762,20 +763,9 @@ export const ProjectTracker = () => {
/>
</div>
</div>
</div>
);
})}
<div
className="addNewTag"
onClick={() =>
setTags((prevState) => ({
...prevState,
add: true,
}))
}
>
<p>Добавить новый тег</p>
<span>+</span>
</div>
</div>
)}
{(tags.add || tags.edit) && (

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

@ -786,12 +786,13 @@
}
&__list {
position: absolute;
background: #f8f9fa;
border-radius: 2px;
background: #d9d9d9;
z-index: 8;
border-radius: 8px;
padding: 20px 10px 10px;
// padding: 0 8px 10px;
top: 30px;
width: 220px;
width: 265px;
display: flex;
flex-direction: column;
@ -809,17 +810,27 @@
flex-direction: column;
row-gap: 8px;
margin-top: 8px;
padding: 0 8px 8px;
.tagItem {
position: relative;
display: flex;
flex-direction: column;
padding: 5px;
border: 1px solid #e3e2e2;
align-items: center;
flex-direction: row;
justify-content: space-between;
padding: 0px 8px;
border-radius: 8px;
height: 50px;
max-height: 50px;
background: #fff;
&__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 {
@ -828,24 +839,20 @@
column-gap: 10px;
&__name {
font-size: 16px;
font-size: 12px;
font-weight: 600;
}
&__color {
border: 1px solid #e3e2e2;
width: 20px;
height: 20px;
border-radius: 50px;
}
width: 22.25px;
height: 23.217px;
border-radius: 8px;
}
&__images {
position: absolute;
right: 5px;
top: 3px;
display: flex;
column-gap: 3px;
flex-direction: column-reverse;
row-gap: 6px;
img {
cursor: pointer;
@ -858,21 +865,26 @@
}
}
}
}
.addNewTag {
display: flex;
align-items: center;
column-gap: 8px;
column-gap: 15px;
border-radius: 8px;
background: #252c32;
color: white;
height: 42px;
cursor: pointer;
justify-content: center;
p {
font-size: 13px;
font-size: 15px;
}
span {
width: 16px;
height: 16px;
width: 19px;
height: 19px;
border-radius: 50px;
align-items: center;
justify-content: center;
@ -887,8 +899,9 @@
.formTag {
display: flex;
flex-direction: column;
padding-top: 8px;
padding: 8px;
row-gap: 8px;
.arrow {
position: absolute;
cursor: pointer;
@ -909,11 +922,12 @@
&__btn {
outline: none;
border: none;
background: #6f6f6f;
background: #252c32;
color: whitesmoke;
margin: 0 auto;
margin: 10px auto 0;
border-radius: 10px;
font-size: 15px;
padding: 5px 12px;
}
.disable {