feat(task-list): improve layout and scrolling behavior in TaskListV2 component
- Adjusted the layout to ensure fixed heights for the task list and table container, enhancing usability. - Implemented horizontal scrolling for the table container and ensured the bulk action bar is positioned absolutely for better accessibility. - Updated styles for column headers and task list content to improve visual consistency and user experience.
This commit is contained in:
@@ -1317,24 +1317,65 @@ const TaskListV2: React.FC = () => {
|
|||||||
onDragOver={handleDragOver}
|
onDragOver={handleDragOver}
|
||||||
onDragEnd={handleDragEnd}
|
onDragEnd={handleDragEnd}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col h-screen bg-white dark:bg-gray-900">
|
<div className="flex flex-col bg-white dark:bg-gray-900" style={{ height: '100vh', overflow: 'hidden' }}>
|
||||||
{/* Task Filters */}
|
{/* Task Filters */}
|
||||||
<div className="flex-none px-4 py-3">
|
<div className="flex-none px-4 py-3" style={{ height: '66px', flexShrink: 0 }}>
|
||||||
<ImprovedTaskFilters position="list" />
|
<ImprovedTaskFilters position="list" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Table Container with synchronized horizontal scrolling */}
|
{/* Table Container with fixed height and horizontal scroll */}
|
||||||
<div className="flex-1 overflow-x-auto" style={{ height: 'calc(100vh - 140px)' }}>
|
<div
|
||||||
<div className="min-w-max flex flex-col h-full">
|
className="flex-1 overflow-auto border border-gray-200 dark:border-gray-700"
|
||||||
{/* Column Headers - Fixed at top */}
|
style={{
|
||||||
<div className="flex-none border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 sticky top-0 z-30 w-full">
|
height: '600px',
|
||||||
<div className="bg-gray-50 dark:bg-gray-800 w-full min-w-max">
|
maxHeight: '600px'
|
||||||
{columnHeaders}
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ minWidth: 'max-content' }}>
|
||||||
|
{/* Column Headers - Sticky at top */}
|
||||||
|
<div className="sticky top-0 z-30 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div className="flex items-center px-4 py-3 w-full" style={{ minWidth: 'max-content', height: '44px' }}>
|
||||||
|
{visibleColumns.map(column => {
|
||||||
|
const columnStyle: ColumnStyle = {
|
||||||
|
width: column.width,
|
||||||
|
flexShrink: 0,
|
||||||
|
...(column.id === 'labels' && column.width === 'auto'
|
||||||
|
? {
|
||||||
|
minWidth: '200px',
|
||||||
|
flexGrow: 1,
|
||||||
|
}
|
||||||
|
: {}),
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={column.id}
|
||||||
|
className="text-sm font-semibold text-gray-600 dark:text-gray-300"
|
||||||
|
style={columnStyle}
|
||||||
|
>
|
||||||
|
{column.id === 'dragHandle' ? (
|
||||||
|
<span></span>
|
||||||
|
) : column.id === 'checkbox' ? (
|
||||||
|
<span></span>
|
||||||
|
) : (column as any).isCustom ? (
|
||||||
|
<CustomColumnHeader
|
||||||
|
column={column}
|
||||||
|
onSettingsClick={handleCustomColumnSettings}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
t(column.label || '')
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
<div className="flex items-center justify-center" style={{ width: '60px', flexShrink: 0 }}>
|
||||||
|
<AddCustomColumnButton />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Task List - Scrollable content */}
|
{/* Task List Content */}
|
||||||
<div className="flex-1">
|
<div className="bg-white dark:bg-gray-900">
|
||||||
<SortableContext
|
<SortableContext
|
||||||
items={virtuosoItems
|
items={virtuosoItems
|
||||||
.filter(item => !('isAddTaskRow' in item) && !item.parent_task_id)
|
.filter(item => !('isAddTaskRow' in item) && !item.parent_task_id)
|
||||||
@@ -1343,7 +1384,7 @@ const TaskListV2: React.FC = () => {
|
|||||||
strategy={verticalListSortingStrategy}
|
strategy={verticalListSortingStrategy}
|
||||||
>
|
>
|
||||||
<GroupedVirtuoso
|
<GroupedVirtuoso
|
||||||
style={{ height: 'calc(100vh - 150px)' }}
|
style={{ height: '550px' }}
|
||||||
groupCounts={virtuosoGroupCounts}
|
groupCounts={virtuosoGroupCounts}
|
||||||
groupContent={renderGroup}
|
groupContent={renderGroup}
|
||||||
itemContent={renderTask}
|
itemContent={renderTask}
|
||||||
@@ -1386,25 +1427,27 @@ const TaskListV2: React.FC = () => {
|
|||||||
) : null}
|
) : null}
|
||||||
</DragOverlay>
|
</DragOverlay>
|
||||||
|
|
||||||
{/* Bulk Action Bar */}
|
{/* Bulk Action Bar - Positioned absolutely to not affect layout */}
|
||||||
{selectedTaskIds.length > 0 && urlProjectId && (
|
{selectedTaskIds.length > 0 && urlProjectId && (
|
||||||
<OptimizedBulkActionBar
|
<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50">
|
||||||
selectedTaskIds={selectedTaskIds}
|
<OptimizedBulkActionBar
|
||||||
totalSelected={selectedTaskIds.length}
|
selectedTaskIds={selectedTaskIds}
|
||||||
projectId={urlProjectId}
|
totalSelected={selectedTaskIds.length}
|
||||||
onClearSelection={handleClearSelection}
|
projectId={urlProjectId}
|
||||||
onBulkStatusChange={handleBulkStatusChange}
|
onClearSelection={handleClearSelection}
|
||||||
onBulkPriorityChange={handleBulkPriorityChange}
|
onBulkStatusChange={handleBulkStatusChange}
|
||||||
onBulkPhaseChange={handleBulkPhaseChange}
|
onBulkPriorityChange={handleBulkPriorityChange}
|
||||||
onBulkAssignToMe={handleBulkAssignToMe}
|
onBulkPhaseChange={handleBulkPhaseChange}
|
||||||
onBulkAssignMembers={handleBulkAssignMembers}
|
onBulkAssignToMe={handleBulkAssignToMe}
|
||||||
onBulkAddLabels={handleBulkAddLabels}
|
onBulkAssignMembers={handleBulkAssignMembers}
|
||||||
onBulkArchive={handleBulkArchive}
|
onBulkAddLabels={handleBulkAddLabels}
|
||||||
onBulkDelete={handleBulkDelete}
|
onBulkArchive={handleBulkArchive}
|
||||||
onBulkDuplicate={handleBulkDuplicate}
|
onBulkDelete={handleBulkDelete}
|
||||||
onBulkExport={handleBulkExport}
|
onBulkDuplicate={handleBulkDuplicate}
|
||||||
onBulkSetDueDate={handleBulkSetDueDate}
|
onBulkExport={handleBulkExport}
|
||||||
/>
|
onBulkSetDueDate={handleBulkSetDueDate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Custom Column Modal */}
|
{/* Custom Column Modal */}
|
||||||
|
|||||||
Reference in New Issue
Block a user