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 groupBy = useSelector((state: RootState) => state.enhancedKanbanReducer.groupBy);
const project = useAppSelector((state: RootState) => state.projectReducer.project); const project = useAppSelector((state: RootState) => state.projectReducer.project);
const { statusCategories, status: existingStatuses } = useAppSelector((state) => state.taskStatusReducer); const { statusCategories, status: existingStatuses } = useAppSelector((state) => state.taskStatusReducer);
const themeMode = useAppSelector(state => state.themeReducer.mode);
// Load filter data // Load filter data
useFilterDataLoader(); useFilterDataLoader();
@@ -441,18 +442,42 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
<DragOverlay> <DragOverlay>
{activeTask && ( {activeTask && (
<EnhancedKanbanTaskCard <div
task={activeTask} style={{
sectionId={activeTask.status_id || ''} background: themeMode === 'dark' ? '#23272f' : '#fff',
isDragOverlay={true} 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 && ( {activeGroup && (
<div className="group-drag-overlay"> <div
<div className="group-header-content"> style={{
<h3>{activeGroup.name}</h3> background: themeMode === 'dark' ? '#23272f' : '#fff',
<span className="task-count">({activeGroup.tasks.length})</span> borderRadius: 8,
</div> 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> </div>
)} )}
</DragOverlay> </DragOverlay>

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

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