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

Adds header drawer and event drag interactions

Browse source 
Introduces HeaderDrawerRenderer and HeaderDrawerLayoutEngine to support dragging events into an all-day header drawer

Enables dynamic event placement and conversion between timed and all-day events through new drag interactions
Implements flexible layout calculation for header items with column and row management

Extends DragDropManager to handle header zone interactions
Adds new event types for header drag events
This commit is contained in:
Janus C. H. Knudsen 2025-12-10 23:11:11 +01:00
parent 026d83eb32
commit 6723658fd9
11 changed files with 850 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

35
wwwroot/css/v2/calendar-v2-events.css
View file

@ -346,3 +346,38 @@ swp-allday-container swp-event.transitioning {
.is-amber { --b-primary: var(--b-color-amber); }
.is-orange { --b-primary: var(--b-color-orange); }
.is-deep-orange { --b-primary: var(--b-color-deep-orange); }
/* Header drawer items */
swp-header-item {
--b-text: var(--color-text);
/* Positioneres via style.gridArea */
height: 22px;
margin: 2px 4px;
padding: 2px 8px;
border-radius: 3px;
font-size: 0.75rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
transition: background-color 200ms ease;
/* Color system fra swp-event */
background-color: color-mix(in srgb, var(--b-primary) 10%, var(--b-mix));
color: var(--b-text);
border-left: 4px solid var(--b-primary);
&:hover {
background-color: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
}
/* Dragging state */
&.dragging {
opacity: 0.7;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
}

8
wwwroot/css/v2/calendar-v2-layout.css
View file

@ -73,8 +73,12 @@ swp-header-spacer {
}
swp-header-drawer {
display: block;
height: 0;
display: grid;
grid-template-columns: repeat(var(--grid-columns), minmax(var(--day-column-min-width), 1fr));
min-width: calc(var(--grid-columns) * var(--day-column-min-width));
grid-auto-rows: 28px;
gap: 2px 0;
min-height: 0;
overflow: hidden;
background: var(--color-background-alt);
border-bottom: 1px solid var(--color-border);