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

refactor(task-list): enhance layout and styling for improved usability

Browse Source 
- Adjusted heights and padding in the task list and filters for better space optimization.
- Updated styling in TaskRow for consistent alignment of task elements.
- Refined padding in ImprovedTaskFilters for a cleaner appearance.
- Removed unnecessary margin in ProjectViewHeader to streamline layout.
This commit is contained in:
chamikaJ
2025-07-08 16:51:44 +05:30
parent 6ac2a0c888
commit 68e71d09ea
4 changed files with 53 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -552,67 +552,66 @@ const TaskListV2: React.FC = () => {
>
<div className="flex flex-col bg-white dark:bg-gray-900 h-full overflow-hidden">
{/* Task Filters */}
<div className="flex-none" style={{ height: '74px', flexShrink: 0 }}>
<div className="flex-none" style={{ height: '54px', flexShrink: 0 }}>
<ImprovedTaskFilters position="list" />
</div>
{/* Table Container */}
<div
className="border border-gray-200 dark:border-gray-700 rounded-lg"
style={{
height: 'calc(100vh - 130px)',
display: 'flex',
flexDirection: 'column',
overflow: 'hidden'
}}
>
{/* Task List Content with Sticky Header */}
{/* Table Container */}
<div
ref={contentScrollRef}
className="flex-1 bg-white dark:bg-gray-900 relative"
className="border border-gray-200 dark:border-gray-700 rounded-lg"
style={{
overflowX: 'auto',
overflowY: 'auto',
minHeight: 0,
paddingBottom: '20px' // Add padding to ensure horizontal scrollbar is visible
height: 'calc(100vh - 240px)', // Slightly reduce height to ensure scrollbar visibility
display: 'flex',
flexDirection: 'column',
overflow: 'hidden'
}}
>
{/* Sticky Column Headers */}
<div className="sticky top-0 z-30 bg-gray-50 dark:bg-gray-800" style={{ width: '100%', minWidth: 'max-content' }}>
{renderColumnHeaders()}
</div>
<SortableContext
items={virtuosoItems
.filter(item => !('isAddTaskRow' in item) && !item.parent_task_id)
.map(item => item.id)
.filter((id): id is string => id !== undefined)}
strategy={verticalListSortingStrategy}
{/* Task List Content with Sticky Header */}
<div
ref={contentScrollRef}
className="flex-1 bg-white dark:bg-gray-900 relative"
style={{
overflowX: 'auto',
overflowY: 'auto',
minHeight: 0
}}
>
<div style={{ minWidth: 'max-content' }}>
{/* Render groups manually for debugging */}
{virtuosoGroups.map((group, groupIndex) => (
<div key={group.id}>
{/* Group Header */}
{renderGroup(groupIndex)}
{/* Group Tasks */}
{!collapsedGroups.has(group.id) && group.tasks.map((task, taskIndex) => {
const globalTaskIndex = virtuosoGroups
.slice(0, groupIndex)
.reduce((sum, g) => sum + g.count, 0) + taskIndex;
return (
<div key={task.id || `add-task-${group.id}-${taskIndex}`}>
{renderTask(globalTaskIndex)}
</div>
);
})}
{/* Sticky Column Headers */}
<div className="sticky top-0 z-30 bg-gray-50 dark:bg-gray-800" style={{ width: '100%', minWidth: 'max-content' }}>
{renderColumnHeaders()}
</div>
<SortableContext
items={virtuosoItems
.filter(item => !('isAddTaskRow' in item) && !item.parent_task_id)
.map(item => item.id)
.filter((id): id is string => id !== undefined)}
strategy={verticalListSortingStrategy}
>
<div style={{ minWidth: 'max-content' }}>
{/* Render groups manually for debugging */}
{virtuosoGroups.map((group, groupIndex) => (
<div key={group.id}>
{/* Group Header */}
{renderGroup(groupIndex)}
{/* Group Tasks */}
{!collapsedGroups.has(group.id) && group.tasks.map((task, taskIndex) => {
const globalTaskIndex = virtuosoGroups
.slice(0, groupIndex)
.reduce((sum, g) => sum + g.count, 0) + taskIndex;
return (
<div key={task.id || `add-task-${group.id}-${taskIndex}`}>
{renderTask(globalTaskIndex)}
</div>
);
})}
</div>
))}
</div>
))}
</SortableContext>
</div>
</SortableContext>
</div>
</div>
</div>
{/* Drag Overlay */}
<DragOverlay dropAnimation={null}>

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

@@ -564,7 +564,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'phase':
return (
<div style={baseStyle}>
<div className="flex items-center justify-center px-2" style={baseStyle}>
<TaskPhaseDropdown
task={task}
projectId={projectId}
@@ -575,7 +575,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'timeTracking':
return (
<div style={baseStyle}>
<div className="flex items-center justify-center px-2" style={baseStyle}>
<TaskTimeTracking taskId={task.id || ''} isDarkMode={isDarkMode} />
</div>
);

2
worklenz-frontend/src/components/task-management/improved-task-filters.tsx
View File

@@ -1240,7 +1240,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
return (
<div
className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-sm ${className}`}
className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-1.5 shadow-sm ${className}`}
>
<div className="flex flex-wrap items-center gap-2">
{/* Left Section - Main Filters */}

1
worklenz-frontend/src/pages/projects/projectView/project-view-header.tsx
View File

@@ -477,7 +477,6 @@ const ProjectViewHeader = memo(() => {
const pageHeaderStyle = useMemo(
() => ({
paddingInline: 0,
marginBlockEnd: 8,
}),
[]
);