Skip to content

Commit 2cf91bd

Browse files
chamikaJchamikaJ
authored
Merge pull request #240 from Worklenz/fix/task-drag-and-drop-improvement
refactor(TaskRow): improve layout and styling for task indicators and…
2 parents e02796c + e1e4187 commit 2cf91bd

1 file changed

Lines changed: 46 additions & 52 deletions

File tree

  • worklenz-frontend/src/components/task-list-v2

‎worklenz-frontend/src/components/task-list-v2/TaskRow.tsx‎

Lines changed: 46 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -292,15 +292,15 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
292292
case 'title':
293293
return (
294294
<div className="flex items-center justify-between group" style={baseStyle}>
295-
<div className="flex items-center flex-1">
295+
<div className="flex items-center flex-1 min-w-0">
296296
{/* Indentation for subtasks - tighter spacing */}
297-
{isSubtask && <div className="w-4" />}
297+
{isSubtask && <div className="w-4 flex-shrink-0" />}
298298

299299
{/* Expand/Collapse button - only show for parent tasks */}
300300
{!isSubtask && (
301301
<button
302302
onClick={handleToggleExpansion}
303-
className={`flex h-4 w-4 items-center justify-center rounded-sm text-xs mr-1 hover:border hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:scale-110 transition-all duration-300 ease-out ${
303+
className={`flex h-4 w-4 items-center justify-center rounded-sm text-xs mr-1 hover:border hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:scale-110 transition-all duration-300 ease-out flex-shrink-0 ${
304304
task.sub_tasks_count != null && Number(task.sub_tasks_count) > 0
305305
? 'opacity-100'
306306
: 'opacity-0 group-hover:opacity-100'
@@ -319,87 +319,81 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
319319
)}
320320

321321
{/* Additional indentation for subtasks after the expand button space */}
322-
{isSubtask && <div className="w-2" />}
322+
{isSubtask && <div className="w-2 flex-shrink-0" />}
323323

324-
<div className="flex items-center gap-2">
325-
<Tooltip title={taskDisplayName}>
326-
<span
327-
className="text-sm text-gray-700 dark:text-gray-300 truncate cursor-pointer"
328-
style={{
329-
maxWidth: '200px',
330-
whiteSpace: 'nowrap',
331-
overflow: 'hidden',
332-
textOverflow: 'ellipsis',
333-
}}
334-
>
335-
{taskDisplayName}
336-
</span>
337-
</Tooltip>
338-
339-
{/* Subtask count indicator - only show if count > 1 */}
340-
{!isSubtask && task.sub_tasks_count != null && task.sub_tasks_count !== 0 && (
341-
<Tooltip title={t(`indicators.tooltips.subtasks${task.sub_tasks_count === 1 ? '' : '_plural'}`, { count: task.sub_tasks_count })}>
342-
<div className="flex items-center gap-1 px-2 py-1 bg-blue-50 dark:bg-blue-900/20 rounded-md">
343-
<span className="text-xs text-blue-600 dark:text-blue-400 font-medium">
344-
{task.sub_tasks_count}
345-
</span>
346-
<DoubleRightOutlined className="text-xs text-blue-600 dark:text-blue-400" />
347-
</div>
324+
<div className="flex items-center gap-2 flex-1 min-w-0">
325+
{/* Task name with dynamic width */}
326+
<div className="flex-1 min-w-0">
327+
<Tooltip title={taskDisplayName}>
328+
<span
329+
className="text-sm text-gray-700 dark:text-gray-300 truncate cursor-pointer block"
330+
style={{
331+
whiteSpace: 'nowrap',
332+
overflow: 'hidden',
333+
textOverflow: 'ellipsis',
334+
}}
335+
>
336+
{taskDisplayName}
337+
</span>
348338
</Tooltip>
349-
)}
339+
</div>
340+
341+
{/* Indicators container - flex-shrink-0 to prevent compression */}
342+
<div className="flex items-center gap-1 flex-shrink-0">
343+
{/* Subtask count indicator - only show if count > 0 */}
344+
{!isSubtask && task.sub_tasks_count != null && task.sub_tasks_count !== 0 && (
345+
<Tooltip title={t(`indicators.tooltips.subtasks${task.sub_tasks_count === 1 ? '' : '_plural'}`, { count: task.sub_tasks_count })}>
346+
<div className="flex items-center gap-1 px-1.5 py-0.5 bg-blue-50 dark:bg-blue-900/20 rounded text-xs">
347+
<span className="text-blue-600 dark:text-blue-400 font-medium">
348+
{task.sub_tasks_count}
349+
</span>
350+
<DoubleRightOutlined className="text-blue-600 dark:text-blue-400" style={{ fontSize: 10 }} />
351+
</div>
352+
</Tooltip>
353+
)}
350354

351-
{/* Task indicators */}
352-
<div className="flex items-center gap-1 ml-2">
353-
{/* Comments count indicator - only show if count > 1 */}
355+
{/* Task indicators - compact layout */}
354356
{task.comments_count != null && task.comments_count !== 0 && (
355357
<Tooltip title={t(`indicators.tooltips.comments${task.comments_count === 1 ? '' : '_plural'}`, { count: task.comments_count })}>
356-
<div className="flex items-center gap-1">
357-
<CommentOutlined
358-
className="text-gray-500 dark:text-gray-400"
359-
style={{ fontSize: 14 }}
360-
/>
361-
</div>
358+
<CommentOutlined
359+
className="text-gray-500 dark:text-gray-400"
360+
style={{ fontSize: 12 }}
361+
/>
362362
</Tooltip>
363363
)}
364364

365-
{/* Subscribers indicator */}
366365
{task.has_subscribers && (
367366
<Tooltip title={t('indicators.tooltips.subscribers')}>
368367
<EyeOutlined
369368
className="text-gray-500 dark:text-gray-400"
370-
style={{ fontSize: 14 }}
369+
style={{ fontSize: 12 }}
371370
/>
372371
</Tooltip>
373372
)}
374373

375-
{/* Attachments count indicator - only show if count > 1 */}
376374
{task.attachments_count != null && task.attachments_count !== 0 && (
377375
<Tooltip title={t(`indicators.tooltips.attachments${task.attachments_count === 1 ? '' : '_plural'}`, { count: task.attachments_count })}>
378-
<div className="flex items-center gap-1">
379-
<PaperClipOutlined
380-
className="text-gray-500 dark:text-gray-400"
381-
style={{ fontSize: 14 }}
382-
/>
383-
</div>
376+
<PaperClipOutlined
377+
className="text-gray-500 dark:text-gray-400"
378+
style={{ fontSize: 12 }}
379+
/>
384380
</Tooltip>
385381
)}
386382

387-
{/* Dependencies indicator */}
388383
{task.has_dependencies && (
389384
<Tooltip title={t('indicators.tooltips.dependencies')}>
390385
<MinusCircleOutlined
391386
className="text-gray-500 dark:text-gray-400"
392-
style={{ fontSize: 14 }}
387+
style={{ fontSize: 12 }}
393388
/>
394389
</Tooltip>
395390
)}
396391

397-
{/* Recurring task indicator */}
398392
{task.schedule_id && (
399393
<Tooltip title={t('indicators.tooltips.recurring')}>
400394
<RetweetOutlined
401395
className="text-gray-500 dark:text-gray-400"
402-
style={{ fontSize: 14 }}
396+
style={{ fontSize: 12 }}
403397
/>
404398
</Tooltip>
405399
)}
@@ -408,7 +402,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
408402
</div>
409403

410404
<button
411-
className="opacity-0 group-hover:opacity-100 transition-all duration-200 ml-2 mr-2 px-3 py-1.5 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 cursor-pointer rounded-md shadow-sm hover:shadow-md flex items-center gap-1"
405+
className="opacity-0 group-hover:opacity-100 transition-all duration-200 ml-2 mr-2 px-3 py-1.5 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 cursor-pointer rounded-md shadow-sm hover:shadow-md flex items-center gap-1 flex-shrink-0"
412406
onClick={(e) => {
413407
e.stopPropagation();
414408
dispatch(setSelectedTaskId(task.id));

0 commit comments

Comments
 (0)