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

refactor(task-list): improve layout and styling for task list and rows

Browse Source 
- Adjusted padding and alignment in TaskListV2 for better visual consistency.
- Enhanced styling in TaskRow to ensure uniformity across various task elements.
- Updated flex properties for improved responsiveness and usability in task display.
This commit is contained in:
chamikaJ
2025-07-08 17:10:56 +05:30
parent 78e14d6378
commit 072c1a6a3b
2 changed files with 50 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
worklenz-frontend/src/components/task-list-v2/TaskListV2.tsx
View File

@@ -471,7 +471,7 @@ const TaskListV2: React.FC = () => {
// Render column headers // Render column headers
const renderColumnHeaders = useCallback(() => ( const renderColumnHeaders = useCallback(() => (
<div className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700" style={{ width: '100%', minWidth: 'max-content' }}> <div className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700" style={{ width: '100%', minWidth: 'max-content' }}>
<div className="flex items-center px-3 py-3 w-full" style={{ minWidth: 'max-content', height: '44px' }}> <div className="flex items-center px-1 py-3 w-full" style={{ minWidth: 'max-content', height: '44px' }}>
{visibleColumns.map((column, index) => { {visibleColumns.map((column, index) => {
const columnStyle: ColumnStyle = { const columnStyle: ColumnStyle = {
width: column.width, width: column.width,
@@ -490,7 +490,21 @@ const TaskListV2: React.FC = () => {
<div <div
key={column.id} key={column.id}
className={`text-sm font-semibold text-gray-600 dark:text-gray-300 ${ className={`text-sm font-semibold text-gray-600 dark:text-gray-300 ${
column.id === 'taskKey' ? 'pl-3' : '' column.id === 'dragHandle'
? 'flex items-center justify-center'
: column.id === 'checkbox'
? 'flex items-center justify-center'
: column.id === 'taskKey'
? 'flex items-center pl-3'
: column.id === 'title'
? 'flex items-center justify-between'
: column.id === 'description'
? 'flex items-center px-2'
: column.id === 'labels'
? 'flex items-center gap-0.5 flex-wrap min-w-0 px-2'
: column.id === 'assignees'
? 'flex items-center px-2'
: 'flex items-center justify-center px-2'
}`} }`}
style={columnStyle} style={columnStyle}
> >
@@ -508,7 +522,7 @@ const TaskListV2: React.FC = () => {
); );
})} })}
{/* Add Custom Column Button - positioned at the end and scrolls with content */} {/* Add Custom Column Button - positioned at the end and scrolls with content */}
<div className="flex items-center justify-center ml-2" style={{ width: '50px', flexShrink: 0 }}> <div className="flex items-center justify-center px-2" style={{ width: '50px', flexShrink: 0 }}>
<AddCustomColumnButton /> <AddCustomColumnButton />
</div> </div>
</div> </div>

54
worklenz-frontend/src/components/task-list-v2/TaskRow.tsx
View File

@@ -417,9 +417,9 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'description': case 'description':
return ( return (
<div style={baseStyle} className="px-2"> <div className="flex items-center px-2" style={baseStyle}>
<div <div
className="text-sm text-gray-600 dark:text-gray-400 truncate" className="text-sm text-gray-600 dark:text-gray-400 truncate w-full"
style={{ style={{
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
overflow: 'hidden', overflow: 'hidden',
@@ -435,7 +435,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'status': case 'status':
return ( return (
<div style={baseStyle}> <div className="flex items-center justify-center px-2" style={baseStyle}>
<TaskStatusDropdown <TaskStatusDropdown
task={task} task={task}
projectId={projectId} projectId={projectId}
@@ -463,7 +463,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'priority': case 'priority':
return ( return (
<div style={baseStyle}> <div className="flex items-center justify-center px-2" style={baseStyle}>
<TaskPriorityDropdown <TaskPriorityDropdown
task={task} task={task}
projectId={projectId} projectId={projectId}
@@ -474,7 +474,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'dueDate': case 'dueDate':
return ( return (
<div style={baseStyle} className="relative group"> <div className="flex items-center justify-center px-2 relative group" style={baseStyle}>
{activeDatePicker === 'dueDate' ? ( {activeDatePicker === 'dueDate' ? (
<div className="w-full relative"> <div className="w-full relative">
<DatePicker <DatePicker
@@ -510,7 +510,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
</div> </div>
) : ( ) : (
<div <div
className="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded px-2 py-1 transition-colors" className="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded px-2 py-1 transition-colors text-center"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
datePickerHandlers.setDueDate(); datePickerHandlers.setDueDate();
@@ -532,7 +532,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'progress': case 'progress':
return ( return (
<div style={baseStyle}> <div className="flex items-center justify-center px-2" style={baseStyle}>
{task.progress !== undefined && {task.progress !== undefined &&
task.progress >= 0 && task.progress >= 0 &&
(task.progress === 100 ? ( (task.progress === 100 ? (
@@ -556,7 +556,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'labels': case 'labels':
return ( return (
<div className="flex items-center gap-0.5 flex-wrap min-w-0" style={{ ...baseStyle, minWidth: '150px', width: 'auto', flexGrow: 1 }}> <div className="flex items-center gap-0.5 flex-wrap min-w-0 px-2" style={{ ...baseStyle, minWidth: '150px', width: 'auto', flexGrow: 1 }}>
<TaskLabelsCell labels={task.labels} isDarkMode={isDarkMode} /> <TaskLabelsCell labels={task.labels} isDarkMode={isDarkMode} />
<LabelsSelector task={labelsAdapter} isDarkMode={isDarkMode} /> <LabelsSelector task={labelsAdapter} isDarkMode={isDarkMode} />
</div> </div>
@@ -582,18 +582,22 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'estimation': case 'estimation':
return ( return (
<div style={baseStyle}> <div className="flex items-center justify-center px-2" style={baseStyle}>
{task.timeTracking?.estimated && ( {task.timeTracking?.estimated ? (
<span className="text-sm text-gray-500 dark:text-gray-400"> <span className="text-sm text-gray-500 dark:text-gray-400">
{task.timeTracking.estimated}h {task.timeTracking.estimated}h
</span> </span>
) : (
<span className="text-sm text-gray-400 dark:text-gray-500">
0
</span>
)} )}
</div> </div>
); );
case 'startDate': case 'startDate':
return ( return (
<div style={baseStyle} className="relative group"> <div className="flex items-center justify-center px-2 relative group" style={baseStyle}>
{activeDatePicker === 'startDate' ? ( {activeDatePicker === 'startDate' ? (
<div className="w-full relative"> <div className="w-full relative">
<DatePicker <DatePicker
@@ -629,7 +633,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
</div> </div>
) : ( ) : (
<div <div
className="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded px-2 py-1 transition-colors" className="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded px-2 py-1 transition-colors text-center"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
datePickerHandlers.setStartDate(); datePickerHandlers.setStartDate();
@@ -651,42 +655,50 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'completedDate': case 'completedDate':
return ( return (
<div style={baseStyle}> <div className="flex items-center justify-center px-2" style={baseStyle}>
{formattedDates.completed && ( {formattedDates.completed ? (
<span className="text-sm text-gray-500 dark:text-gray-400"> <span className="text-sm text-gray-500 dark:text-gray-400">
{formattedDates.completed} {formattedDates.completed}
</span> </span>
) : (
<span className="text-sm text-gray-400 dark:text-gray-500">-</span>
)} )}
</div> </div>
); );
case 'createdDate': case 'createdDate':
return ( return (
<div style={baseStyle}> <div className="flex items-center justify-center px-2" style={baseStyle}>
{formattedDates.created && ( {formattedDates.created ? (
<span className="text-sm text-gray-500 dark:text-gray-400"> <span className="text-sm text-gray-500 dark:text-gray-400">
{formattedDates.created} {formattedDates.created}
</span> </span>
) : (
<span className="text-sm text-gray-400 dark:text-gray-500">-</span>
)} )}
</div> </div>
); );
case 'lastUpdated': case 'lastUpdated':
return ( return (
<div style={baseStyle}> <div className="flex items-center justify-center px-2" style={baseStyle}>
{formattedDates.updated && ( {formattedDates.updated ? (
<span className="text-sm text-gray-500 dark:text-gray-400"> <span className="text-sm text-gray-500 dark:text-gray-400">
{formattedDates.updated} {formattedDates.updated}
</span> </span>
) : (
<span className="text-sm text-gray-400 dark:text-gray-500">-</span>
)} )}
</div> </div>
); );
case 'reporter': case 'reporter':
return ( return (
<div style={baseStyle}> <div className="flex items-center justify-center px-2" style={baseStyle}>
{task.reporter && ( {task.reporter ? (
<span className="text-sm text-gray-500 dark:text-gray-400">{task.reporter}</span> <span className="text-sm text-gray-500 dark:text-gray-400">{task.reporter}</span>
) : (
<span className="text-sm text-gray-400 dark:text-gray-500">-</span>
)} )}
</div> </div>
); );
@@ -696,7 +708,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
const column = visibleColumns.find(col => col.id === columnId); const column = visibleColumns.find(col => col.id === columnId);
if (column && (column.custom_column || column.isCustom) && updateTaskCustomColumnValue) { if (column && (column.custom_column || column.isCustom) && updateTaskCustomColumnValue) {
return ( return (
<div style={baseStyle}> <div className="flex items-center justify-center px-2" style={baseStyle}>
<CustomColumnCell <CustomColumnCell
column={column} column={column}
task={task} task={task}