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

refactor(task-list): adjust subtask indentation for improved visual hierarchy

Browse Source 
- Reduced spacing for level 1 subtasks and increased spacing for deeper levels in TaskRowWithSubtasks and TitleColumn components.
- Enhanced comments to clarify indentation logic for better maintainability.
This commit is contained in:
chamikaJ
2025-07-14 12:37:54 +05:30
parent 1c981312d4
commit 3d67145af7
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
worklenz-frontend/src/components/task-list-v2/TaskRowWithSubtasks.tsx
View File

@@ -139,13 +139,13 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
return (
<div className="flex items-center h-full" style={baseStyle}>
<div className="flex items-center w-full h-full">
{/* Match subtask indentation pattern - tighter spacing */}
<div className="w-3" />
{/* Add additional indentation for deeper levels - 16px per level */}
{Array.from({ length: depth }).map((_, i) => (
<div key={i} className="w-4" />
))}
{/* Match subtask indentation pattern - reduced spacing for level 1 */}
<div className="w-2" />
{/* Add additional indentation for deeper levels - increased spacing for level 2+ */}
{Array.from({ length: depth }).map((_, i) => (
<div key={i} className="w-6" />
))}
<div className="w-1" />
{isActive ? (
!isAdding ? (

12
worklenz-frontend/src/components/task-list-v2/components/TitleColumn.tsx
View File

@@ -152,12 +152,12 @@ export const TitleColumn: React.FC<TitleColumnProps> = memo(({
/* Normal layout when not editing */
<>
<div className="flex items-center flex-1 min-w-0">
{/* Indentation for subtasks - tighter spacing */}
{isSubtask && <div className="w-3 flex-shrink-0" />}
{/* Indentation for subtasks - reduced spacing for level 1 */}
{isSubtask && <div className="w-2 flex-shrink-0" />}
{/* Additional indentation for deeper levels - 16px per level */}
{/* Additional indentation for deeper levels - increased spacing for level 2+ */}
{Array.from({ length: depth }).map((_, i) => (
<div key={i} className="w-4 flex-shrink-0" />
<div key={i} className="w-6 flex-shrink-0" />
))}
{/* Expand/Collapse button - show for any task that can have sub-tasks */}
@@ -182,8 +182,8 @@ export const TitleColumn: React.FC<TitleColumnProps> = memo(({
</button>
)}
{/* Additional indentation for subtasks after the expand button space */}
{isSubtask && <div className="w-2 flex-shrink-0" />}
{/* Additional indentation for subtasks after the expand button space - reduced for level 1 */}
{isSubtask && <div className="w-1 flex-shrink-0" />}
<div className="flex items-center gap-2 flex-1 min-w-0">
{/* Task name with dynamic width */}