julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update SwimlanesBase and TaskCard for improved layout and interaction

Browse Source 
- Changed the class names in SwimlanesBase to enhance hover effects and spacing.
- Adjusted QuickAddTask visibility and styling for better user experience.
- Increased font size and opacity in TaskCard for improved readability.
- Minor spacing adjustments in SwimlanesBase to maintain visual consistency.
This commit is contained in:
Julien Froidefond
2025-09-16 08:44:14 +02:00
parent 845d12f098
commit 470f3bfafd
2 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
components/kanban/SwimlanesBase.tsx
View File

@@ -55,9 +55,9 @@ function DroppableColumn({
}); });
return ( return (
<div ref={setNodeRef} className="min-h-[100px] space-y-2"> <div ref={setNodeRef} className="min-h-[100px] relative group/column">
<SortableContext items={tasks.map(t => t.id)} strategy={verticalListSortingStrategy}> <SortableContext items={tasks.map(t => t.id)} strategy={verticalListSortingStrategy}>
<div className="space-y-1"> <div className="space-y-3">
{tasks.map(task => ( {tasks.map(task => (
<TaskCard <TaskCard
key={task.id} key={task.id}
@@ -71,28 +71,32 @@ function DroppableColumn({
</div> </div>
</SortableContext> </SortableContext>
{/* QuickAdd pour cette colonne */} {/* QuickAdd pour cette colonne - hors du flux, apparaît au hover */}
{onCreateTask && ( {onCreateTask && (
<div className="mt-2"> <>
{showQuickAdd ? ( {showQuickAdd ? (
<QuickAddTask <div className="mt-2">
status={status} <QuickAddTask
onSubmit={onCreateTask} status={status}
onCancel={onToggleQuickAdd || (() => {})} onSubmit={onCreateTask}
swimlaneContext={swimlaneContext} onCancel={onToggleQuickAdd || (() => {})}
/> swimlaneContext={swimlaneContext}
/>
</div>
) : ( ) : (
<button <div className="h-0 flex justify-center opacity-0 group-hover/column:opacity-100 transition-opacity duration-200 pointer-events-none group-hover/column:pointer-events-auto">
onClick={onToggleQuickAdd} <button
className="w-full p-2 flex justify-center transition-colors" onClick={onToggleQuickAdd}
title="Ajouter une tâche" className="py-1 px-2 transition-colors"
> title="Ajouter une tâche"
<div className="w-5 h-5 rounded-full bg-[var(--card)] hover:bg-[var(--card-hover)] flex items-center justify-center text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-all text-sm"> >
+ <div className="w-5 h-5 rounded-full bg-[var(--card)] hover:bg-[var(--card-hover)] flex items-center justify-center text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-all text-sm shadow-lg border border-[var(--border)]/30">
</div> +
</button> </div>
</button>
</div>
)} )}
</div> </>
)} )}
</div> </div>
); );
@@ -230,7 +234,7 @@ export function SwimlanesBase({
{/* Swimlanes */} {/* Swimlanes */}
<div className="flex-1 overflow-y-auto px-6"> <div className="flex-1 overflow-y-auto px-6">
<div className="space-y-4"> <div className="space-y-3 pb-2">
{swimlanes.map(swimlane => { {swimlanes.map(swimlane => {
const isCollapsed = collapsedSwimlanes.has(swimlane.key); const isCollapsed = collapsedSwimlanes.has(swimlane.key);

4
components/kanban/TaskCard.tsx
View File

@@ -124,7 +124,7 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
{displayEmojis.slice(0, 1).map((emoji, index) => ( {displayEmojis.slice(0, 1).map((emoji, index) => (
<span <span
key={index} key={index}
className="text-sm opacity-80 font-emoji" className="text-base opacity-90 font-emoji"
style={{ style={{
fontFamily: 'Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, sans-serif', fontFamily: 'Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, sans-serif',
fontVariantEmoji: 'normal' fontVariantEmoji: 'normal'
@@ -148,7 +148,7 @@ export function TaskCard({ task, onDelete, onEdit, onUpdateTitle, compactView =
/> />
) : ( ) : (
<h4 <h4
className="font-mono text-xs font-medium text-[var(--foreground)] leading-tight line-clamp-2 flex-1 cursor-pointer hover:text-[var(--primary)] transition-colors" className="font-mono text-sm font-medium text-[var(--foreground)] leading-tight line-clamp-2 flex-1 cursor-pointer hover:text-[var(--primary)] transition-colors"
onClick={handleTitleClick} onClick={handleTitleClick}
title={onUpdateTitle ? "Cliquer pour éditer" : undefined} title={onUpdateTitle ? "Cliquer pour éditer" : undefined}
> >