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

fix(task-list): update styling and improve task handling

Browse Source 
- Adjusted color styling for the CreateStatusButton based on theme mode.
- Enhanced TaskGroupHeader with improved border styling and spacing for better visual consistency.
- Increased width and padding for the AddCustomColumnButton to improve usability.
- Updated TaskRow to include additional dependencies for task labels and phase updates in socket handling.
- Refactored task management slice to ensure accurate label and phase updates during real-time interactions.
- Removed unnecessary debug logging from CustomColumnModal and SelectionTypeColumn components for cleaner code.
This commit is contained in:
chamiakJ
2025-07-07 05:07:05 +05:30
parent 48c3d58f7e
commit 411147efce
11 changed files with 141 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
worklenz-frontend/src/components/task-list-v2/TaskGroupHeader.tsx
View File

@@ -235,7 +235,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
return (
<div
ref={setNodeRef}
className={`inline-flex w-max items-center px-1 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out border-b border-gray-200 dark:border-gray-700 rounded-t-md ${
className={`inline-flex w-max items-center px-1 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out border-t border-b border-gray-200 dark:border-gray-700 rounded-t-md pr-2 ${
isOver ? 'ring-2 ring-blue-400 ring-opacity-50' : ''
}`}
style={{
@@ -291,7 +291,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
{/* Group name and count */}
<div className="flex items-center">
<span
className="text-sm font-semibold"
className="text-sm font-semibold pr-2"
style={{ color: headerTextColor }}
>
{group.name}

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

@@ -491,7 +491,7 @@ const TaskListV2: React.FC = () => {
</div>
);
})}
<div className="flex items-center justify-center" style={{ width: '60px', flexShrink: 0 }}>
<div className="flex items-center justify-center" style={{ width: '70px', flexShrink: 0, paddingRight: '8px' }}>
<AddCustomColumnButton />
</div>
</div>

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

@@ -49,6 +49,7 @@ interface TaskLabelsCellProps {
}
const TaskLabelsCell: React.FC<TaskLabelsCellProps> = memo(({ labels, isDarkMode }) => {
console.log('labels', labels);
if (!labels) {
return null;
}
@@ -190,7 +191,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
name: label.name,
color_code: label.color,
})) || [],
}), [task.id, task.title, task.name, task.parent_task_id, task.labels]);
}), [task.id, task.title, task.name, task.parent_task_id, task.labels, task.labels?.length]);
// Handle checkbox change
const handleCheckboxChange = useCallback((e: any) => {
@@ -654,8 +655,10 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
isDarkMode,
projectId,
// Task data
// Task data - include specific fields that might update via socket
task,
task.labels, // Explicit dependency for labels updates
task.phase, // Explicit dependency for phase updates
taskDisplayName,
convertedTask,

4
worklenz-frontend/src/components/task-list-v2/components/CustomColumnComponents.tsx
View File

@@ -29,7 +29,7 @@ export const AddCustomColumnButton: React.FC = memo(() => {
<button
onClick={handleModalOpen}
className={`
group relative w-8 h-8 rounded-lg border-2 border-dashed transition-all duration-200
group relative w-9 h-9 rounded-lg border-2 border-dashed transition-all duration-200
flex items-center justify-center
${isDarkMode
? 'border-gray-600 hover:border-blue-500 hover:bg-blue-500/10 text-gray-500 hover:text-blue-400'
@@ -37,7 +37,7 @@ export const AddCustomColumnButton: React.FC = memo(() => {
}
`}
>
<PlusOutlined className="text-xs transition-transform duration-200 group-hover:scale-110" />
<PlusOutlined className="text-sm transition-transform duration-200 group-hover:scale-110" />
{/* Subtle glow effect on hover */}
<div className={`