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

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 */