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

Improves event resizing with smooth animation

Browse source 
Replaces the previous rough event resizing implementation with a smooth, animated approach.

Uses pointer events for accurate tracking and adds a visual resize handle
for better user interaction.
Also refactors drag and drop to exclude resize handle.
This commit is contained in:
Janus C. H. Knudsen 2025-10-08 21:43:02 +02:00
parent ce0a9b19eb
commit 1e5b3166b2
4 changed files with 420 additions and 230 deletions
Download patch file Download diff file Expand all files Collapse all files

72
wwwroot/css/calendar-events-css.css
View file

@ -92,45 +92,39 @@ swp-day-columns swp-event:hover {
z-index: 20;
}
/* Resize handle indicator - created by JavaScript */
swp-resize-indicator {
/* Resize handle - actual draggable element */
swp-resize-handle {
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 8px;
/* background set by JavaScript based on event color */
border-radius: 4px;
z-index: 30;
bottom: 0;
left: 0;
right: 0;
height: 15px;
cursor: ns-resize;
z-index: 25;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
animation: fadeIn 0.2s ease forwards;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.3);
transition: opacity 150ms ease;
}
/* Grip lines on handle */
swp-resize-indicator::before {
/* Show handle on hover */
swp-day-columns swp-event:hover swp-resize-handle,
swp-day-columns swp-event[data-resize-hover="true"] swp-resize-handle {
opacity: 1;
}
/* Handle visual indicator (grip lines) */
swp-resize-handle::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 2px;
background: rgba(255, 255, 255, 0.8);
border-radius: 1px;
box-shadow: 0 -2px 0 rgba(255, 255, 255, 0.8),
0 2px 0 rgba(255, 255, 255, 0.8);
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
width: 30px;
height: 4px;
background: rgba(255, 255, 255, 0.9);
border-radius: 2px;
box-shadow:
0 -2px 0 rgba(255, 255, 255, 0.9),
0 2px 0 rgba(255, 255, 255, 0.9),
0 0 4px rgba(0, 0, 0, 0.2);
}
swp-day-columns swp-event[data-resize-hover="true"] {
@ -138,6 +132,16 @@ swp-day-columns swp-event[data-resize-hover="true"] {
overflow: visible;
}
/* Global resizing state */
.swp--resizing {
user-select: none !important;
cursor: ns-resize !important;
}
.swp--resizing * {
cursor: ns-resize !important;
}
swp-day-columns swp-event-time {
display: block;
font-size: 0.875rem;