bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(kanban-group): update empty drop zone behavior and visuals

Browse Source 
- Modified the condition for rendering the empty drop zone to exclude the currently hovered group.
- Updated the background gradient colors for the empty drop zone to enhance visual appeal and consistency with the theme.
This commit is contained in:
shancds
2025-07-11 15:45:47 +05:30
parent e20ab86d6e
commit 295d7a92df
1 changed files with 3 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx
View File

@@ -480,15 +480,15 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
)} )}
{/* If group is empty, render a drop zone */} {/* If group is empty, render a drop zone */}
{group.tasks.length === 0 && !showNewCardTop && !showNewCardBottom && ( {group.tasks.length === 0 && !showNewCardTop && !showNewCardBottom && hoveredGroupId !== group.id && (
<div <div
className="empty-drop-zone" className="empty-drop-zone"
style={{ style={{
padding: 8, padding: 8,
height: 500, height: 500,
background: themeWiseColor( background: themeWiseColor(
'linear-gradient( 180deg, #fafafa, rgba(245, 243, 243, 0))', 'linear-gradient( 180deg,#E2EAF4, rgba(245, 243, 243, 0))',
'linear-gradient( 180deg, #2a2b2d, rgba(42, 43, 45, 0))', 'linear-gradient( 180deg, #2a2a2a, rgba(42, 43, 45, 0))',
themeMode themeMode
), ),
borderRadius: 6, borderRadius: 6,
@@ -503,12 +503,6 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
onDragOver={e => { e.preventDefault(); onTaskDragOver(e, group.id, 0); }} onDragOver={e => { e.preventDefault(); onTaskDragOver(e, group.id, 0); }}
onDrop={e => { e.preventDefault(); onTaskDrop(e, group.id, 0); }} onDrop={e => { e.preventDefault(); onTaskDrop(e, group.id, 0); }}
> >
{/* Drop indicator at the end of the group */}
{hoveredGroupId === group.id && hoveredTaskIdx === group.tasks.length && (
<div className="drop-preview-indicator">
<div className="drop-line" />
</div>
)}
{(isOwnerOrAdmin || isProjectManager) && !showNewCardTop && !showNewCardBottom && ( {(isOwnerOrAdmin || isProjectManager) && !showNewCardTop && !showNewCardBottom && (
<button <button
type="button" type="button"
@@ -603,13 +597,6 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
{t('addTask')} {t('addTask')}
</button> </button>
)} )}
{/* Drop indicator at the end of the group */}
{hoveredGroupId === group.id && hoveredTaskIdx === group.tasks.length && (
<div className="drop-preview-indicator">
<div className="drop-line" />
</div>
)}
</div> </div>
</div> </div>
</div> </div>