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"> <div className="flex flex-col bg-white dark:bg-gray-900 h-full overflow-hidden">
{/* Task Filters */} {/* Task Filters */}
<div className="flex-none" style={{ height: '74px', flexShrink: 0 }}> <div className="flex-none" style={{ height: '54px', flexShrink: 0 }}>
<ImprovedTaskFilters position="list" /> <ImprovedTaskFilters position="list" />
</div> </div>
{/* Table Container */} {/* 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 */}
<div <div
ref={contentScrollRef} className="border border-gray-200 dark:border-gray-700 rounded-lg"
className="flex-1 bg-white dark:bg-gray-900 relative"
style={{ style={{
overflowX: 'auto', height: 'calc(100vh - 240px)', // Slightly reduce height to ensure scrollbar visibility
overflowY: 'auto', display: 'flex',
minHeight: 0, flexDirection: 'column',
paddingBottom: '20px' // Add padding to ensure horizontal scrollbar is visible overflow: 'hidden'
}} }}
> >
{/* Sticky Column Headers */} {/* Task List Content with Sticky Header */}
<div className="sticky top-0 z-30 bg-gray-50 dark:bg-gray-800" style={{ width: '100%', minWidth: 'max-content' }}> <div
{renderColumnHeaders()} ref={contentScrollRef}
</div> className="flex-1 bg-white dark:bg-gray-900 relative"
<SortableContext style={{
items={virtuosoItems overflowX: 'auto',
.filter(item => !('isAddTaskRow' in item) && !item.parent_task_id) overflowY: 'auto',
.map(item => item.id) minHeight: 0
.filter((id): id is string => id !== undefined)} }}
strategy={verticalListSortingStrategy}
> >
<div style={{ minWidth: 'max-content' }}> {/* Sticky Column Headers */}
{/* Render groups manually for debugging */} <div className="sticky top-0 z-30 bg-gray-50 dark:bg-gray-800" style={{ width: '100%', minWidth: 'max-content' }}>
{virtuosoGroups.map((group, groupIndex) => ( {renderColumnHeaders()}
<div key={group.id}> </div>
{/* Group Header */} <SortableContext
{renderGroup(groupIndex)} items={virtuosoItems
.filter(item => !('isAddTaskRow' in item) && !item.parent_task_id)
{/* Group Tasks */} .map(item => item.id)
{!collapsedGroups.has(group.id) && group.tasks.map((task, taskIndex) => { .filter((id): id is string => id !== undefined)}
const globalTaskIndex = virtuosoGroups strategy={verticalListSortingStrategy}
.slice(0, groupIndex) >
.reduce((sum, g) => sum + g.count, 0) + taskIndex; <div style={{ minWidth: 'max-content' }}>
{/* Render groups manually for debugging */}
return ( {virtuosoGroups.map((group, groupIndex) => (
<div key={task.id || `add-task-${group.id}-${taskIndex}`}> <div key={group.id}>
{renderTask(globalTaskIndex)} {/* Group Header */}
</div> {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> </div>
))} </SortableContext>
</div> </div>
</SortableContext> </div>
</div>
</div>
{/* Drag Overlay */} {/* Drag Overlay */}
<DragOverlay dropAnimation={null}> <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': case 'phase':
return ( return (
<div style={baseStyle}> <div className="flex items-center justify-center px-2" style={baseStyle}>
<TaskPhaseDropdown <TaskPhaseDropdown
task={task} task={task}
projectId={projectId} projectId={projectId}
@@ -575,7 +575,7 @@ const TaskRow: React.FC<TaskRowProps> = memo(({ taskId, projectId, visibleColumn
case 'timeTracking': case 'timeTracking':
return ( return (
<div style={baseStyle}> <div className="flex items-center justify-center px-2" style={baseStyle}>
<TaskTimeTracking taskId={task.id || ''} isDarkMode={isDarkMode} /> <TaskTimeTracking taskId={task.id || ''} isDarkMode={isDarkMode} />
</div> </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 ( return (
<div <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"> <div className="flex flex-wrap items-center gap-2">
{/* Left Section - Main Filters */} {/* 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( const pageHeaderStyle = useMemo(
() => ({ () => ({
paddingInline: 0, paddingInline: 0,
marginBlockEnd: 8,
}), }),
[] []
); );