refactor(timeline): fixed ux for creating time blocks over existing ones on the timeline

This commit is contained in:
Matej Glasnák committed 2026-01-14 04:02:31 +01:00
1 parent 46f578feb9
commit f3b4c0a862
1 file changed
+11 -23
@@ -17,10 +17,7 @@
:hour-width="hourWidth"
/>
<div
ref="timelineBar"
class="timeline-bar"
>
<div ref="timelineBar" class="timeline-bar">
<!-- Non-working hours - before work -->
<div
class="non-working-hours"
@@ -431,14 +428,13 @@ const handleMouseMove = (event: MouseEvent) => {
// Update cursor style based on work hours
if (timelineScroll.value) {
timelineScroll.value.style.cursor = isInWorkHours ? 'crosshair' : 'not-allowed';
timelineScroll.value.style.cursor = isInWorkHours
? 'crosshair'
: 'not-allowed';
}
// Don't show preview if over existing block (using relative position)
if (isOverExistingBlock(x)) {
showPreview.value = false;
return;
}
// Allow preview to show even over existing blocks
// This allows creating conflicting timeblocks
// Convert to time and snap
const snappedStart = snappedTime;
@@ -493,24 +489,16 @@ const handleTimelineMouseDown = (event: MouseEvent) => {
// Get the target element
const target = event.target as HTMLElement;
// Don't interfere with resize handles on current timeblock
// Only allow resize handles to work - don't interfere with them
if (target.classList.contains('resize-handle')) {
return;
}
// Check if clicking on current timeblock (allow resize handles to work)
if (target.closest('.current-timeblock')) {
return;
}
// Allow clicking anywhere else, including over the current timeblock,
// to create/redraw the block at the cursor position
const rect = timelineScroll.value.getBoundingClientRect();
const scrollLeft = timelineScroll.value.scrollLeft;
const x = event.clientX - rect.left + scrollLeft;
// Don't start creating if over existing block
if (isOverExistingBlock(x)) {
return;
}
// Allow creating blocks even over existing blocks (scheduled or other timeblocks)
// This enables creating conflicting timeblocks
// Check if cursor is in work hours (cursor line must be visible)
if (!showCursor.value || !showPreview.value || !previewBlock.value) {