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

Merge pull request #258 from shancds/test/row-kanban-board-v1.1.8

Browse Source 
fix(enhanced-kanban): refine loading state visuals in EnhancedKanbanB…
This commit is contained in:
Chamika J
2025-07-11 16:10:49 +05:30
committed by GitHub
parent 26de439fab 6226ae35ff
commit 2ad3c2dcd4
3 changed files with 5 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -316,14 +316,12 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
</div> </div>
<div className="enhanced-kanban-board"> <div className="enhanced-kanban-board">
{loadingGroups ? ( {loadingGroups ? (
<Card> <div className="flex flex-row gap-2 h-[600px]">
<div className="flex flex-row gap-2 h-[600px] py-2">
<div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '60%' }} /> <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '60%' }} />
<div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '100%' }} /> <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '100%' }} />
<div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '80%' }} /> <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '80%' }} />
<div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '40%' }} /> <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '40%' }} />
</div> </div>
</Card>
) : taskGroups.length === 0 ? ( ) : taskGroups.length === 0 ? (
<Card> <Card>
<Empty description="No tasks found" image={Empty.PRESENTED_IMAGE_SIMPLE} /> <Empty description="No tasks found" image={Empty.PRESENTED_IMAGE_SIMPLE} />

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>

2
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx
View File

@@ -245,7 +245,7 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
className="w-2 h-2 rounded-full inline-block" className="w-2 h-2 rounded-full inline-block"
style={{ backgroundColor: themeMode === 'dark' ? (task.priority_color_dark || task.priority_color || '#d9d9d9') : (task.priority_color || '#d9d9d9') }} style={{ backgroundColor: themeMode === 'dark' ? (task.priority_color_dark || task.priority_color || '#d9d9d9') : (task.priority_color || '#d9d9d9') }}
></span> ></span>
<div className="task-title" style={{ marginLeft: 8 }}>{task.name}</div> <div className="task-title" title={task.name} style={{ marginLeft: 8 }}>{task.name}</div>
</div> </div>
<div className="task-assignees-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}> <div className="task-assignees-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>