ccfc1a99b2
Enhances event resizing functionality with smoother animation and more robust handling Removes complex resize zone tracking in favor of simplified resize mechanism Improves performance and simplifies event resize interactions Cleans up unnecessary complexity in pointer and animation management
301 lines
6.3 KiB
CSS
301 lines
6.3 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 {
|
|
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);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Shadow for stacked events (level 1+) */
|
|
swp-event[data-stack-link]:not([data-stack-link*='"stackLevel":0']),
|
|
swp-event-group[data-stack-link]:not([data-stack-link*='"stackLevel":0']) swp-event {
|
|
box-shadow:
|
|
0 -1px 2px rgba(0, 0, 0, 0.1),
|
|
0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* 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;
|
|
}
|