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

feat(enhanced-kanban): enhance drag-and-drop overlays with theme-aware styling

Browse Source 
- Added theme mode support to the drag-and-drop overlays for tasks and groups, improving visual consistency in dark and light modes.
- Updated the display of active tasks and groups during drag operations to enhance user experience and clarity.
This commit is contained in:
shancds
2025-06-30 17:09:17 +05:30
parent b179a0274f
commit 487fb76776
2 changed files with 59 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoard.tsx
View File

@@ -71,6 +71,7 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
const groupBy = useSelector((state: RootState) => state.enhancedKanbanReducer.groupBy);
const project = useAppSelector((state: RootState) => state.projectReducer.project);
const { statusCategories, status: existingStatuses } = useAppSelector((state) => state.taskStatusReducer);
const themeMode = useAppSelector(state => state.themeReducer.mode);
// Load filter data
useFilterDataLoader();
@@ -441,18 +442,42 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
<DragOverlay>
{activeTask && (
<EnhancedKanbanTaskCard
task={activeTask}
sectionId={activeTask.status_id || ''}
isDragOverlay={true}
/>
<div
style={{
background: themeMode === 'dark' ? '#23272f' : '#fff',
borderRadius: 8,
boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
padding: '12px 20px',
minWidth: 180,
maxWidth: 340,
opacity: 0.95,
fontWeight: 600,
fontSize: 16,
color: themeMode === 'dark' ? '#fff' : '#23272f',
display: 'flex',
alignItems: 'center',
}}
>
{activeTask.name}
</div>
)}
{activeGroup && (
<div className="group-drag-overlay">
<div className="group-header-content">
<h3>{activeGroup.name}</h3>
<span className="task-count">({activeGroup.tasks.length})</span>
</div>
<div
style={{
background: themeMode === 'dark' ? '#23272f' : '#fff',
borderRadius: 8,
boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
padding: '16px 24px',
minWidth: 220,
maxWidth: 320,
display: 'flex',
alignItems: 'center',
gap: 12,
opacity: 0.95,
}}
>
<h3 style={{ margin: 0, fontWeight: 600, fontSize: 18 }}>{activeGroup.name}</h3>
<span style={{ fontSize: 15, color: '#888' }}>({activeGroup.tasks.length})</span>
</div>
)}
</DragOverlay>

50
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanGroup.tsx
View File

@@ -342,18 +342,6 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
e.stopPropagation();
}}
>
<Flex
align="center"
justify="center"
style={{
minWidth: 26,
height: 26,
borderRadius: 120,
backgroundColor: themeWiseColor('white', '#1e1e1e', themeMode),
}}
>
{group.tasks.length}
</Flex>
{isLoading && <LoadingOutlined style={{ color: colors.darkGray }} />}
{isEditable ? (
@@ -403,7 +391,7 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
e.stopPropagation();
}}
>
{name}
{name} ({group.tasks.length})
</Typography.Text>
</Tooltip>
)}
@@ -480,27 +468,35 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
<SortableContext items={taskIds} strategy={verticalListSortingStrategy}>
{group.tasks.map((task, index) => (
<React.Fragment key={task.id}>
{/* Show drop indicator before task if this is the target position */}
{shouldShowDropIndicators && overId === task.id && (
<div className="drop-preview-indicator">
<div className="drop-line"></div>
</div>
{/* Drop indicator before the card if this is the drop target */}
{overId === task.id && (
<div
style={{
height: 20,
background: themeMode === 'dark' ? '#444' : '#e0e0e0',
borderRadius: 4,
margin: '4px 0',
transition: 'background 0.2s',
}}
/>
)}
<EnhancedKanbanTaskCard
task={task}
sectionId={group.id}
isActive={task.id === activeTaskId}
isDropTarget={overId === task.id}
/>
{/* Show drop indicator after last task if dropping at the end */}
{shouldShowDropIndicators &&
index === group.tasks.length - 1 &&
overId === group.id && (
<div className="drop-preview-indicator">
<div className="drop-line"></div>
</div>
{/* Drop indicator at the end if dropping at the end of the group */}
{index === group.tasks.length - 1 && overId === group.id && (
<div
style={{
height: 12,
background: themeMode === 'dark' ? '#444' : '#e0e0e0',
borderRadius: 4,
margin: '8px 0',
transition: 'background 0.2s',
}}
/>
)}
</React.Fragment>
))}