feat(project): 타임라인 드래그 이동/기간조절 + 아사나 느낌 상호작용
- 막대 몸통 드래그로 일정 통째 이동, 양 끝 드래그로 시작/마감일만 조절
(vis-timeline editable.updateTime + onMove, PUT /api/tasks/{id} 로 저장,
실패 시 vis 표시만 원래 자리로 롤백 — 전체 재렌더 없이).
- 단일 클릭은 선택만(끝 손잡이가 나타나게) 하도록 바꾸고, 편집 열기는
더블클릭 또는 우클릭 메뉴의 "열기"로 옮김 — 기존엔 클릭 한 번에 모달이
떠서 손잡이가 나타나자마자 가려져 드래그를 할 수 없던 문제.
- 마우스 오버 시 그 업무의 날짜 구간을 전체 높이 배경 밴드로 강조(아사나
타임라인에서 막대에 올리면 헤더 날짜가 진해지는 것과 같은 목적).
- 막대를 둥근 알약형으로, 호버 시 살짝 뜨는 그림자 추가. "오늘" 버튼으로
현재 날짜로 바로 이동.
- 실제 드래그(핸들 좌표 기준)로 헤드리스 크롬에서 검증 — 기간 연장/이동
둘 다 서버에 정확히 저장되는 것까지 확인.
This commit is contained in:
@@ -423,7 +423,25 @@
|
||||
.pj-bar-ghost { position: fixed; z-index: 2000; pointer-events: none; padding: 2px 10px; border-radius: 6px; background: #1e1f21; color: #fff; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.3); white-space: nowrap; }
|
||||
|
||||
/* ── 타임라인 컨테이너 ── */
|
||||
.pj-tl-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
|
||||
#pj-timeline { background: #fff; border-radius: 12px; padding: 6px; }
|
||||
/* 아사나 느낌의 둥근 알약형 막대 + 살짝 뜨는 호버. vis 기본 각진 스타일 위에 덮어씀. */
|
||||
#pj-timeline .vis-item.vis-range {
|
||||
border-radius: 10px !important; border: none !important;
|
||||
box-shadow: 0 1px 2px rgba(16,24,40,.12); transition: box-shadow .15s, transform .15s;
|
||||
}
|
||||
#pj-timeline .vis-item.vis-point .vis-item-content { border-radius: 10px; }
|
||||
#pj-timeline .vis-item:hover { box-shadow: 0 3px 10px rgba(16,24,40,.22); transform: translateY(-1px); cursor: grab; }
|
||||
#pj-timeline .vis-item.vis-dragging { cursor: grabbing; }
|
||||
#pj-timeline .vis-item .vis-item-content { padding: 4px 10px; font-size: 12.5px; font-weight: 600; }
|
||||
/* 드래그로 끄는 양 끝 손잡이 — 기본보다 조금 더 잘 보이게 */
|
||||
#pj-timeline .vis-item .vis-drag-left, #pj-timeline .vis-item .vis-drag-right {
|
||||
width: 10px; cursor: ew-resize;
|
||||
}
|
||||
/* 마우스 오버 시 그 업무 날짜 구간을 전체 높이로 살짝 강조(헤더 날짜 위치를
|
||||
눈으로 바로 짚을 수 있게) — pointer-events 는 vis 배경 아이템 기본값(none)
|
||||
그대로라 밑에 깔린 막대의 호버 감지를 방해하지 않는다. */
|
||||
#pj-timeline .pj-tl-hover-band { background: var(--pj-accent-tint) !important; opacity: .8; }
|
||||
|
||||
/* ── 모달 ── */
|
||||
.pj-modal { position: fixed; inset: 0; background: rgba(20,22,26,.46); display: flex; align-items: center; justify-content: center; z-index: 1000; }
|
||||
|
||||
Reference in New Issue
Block a user