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

refactor(task-management): improve layout and styling for TaskGroup and TaskRow components

Browse Source 
- Updated TaskGroup and TaskRow to enhance column widths and visibility.
- Adjusted styling for task headers and buttons for better user experience.
- Improved overflow handling and responsiveness in task management components.
- Streamlined CSS for consistency across task-related components.
This commit is contained in:
chamiakJ
2025-06-20 07:33:14 +05:30
parent 4e1c6fb333
commit c1e6689beb
3 changed files with 79 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
worklenz-frontend/src/components/task-management/TaskGroup.tsx
View File

@@ -106,15 +106,18 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
{/* Group Header Row */}
<div className="task-group-header">
<div className="task-group-header-row">
<div className="flex items-center p-3">
<div
className="task-group-header-content"
style={{ backgroundColor: getGroupColor() }}
>
<Button
type="text"
size="small"
icon={isCollapsed ? <RightOutlined /> : <DownOutlined />}
onClick={handleToggleCollapse}
className="p-0 w-6 h-6 flex items-center justify-center mr-2"
className="task-group-header-button"
/>
<Text strong className="text-sm">
<Text strong className="task-group-header-text">
{group.name} ({totalTasks})
</Text>
</div>
@@ -137,7 +140,7 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
<div className="task-table-cell task-table-header-cell" style={{ width: '80px' }}>
<Text className="column-header-text">Key</Text>
</div>
<div className="task-table-cell task-table-header-cell" style={{ width: '220px' }}>
<div className="task-table-cell task-table-header-cell" style={{ width: '475px' }}>
<Text className="column-header-text">Task</Text>
</div>
</div>
@@ -233,8 +236,10 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
margin-bottom: 16px;
background: var(--task-bg-primary, white);
box-shadow: 0 1px 3px var(--task-shadow, rgba(0, 0, 0, 0.1));
overflow: hidden;
overflow-x: auto;
overflow-y: visible;
transition: all 0.3s ease;
position: relative;
}
.task-group:last-child {
@@ -242,18 +247,54 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
}
.task-group-header {
background: var(--task-bg-tertiary, #f8f9fa);
border-bottom: 1px solid var(--task-border-primary, #e8e8e8);
background: var(--task-bg-primary, white);
transition: background-color 0.3s ease;
}
.task-group-header-row {
display: flex;
height: 40px;
max-height: 40px;
display: inline-flex;
height: auto;
max-height: none;
overflow: hidden;
}
.task-group-header-content {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 6px;
background-color: #f0f0f0;
color: white;
font-weight: 500;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.task-group-header-button {
color: white !important;
padding: 0 !important;
width: 16px !important;
height: 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-right: 8px !important;
border: none !important;
background: transparent !important;
}
.task-group-header-button:hover {
background: rgba(255, 255, 255, 0.2) !important;
border-radius: 2px !important;
}
.task-group-header-text {
color: white !important;
font-size: 13px !important;
font-weight: 600 !important;
margin: 0 !important;
}
.task-group-progress {
display: flex;
height: 20px;
@@ -273,7 +314,9 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
display: flex;
height: 40px;
max-height: 40px;
overflow: hidden;
overflow: visible;
position: relative;
min-width: 1200px; /* Ensure minimum width for all columns */
}
.task-table-header-cell {
@@ -301,6 +344,8 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
.task-group-body {
background: var(--task-bg-primary, white);
transition: background-color 0.3s ease;
overflow: visible;
position: relative;
}
.task-group-empty {
@@ -314,6 +359,8 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
.task-group-tasks {
background: var(--task-bg-primary, white);
transition: background-color 0.3s ease;
overflow: visible;
position: relative;
}
.task-group-add-task {
@@ -333,17 +380,19 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
.task-table-fixed-columns {
display: flex;
background: inherit;
background: var(--task-bg-secondary, #f5f5f5);
position: sticky;
left: 0;
z-index: 9;
border-right: 1px solid var(--task-border-secondary, #f0f0f0);
transition: border-color 0.3s ease;
z-index: 11;
border-right: 2px solid var(--task-border-primary, #e8e8e8);
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.task-table-scrollable-columns {
display: flex;
overflow-x: auto;
flex: 1;
min-width: 0;
}
.task-table-cell {

4
worklenz-frontend/src/components/task-management/TaskListBoard.tsx
View File

@@ -300,16 +300,18 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
<style>{`
.task-groups-container {
overflow-x: auto;
max-height: calc(100vh - 300px);
overflow-y: auto;
overflow-x: visible;
padding: 8px 8px 8px 0;
border-radius: 8px;
transition: background-color 0.3s ease;
position: relative;
}
.task-groups {
min-width: fit-content;
position: relative;
}
/* Dark mode support */

18
worklenz-frontend/src/components/task-management/TaskRow.tsx
View File

@@ -140,7 +140,7 @@ const TaskRow: React.FC<TaskRowProps> = ({
</div>
{/* Task Name */}
<div className="task-table-cell task-table-cell-task" style={{ width: '220px' }}>
<div className="task-table-cell task-table-cell-task" style={{ width: '475px' }}>
<div className="task-content">
<div className="task-header">
<Text
@@ -340,22 +340,26 @@ const TaskRow: React.FC<TaskRowProps> = ({
display: flex;
height: 40px;
max-height: 40px;
overflow: hidden;
overflow: visible;
position: relative;
min-width: 1200px; /* Ensure minimum width for all columns */
}
.task-table-fixed-columns {
display: flex;
background: inherit;
background: var(--task-bg-primary, white);
position: sticky;
left: 0;
z-index: 8;
border-right: 1px solid var(--task-border-secondary, #f0f0f0);
transition: border-color 0.3s ease;
z-index: 10;
border-right: 2px solid var(--task-border-primary, #e8e8e8);
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.task-table-scrollable-columns {
display: flex;
overflow-x: auto;
flex: 1;
min-width: 0;
}
.task-table-cell {