Исправления визуальных косяков

frontend-park-mail-ru · Dec 14, 2024 · 1c491af · 1c491af
1 parent e8a3003
commit 1c491af
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 44 deletions.
diff --git a/src/components/KanbanCard.tsx b/src/components/KanbanCard.tsx
@@ -277,6 +277,9 @@ export const KanbanCard = (props: KanbanCardProps) => {
             <div>{card.title}</div>
             <div>
               {card.deadline !== undefined && <i className="bi-clock" />}
+              {card.hasCheckList && <i class="bi-check2-square" />}
+              {card.hasAttachments && <i class="bi-paperclip" />}
+              {card.hasAssignedUsers && <i class="bi-person-plus" />}
             </div>
           </div>
         )}

diff --git a/src/components/selectBox.scss b/src/components/selectBox.scss
@@ -40,6 +40,10 @@
   padding-bottom: 3px;
   padding-right: 5px;
   padding-left: 5px;
+  transition: background 0.3s ease;
+  display: flex;
+  flex-direction: row;
+  column-gap: 5px;
 }
 .select-box__option:hover {
   background-color: #eee;

diff --git a/src/containers/CardDetails.tsx b/src/containers/CardDetails.tsx
@@ -77,7 +77,6 @@ const CheckListFieldComponent = (props: CheckListFieldProps) => {
                   if (fi.id !== f.id) {
                     return fi;
                   }
-                  console.log(cf);
                   return cf;
                 });
                 setCardDetailsStore(store);
@@ -86,11 +85,11 @@ const CheckListFieldComponent = (props: CheckListFieldProps) => {
           );
         }}
       >
-        {f.isDone && <i class="bi-check-lg checklist-field__box-check" />}
+        {f.isDone && <i class="bi-check checklist-field__box-check" />}
       </div>
       <div class="checklist-field__text">{f.title}</div>
       <div
-        style="min-width: 1rem; color: red; cursor: pointer"
+        style="min-width: 1rem; position: relative; top: 2px; color: red; cursor: pointer"
         ON_click={() => {
           deleteCheckListField(f.id).then((t) => {
             if (t) {
@@ -204,9 +203,9 @@ export const CardDetailsContainer = (props: ComponentProps) => {
     <div class="card-details">
       <div class="card-details__left-section">
         <div class="card-details_block">
-          <h2 style={cardDetails.checkList.length ? '' : 'display:none'}>
+          <h1 style={cardDetails.checkList.length ? '' : 'display:none'}>
             Чеклист
-          </h2>
+          </h1>
           {cardDetails.checkList.map((field) => {
             return (
               <CheckListFieldComponent
@@ -307,25 +306,35 @@ export const CardDetailsContainer = (props: ComponentProps) => {
           {cardDetails.comments.map((comment) => {
             return (
               <div className="comment">
-                <div className="comment__author">{comment.createdBy.name}</div>
+                <div className="comment__avatar">
+                  <img
+                    src={comment.createdBy.avatarImageUrl}
+                    class="comment__avatar-image"
+                  />
+                </div>
+                <div className="comment__content">
+                  <div className="comment__author">
+                    {comment.createdBy.name}
+                  </div>
 
-                <div>{comment.text}</div>
-                <div
-                  style="cursor: pointer; color:red"
-                  ON_click={() => {
-                    deleteComment(comment.id).then((t) => {
-                      if (t) {
-                        cardDetails.comments = cardDetails.comments.filter(
-                          (c) => {
-                            return c.id !== comment.id;
-                          }
-                        );
-                        setCardDetailsStore(cardDetails);
-                      }
-                    });
-                  }}
-                >
-                  <i class="bi-x-lg" />
+                  <div>{comment.text}</div>
+                  <div
+                    style="cursor: pointer; color: red"
+                    ON_click={() => {
+                      deleteComment(comment.id).then((t) => {
+                        if (t) {
+                          cardDetails.comments = cardDetails.comments.filter(
+                            (c) => {
+                              return c.id !== comment.id;
+                            }
+                          );
+                          setCardDetailsStore(cardDetails);
+                        }
+                      });
+                    }}
+                  >
+                    <i class="bi-x-lg" />
+                  </div>
                 </div>
               </div>
             );
@@ -336,26 +345,21 @@ export const CardDetailsContainer = (props: ComponentProps) => {
       <div class="card-details__right-section">
         <div class="card-details_block">
           <h1>Дедлайн</h1>
-          <div>
-            Пожалуйста, вводите дату и время! Если Вы не введёте время, оно не
-            сработает
-          </div>
-          <div style="cursor: pointer; color:red">
-            <DeadlineInput
-              key="deadline_input"
-              deadline={cardDetails.card.deadline}
-              cardId={cardDetails.card.id}
-            />
-          </div>
+          <DeadlineInput
+            key="deadline_input"
+            deadline={cardDetails.card.deadline}
+            cardId={cardDetails.card.id}
+          />
         </div>
         <div class="card-details_block">
           <h1>Назначенные пользователи</h1>
           {cardDetails.assignedUsers.map((u) => {
             return (
-              <div style="display: flex; flex-direction: row">
-                <div>{u.name}</div>
+              <div className="assigned-user">
+                <img class="assigned-user__avatar" src={u.avatarImageUrl} />
+                <div style="flex-grow: 1; font-weight: bold">{u.name}</div>
                 <div
-                  style="cursor: pointer; color:red"
+                  style="cursor: pointer; color: red; height: 16px"
                   ON_click={() => {
                     deassignUser(cardDetails.card.id, u.id).then((t) => {
                       if (t) {
@@ -368,7 +372,7 @@ export const CardDetailsContainer = (props: ComponentProps) => {
                     });
                   }}
                 >
-                  <i class="bi-x-lg" />
+                  <i class="bi-x-lg assigned-user__remove" />
                 </div>
               </div>
             );
@@ -433,8 +437,10 @@ export const CardDetailsContainer = (props: ComponentProps) => {
         <div>
           {cardDetails.attachments.map((attachment) => {
             return (
-              <div>
-                <i class={getFileIcon(attachment.originalName)} />
+              <div class="attachment">
+                <div>
+                  <i class={getFileIcon(attachment.originalName)} />
+                </div>
                 {attachment.originalName}
               </div>
             );

diff --git a/src/containers/cardDetails.scss b/src/containers/cardDetails.scss
@@ -32,7 +32,16 @@
   flex-direction: row;
   align-items: center;
   column-gap: 5px;
+  transition: background 0.3s ease;
+  border-radius: 3px;
+  padding-left: 5px;
+  padding-right: 3px;
+}
+
+.checklist-field:hover {
+  background-color: rgba(0, 0, 0, 0.1);
 }
+
 .checklist-field__text {
   flex-grow: 1;
 }
@@ -54,18 +63,73 @@
 .checklist-field__box-check {
   color: white;
   position: relative;
-  top: -3px;
-  left: -1px;
+  top: -2px;
+  left: 0;
 }
 
 .comment {
+  display: flex;
+  flex-direction: row;
+  column-gap: 5px;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+.comment__content {
   padding: 10px;
   background-color: #eee;
   border-radius: 10px;
   border: solid 1px black;
-  margin-bottom: 10px;
-  margin-top: 10px;
+  flex-grow: 1;
 }
+
+.comment__avatar-image {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
 .comment__author {
   font-weight: bold;
 }
+
+.assigned-user {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  column-gap: 10px;
+  transition: background 0.3s ease;
+  border-radius: 3px;
+}
+
+.assigned-user:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.assigned-user__avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.assigned-user:hover .assigned-user__remove {
+  opacity: 1;
+}
+
+.assigned-user .assigned-user__remove {
+  opacity: 0;
+}
+
+.attachment {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  column-gap: 3px;
+}