Enhances the event drag and drop functionality by setting the initial position of the dragged event to prevent it from jumping to the top of the column. Also adjust event transition for a smoother user experience. Removes unused resize logic.
299 lines
6.2 KiB
CSS
299 lines
6.2 KiB
CSS
/* styles/components/events.css */
|
|
|
|
/* Event base styles */
|
|
swp-day-columns swp-event {
|
|
position: absolute;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: background-color 200ms ease, box-shadow 150ms ease, transform 150ms ease;
|
|
z-index: 10;
|
|
left: 2px;
|
|
right: 2px;
|
|
color: var(--color-text);
|
|
font-size: 12px;
|
|
padding: 2px 4px;
|
|
|
|
/* Event types */
|
|
&[data-type="meeting"] {
|
|
background: var(--color-event-meeting);
|
|
border-left: 4px solid var(--color-event-meeting-border);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
&[data-type="meal"] {
|
|
background: var(--color-event-meal);
|
|
border-left: 4px solid var(--color-event-meal-border);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
&[data-type="work"] {
|
|
background: var(--color-event-work);
|
|
border-left: 4px solid var(--color-event-work-border);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
&[data-type="milestone"] {
|
|
background: var(--color-event-milestone);
|
|
border-left: 4px solid var(--color-event-milestone-border);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
&[data-type="personal"] {
|
|
background: var(--color-event-personal);
|
|
border-left: 4px solid var(--color-event-personal-border);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
&[data-type="deadline"] {
|
|
background: var(--color-event-milestone);
|
|
border-left: 4px solid var(--color-event-milestone-border);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* Dragging state */
|
|
&.dragging {
|
|
position: absolute;
|
|
z-index: 999999;
|
|
opacity: 0.8;
|
|
left: 2px;
|
|
right: 2px;
|
|
width: auto;
|
|
}
|
|
|
|
/* Hover state - highlight colors */
|
|
&.hover[data-type="meeting"] {
|
|
background: var(--color-event-meeting-hl);
|
|
}
|
|
|
|
&.hover[data-type="meal"] {
|
|
background: var(--color-event-meal-hl);
|
|
}
|
|
|
|
&.hover[data-type="work"] {
|
|
background: var(--color-event-work-hl);
|
|
}
|
|
|
|
&.hover[data-type="milestone"] {
|
|
background: var(--color-event-milestone-hl);
|
|
}
|
|
|
|
&.hover[data-type="personal"] {
|
|
background: var(--color-event-personal-hl);
|
|
}
|
|
|
|
&.hover[data-type="deadline"] {
|
|
background: var(--color-event-milestone-hl);
|
|
}
|
|
|
|
}
|
|
|
|
swp-day-columns swp-event:hover {
|
|
z-index: 20;
|
|
}
|
|
|
|
/* Resize handle - actual draggable element */
|
|
swp-resize-handle {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 15px;
|
|
cursor: ns-resize;
|
|
z-index: 25;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity 150ms ease;
|
|
}
|
|
|
|
/* 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: '';
|
|
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"] {
|
|
cursor: ns-resize;
|
|
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;
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
swp-day-columns swp-event-title {
|
|
display: block;
|
|
font-size: 0.875rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* Multi-day events */
|
|
swp-multi-day-event {
|
|
position: relative;
|
|
height: 28px;
|
|
margin: 2px 4px;
|
|
padding: 0 8px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
/* Event type colors */
|
|
&[data-type="milestone"] {
|
|
background: var(--color-event-milestone);
|
|
color: var(--color-event-milestone-border);
|
|
}
|
|
|
|
/* Continuation indicators */
|
|
&[data-continues-before="true"] {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: 0;
|
|
padding-left: 20px;
|
|
|
|
&::before {
|
|
content: '◀';
|
|
position: absolute;
|
|
left: 4px;
|
|
opacity: 0.6;
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
&[data-continues-after="true"] {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
margin-right: 0;
|
|
padding-right: 20px;
|
|
|
|
&::after {
|
|
content: '▶';
|
|
position: absolute;
|
|
right: 4px;
|
|
opacity: 0.6;
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
}
|
|
|
|
/* Event creation preview */
|
|
swp-event-preview {
|
|
position: absolute;
|
|
left: 8px;
|
|
right: 8px;
|
|
background: rgba(33, 150, 243, 0.1);
|
|
border: 2px dashed var(--color-primary);
|
|
border-radius: 4px;
|
|
|
|
/* Position via CSS variables */
|
|
top: calc(var(--preview-start) * var(--minute-height));
|
|
height: calc(var(--preview-duration) * var(--minute-height));
|
|
}
|
|
|
|
/* Event filtering styles */
|
|
/* When filter is active, all events are dimmed by default */
|
|
swp-events-layer[data-filter-active="true"] swp-event {
|
|
opacity: 0.2;
|
|
transition: opacity 200ms ease;
|
|
}
|
|
|
|
/* Events that match the filter stay normal */
|
|
swp-events-layer[data-filter-active="true"] swp-event[data-matches="true"] {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Event overlap styling */
|
|
/* Event group container for column sharing */
|
|
swp-event-group {
|
|
position: absolute;
|
|
display: grid;
|
|
gap: 2px;
|
|
left: 2px;
|
|
right: 2px;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Grid column configurations */
|
|
swp-event-group.cols-2 {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
swp-event-group.cols-3 {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
|
|
swp-event-group.cols-4 {
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
}
|
|
|
|
/* Stack levels using margin-left */
|
|
swp-event-group.stack-level-0 {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
swp-event-group.stack-level-1 {
|
|
margin-left: 15px;
|
|
}
|
|
|
|
swp-event-group.stack-level-2 {
|
|
margin-left: 30px;
|
|
}
|
|
|
|
swp-event-group.stack-level-3 {
|
|
margin-left: 45px;
|
|
}
|
|
|
|
swp-event-group.stack-level-4 {
|
|
margin-left: 60px;
|
|
}
|
|
|
|
/* Child events within grid */
|
|
swp-event-group swp-event {
|
|
position: relative;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
/* All-day event transition for smooth repositioning */
|
|
swp-allday-container swp-event.transitioning {
|
|
transition: grid-area 200ms ease-out, grid-row 200ms ease-out, grid-column 200ms ease-out;
|
|
}
|