feat(task-list-v2): enhance sticky column behavior and dark mode support

- Updated DropSpacer and EmptyGroupMessage components to accept an optional isDarkMode prop for improved styling in dark mode.
- Enhanced task rendering in TaskRow to dynamically adjust background colors based on dark mode and drag states.
- Refactored useTaskRowColumns to support sticky column positioning and hover effects, ensuring a consistent user experience across different themes.
- Improved overall visual feedback during task interactions, including drag-and-drop operations.
This commit is contained in:
chamikaJ
2025-07-30 16:25:29 +05:30
parent b6c056dd1a
commit 374595261f
3 changed files with 167 additions and 35 deletions

View File

@@ -131,11 +131,26 @@ const TaskRow: React.FC<TaskRowProps> = memo(({
isOver && !isDragging ? 'bg-blue-50 dark:bg-blue-900/20' : ''
}`}
>
{visibleColumns.map((column, index) => (
<React.Fragment key={column.id}>
{renderColumn(column.id, column.width, column.isSticky, index)}
</React.Fragment>
))}
{visibleColumns.map((column, index) => {
// Calculate background state for sticky columns - custom dark mode colors
const rowBackgrounds = {
normal: isDarkMode ? '#1e1e1e' : '#ffffff', // custom dark : bg-white
hover: isDarkMode ? '#1f2937' : '#f9fafb', // slightly lighter dark : bg-gray-50
dragOver: isDarkMode ? '#1e3a8a33' : '#dbeafe', // bg-blue-900/20 : bg-blue-50
};
let currentBg = rowBackgrounds.normal;
if (isOver && !isDragging) {
currentBg = rowBackgrounds.dragOver;
}
// Note: hover state is handled by CSS, so we'll use a CSS custom property
return (
<React.Fragment key={column.id}>
{renderColumn(column.id, column.width, column.isSticky, index, currentBg, rowBackgrounds)}
</React.Fragment>
);
})}
</div>
);
});