feat(project): 세션 헤더 색상 채우기, 보드 댓글팝업, 채팅 첨부파일/이미지
- 세션 색상: 점 대신 세션 헤더 윗부분 배경을 통째로 칠함(글자/카운트 흰색으로) - 보드 업무 카드의 댓글 말풍선도 더블클릭하면 채팅 팝업 열리게(.pj-cmt-badge 공용) - 댓글 채팅 팝업에 파일/이미지 첨부 추가: 클립 버튼 업로드 + 클립보드 이미지 붙여넣기, 이미지는 썸네일, 파일은 확장자 아이콘+파일명으로 표시, 다운로드 가능, 업로드한 사람만 삭제(즉시 반영). task_attachments.comment_id(마이그 레이션 005)로 태깅해 업무 "첨부파일" 패널에도 그대로 함께 나온다. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
+53
-1
@@ -315,9 +315,18 @@
|
||||
padding: 2px 6px 12px; margin-bottom: 4px; color: var(--pj-ink);
|
||||
border-bottom: 1px solid #e2e4ea;
|
||||
}
|
||||
.pj-col-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
|
||||
/* 세션 제목 — 업무 카드 제목(pj-card-title 13.5px/600)보다 뚜렷하게 크고 굵게 */
|
||||
.pj-col-name { font-size: 15.5px; font-weight: 800; }
|
||||
/* 세션 색상 지정 시 — 점 대신 헤더(윗부분) 전체를 그 색으로 칠한다.
|
||||
.pj-col 의 padding(12px)만큼 밀어내 컬럼 테두리에 딱 맞춘다. */
|
||||
.pj-col-head.pj-col-head-colored {
|
||||
margin: -12px -12px 4px; padding: 10px 14px; border-bottom: none;
|
||||
border-radius: 13px 13px 0 0;
|
||||
}
|
||||
.pj-col-head.pj-col-head-colored .pj-col-name { color: #fff; }
|
||||
.pj-col-head.pj-col-head-colored .pj-col-count { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); color: #fff; }
|
||||
.pj-col-head.pj-col-head-colored .pj-col-ctrls .pj-icon-btn { color: #fff; }
|
||||
.pj-col-head.pj-col-head-colored .pj-chip { background: rgba(255,255,255,.28); color: #fff; }
|
||||
.pj-col-count {
|
||||
margin-left: auto; color: var(--pj-ink-soft); font-weight: 700; font-size: 11px;
|
||||
background: #fff; border: 1px solid #e2e4ea; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px;
|
||||
@@ -664,6 +673,49 @@
|
||||
.pj-chat-del .material-symbols-outlined { font-size: 13px; }
|
||||
.pj-chat-del:hover { color: #c22b10; background: #fbecea; }
|
||||
|
||||
/* ── 채팅 첨부(이미지/파일) — 말풍선 아래 붙는다 ── */
|
||||
.pj-chat-atts { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; max-width: 100%; }
|
||||
.pj-chat-msg.mine .pj-chat-atts { align-items: flex-end; }
|
||||
.pj-chat-att { position: relative; display: inline-flex; }
|
||||
.pj-chat-att-img img {
|
||||
max-width: 220px; max-height: 220px; border-radius: 12px; display: block;
|
||||
object-fit: cover; box-shadow: 0 1px 2px rgba(0,0,0,.08);
|
||||
}
|
||||
.pj-chat-att-file {
|
||||
display: inline-flex; align-items: center; gap: 4px; background: #fff;
|
||||
border: 1px solid var(--pj-border); border-radius: 10px; padding: 2px 4px 2px 2px;
|
||||
}
|
||||
.pj-chat-att-file a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; color: var(--pj-ink); text-decoration: none; font-size: 12.5px; }
|
||||
.pj-chat-att-file a:hover { text-decoration: underline; }
|
||||
.pj-chat-att-icon { font-size: 16px; line-height: 1; }
|
||||
.pj-chat-att-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.pj-chat-att-del {
|
||||
width: 18px; height: 18px; flex: 0 0 auto; display: inline-flex; align-items: center;
|
||||
justify-content: center; border-radius: 50%; color: #9aa1a9;
|
||||
}
|
||||
.pj-chat-att-del .material-symbols-outlined { font-size: 13px; }
|
||||
.pj-chat-att-del:hover { color: #c22b10; background: #fbecea; }
|
||||
.pj-chat-att-img .pj-chat-att-del {
|
||||
position: absolute; top: 4px; right: 4px; background: rgba(20,22,26,.55); color: #fff;
|
||||
}
|
||||
.pj-chat-att-img .pj-chat-att-del:hover { background: rgba(194,43,16,.85); }
|
||||
|
||||
/* ── 보내기 전 대기 파일 칩 ── */
|
||||
.pj-chat-pending { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 8px; flex: 0 0 auto; }
|
||||
.pj-chat-pending-chip {
|
||||
display: inline-flex; align-items: center; gap: 5px; background: #eef0f2;
|
||||
border-radius: 8px; padding: 4px 8px; font-size: 11.5px; color: #333;
|
||||
}
|
||||
.pj-chat-pending-chip button { border: none; background: none; cursor: pointer; color: #6b7280; font-size: 13px; line-height: 1; padding: 0; }
|
||||
.pj-chat-pending-chip button:hover { color: #c22b10; }
|
||||
|
||||
/* ── 첨부 버튼(클립) ── */
|
||||
.pj-chat-attach-btn {
|
||||
display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
|
||||
border-radius: 8px; cursor: pointer; color: #5f6368; flex: 0 0 auto;
|
||||
}
|
||||
.pj-chat-attach-btn:hover { background: #f1f2f4; }
|
||||
|
||||
/* ── 보드 단계 컨트롤 ── */
|
||||
.pj-col-head { position: relative; }
|
||||
.pj-col-name { font-weight: 700; }
|
||||
|
||||
Reference in New Issue
Block a user