paul/task-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve calendar usability and task dragging interactions

Browse Source 
Adjusted calendar positioning to prevent menu overlap and added visual highlighting for hovered dates during task drag-and-drop, with enhanced styling for weekends.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/0tPSQjg
This commit is contained in:
paul-nothaft
2025-09-11 10:14:09 +00:00
parent 77db4ee11c
commit 7e9f1bff1f
2 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.replit
+4
View File
@@ -14,6 +14,10 @@ run = ["npm", "run", "start"]
localPort = 5000
externalPort = 80
[[ports]]
localPort = 39581
externalPort = 3001
[[ports]]
localPort = 41353
externalPort = 3000
client/src/components/TasksWithCalendar.tsx
+22 -8
View File
@@ -131,8 +131,21 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
}
};
const handleDragLeave = () => {
setHoveredDate(null);
const handleDragLeave = (e: React.DragEvent) => {
// Only clear hover if we're leaving the calendar entirely
const rect = e.currentTarget.getBoundingClientRect();
const x = e.clientX;
const y = e.clientY;
if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
setHoveredDate(null);
}
};
const handleMouseMove = (e: React.MouseEvent, date: Date) => {
if (draggedTask) {
setHoveredDate(date);
}
};
const navigateCalendar = (direction: 'prev' | 'next') => {
@@ -280,9 +293,9 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
)}
</div>
{/* Calendar Section - Fixed at bottom with full width */}
<div className="fixed bottom-16 left-0 right-0 bg-background border-t shadow-lg z-10">
<div className="p-4 max-h-[35vh] overflow-y-auto">
{/* Calendar Section - Fixed at bottom with full width, above bottom nav */}
<div className="fixed bottom-20 left-0 right-0 bg-background border-t shadow-lg z-[5]">
<div className="p-3 max-h-[32vh] overflow-y-auto">
{/* Calendar Header */}
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
@@ -327,15 +340,16 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
className={`p-2 min-h-[100px] transition-all border-2 ${
isToday ? 'border-primary ring-1 ring-primary ring-offset-1 ring-offset-background' : 'border-border'
} ${
isWeekend ? 'bg-muted/30' : ''
isWeekend ? 'bg-muted/50 border-muted' : ''
} ${
isHovered && draggedTask ? 'ring-2 ring-primary bg-primary/10 border-primary' : ''
isHovered && draggedTask ? 'ring-2 ring-primary bg-primary/15 border-primary shadow-lg' : ''
} ${
draggedTask && !isHovered ? 'border-dashed border-primary/30' : ''
}`}
onDragOver={handleDragOver}
onDragEnter={() => handleDragEnter(date)}
onDragLeave={handleDragLeave}
onMouseMove={(e) => handleMouseMove(e, date)}
onDrop={(e) => handleDrop(date, e)}
onClick={() => {
console.log('Date selected:', date.toLocaleDateString());
@@ -400,7 +414,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
</div>
{/* Add bottom padding to prevent content overlap */}
<div className="h-[40vh]" />
<div className="h-[37vh]" />
{/* Time Completion Modal */}
<TimeCompletionModal