Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves event drag and drop highlighting

Browse source 
Enhances the visual feedback during and after event drag and drop operations in the calendar.

- Preserves the full opacity of the dragged event clone during the drag operation for better visibility.
- Applies a highlight class to the event after it's dropped to visually indicate the new location.
- Adds specific styling for the highlighted state based on event type.
This commit is contained in:
Janus C. H. Knudsen 2025-10-09 22:31:49 +02:00
parent 5d406201b8
commit 6f79954342
4 changed files with 68 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/elements/SwpEventElement.ts
View file

@ -354,6 +354,9 @@ export class SwpAllDayEventElement extends BaseSwpEventElement {
// Disable pointer events on clone so it doesn't interfere with hover detection
clone.style.pointerEvents = 'none';
// Preserve full opacity during drag
clone.style.opacity = '1';
return clone;
}

3
src/managers/AllDayManager.ts
View file

@ -490,6 +490,9 @@ export class AllDayManager {
dragEndEvent.draggedClone.style.cursor = '';
dragEndEvent.draggedClone.style.opacity = '';
// 7. Apply highlight class to show the dropped event with highlight color
dragEndEvent.draggedClone.classList.add('highlight');
this.fadeOutAndRemove(dragEndEvent.originalElement);
this.checkAndAnimateAllDayHeight();

3
src/renderers/AllDayEventRenderer.ts
View file

@ -79,6 +79,9 @@ export class AllDayEventRenderer {
const dayEvent = SwpAllDayEventElement.fromCalendarEvent(event);
dayEvent.applyGridPositioning(layout.row, layout.startColumn, layout.endColumn);
// Apply highlight class to show events with highlight color
dayEvent.classList.add('highlight');
container.appendChild(dayEvent);
}

62
wwwroot/css/calendar-layout-css.css
View file

@ -361,11 +361,67 @@ swp-allday-container swp-allday-event {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-left: 3px solid rgba(0, 0, 0, 0.2);
&.dragging {
background: lab(70.24% -13.38 -46.17);
/* Event type colors - normal state */
&[data-type="meeting"] {
background: var(--color-event-meeting);
color: var(--color-text);
}
&[data-type="meal"] {
background: var(--color-event-meal);
color: var(--color-text);
}
&[data-type="work"] {
background: var(--color-event-work);
color: var(--color-text);
}
&[data-type="milestone"] {
background: var(--color-event-milestone);
color: var(--color-text);
}
&[data-type="personal"] {
background: var(--color-event-personal);
color: var(--color-text);
}
&[data-type="deadline"] {
background: var(--color-event-milestone);
color: var(--color-text);
}
/* Dragging state - keep full opacity */
&.dragging {
opacity: 1;
}
}
/* Event type colors - highlight state (after drop) */
swp-allday-container swp-allday-event.highlight[data-type="meeting"] {
background: var(--color-event-meeting-hl) !important;
}
swp-allday-container swp-allday-event.highlight[data-type="meal"] {
background: var(--color-event-meal-hl) !important;
}
swp-allday-container swp-allday-event.highlight[data-type="work"] {
background: var(--color-event-work-hl) !important;
}
swp-allday-container swp-allday-event.highlight[data-type="milestone"] {
background: var(--color-event-milestone-hl) !important;
}
swp-allday-container swp-allday-event.highlight[data-type="personal"] {
background: var(--color-event-personal-hl) !important;
}
swp-allday-container swp-allday-event.highlight[data-type="deadline"] {
background: var(--color-event-milestone-hl) !important;
}
/* Overflow indicator styling */