From 31457525918265e226f0e245b6aa2835ca600380 Mon Sep 17 00:00:00 2001 From: "Janus C. H. Knudsen" Date: Wed, 8 Oct 2025 18:15:00 +0200 Subject: [PATCH] Improves event hover highlighting Uses CSS classes for event hover highlighting, instead of directly manipulating the background color. This allows for more flexible and maintainable styling. Re-enables resize handle manager. Removes console logs. --- src/factories/ManagerFactory.ts | 7 +++---- src/managers/DragDropManager.ts | 20 +++----------------- wwwroot/css/calendar-base-css.css | 5 +++++ wwwroot/css/calendar-events-css.css | 27 ++++++++++++++++++++++++++- 4 files changed, 37 insertions(+), 22 deletions(-) diff --git a/src/factories/ManagerFactory.ts b/src/factories/ManagerFactory.ts index 2036dd0..b526967 100644 --- a/src/factories/ManagerFactory.ts +++ b/src/factories/ManagerFactory.ts @@ -73,10 +73,9 @@ export class ManagerFactory { try { await managers.calendarManager.initialize?.(); - // ResizeHandleManager temporarily disabled for testing - // if (managers.resizeHandleManager && managers.resizeHandleManager.initialize) { - // managers.resizeHandleManager.initialize(); - // } + if (managers.resizeHandleManager && managers.resizeHandleManager.initialize) { + managers.resizeHandleManager.initialize(); + } } catch (error) { throw error; } diff --git a/src/managers/DragDropManager.ts b/src/managers/DragDropManager.ts index 98ff34c..d662bb2 100644 --- a/src/managers/DragDropManager.ts +++ b/src/managers/DragDropManager.ts @@ -119,13 +119,12 @@ export class DragDropManager { if (eventElement && !this.isDragStarted && mouseEvent.buttons === 0) { // Clear any previous hover first if (this.currentHoveredEvent && this.currentHoveredEvent !== eventElement) { - this.currentHoveredEvent.style.backgroundColor = ''; + this.currentHoveredEvent.classList.remove('hover'); } this.isHoverTrackingActive = true; this.currentHoveredEvent = eventElement; - eventElement.style.backgroundColor = 'red'; - console.log('🎨 Mouse entered event:', eventElement.dataset.eventId, 'buttons:', mouseEvent.buttons, 'isDragStarted:', this.isDragStarted); + eventElement.classList.add('hover'); } } }, true); // Use capture phase @@ -208,15 +207,6 @@ export class DragDropManager { this.currentMouseY = event.clientY; this.lastMousePosition = { x: event.clientX, y: event.clientY }; - // Log which element we're over during drag - if (this.isDragStarted) { - const elementAtPoint = document.elementFromPoint(event.clientX, event.clientY); - const eventElement = elementAtPoint?.closest('swp-event'); - if (eventElement) { - console.log('🖱️ Dragging over event:', (eventElement as HTMLElement).dataset.eventId); - } - } - // Check for event hover (coordinate-based) - only when mouse button is up if (this.isHoverTrackingActive && event.buttons === 0) { this.checkEventHover(event); @@ -238,10 +228,8 @@ export class DragDropManager { // Set high z-index on event-group if exists, otherwise on event itself const eventGroup = this.draggedElement.closest('swp-event-group'); if (eventGroup) { - console.log('🔝 Setting z-index 9999 on event-group', eventGroup); eventGroup.style.zIndex = '9999'; } else { - console.log('🔝 Setting z-index 9999 on event', this.draggedElement.dataset.eventId); this.draggedElement.style.zIndex = '9999'; } @@ -615,7 +603,6 @@ export class DragDropManager { if (!isStillInside) { // Only disable tracking and clear if mouse is NOT pressed (allow resize to work) if (event.buttons === 0) { - console.log('🚪 Mouse left event:', this.currentHoveredEvent.dataset.eventId, 'clearing hover'); this.isHoverTrackingActive = false; this.clearEventHover(); } @@ -624,9 +611,8 @@ export class DragDropManager { private clearEventHover(): void { if (this.currentHoveredEvent) { - this.currentHoveredEvent.style.backgroundColor = ''; + this.currentHoveredEvent.classList.remove('hover'); this.currentHoveredEvent = null; } } - } diff --git a/wwwroot/css/calendar-base-css.css b/wwwroot/css/calendar-base-css.css index 06c1d1a..97d1f3c 100644 --- a/wwwroot/css/calendar-base-css.css +++ b/wwwroot/css/calendar-base-css.css @@ -44,14 +44,19 @@ /* Event colors - Updated with month-view-expanded.html color scheme */ --color-event-meeting: #e8f5e8; --color-event-meeting-border: #4caf50; + --color-event-meeting-hl: #c8e6c9; --color-event-meal: #fff8e1; --color-event-meal-border: #ff9800; + --color-event-meal-hl: #ffe0b2; --color-event-work: #fff8e1; --color-event-work-border: #ff9800; + --color-event-work-hl: #ffe0b2; --color-event-milestone: #ffebee; --color-event-milestone-border: #f44336; + --color-event-milestone-hl: #ffcdd2; --color-event-personal: #f3e5f5; --color-event-personal-border: #9c27b0; + --color-event-personal-hl: #e1bee7; /* UI colors */ --color-background: #ffffff; diff --git a/wwwroot/css/calendar-events-css.css b/wwwroot/css/calendar-events-css.css index eab4dda..abf3c61 100644 --- a/wwwroot/css/calendar-events-css.css +++ b/wwwroot/css/calendar-events-css.css @@ -60,7 +60,32 @@ swp-day-columns swp-event { 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 {