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

refactor: improve layout and structure of KanbanFilters

Browse Source 
- Updated the layout of the expanded filters section to use a grid system for better responsiveness.
- Enhanced the priority filter display with improved button styling and spacing.
- Maintained tag filter functionality while ensuring consistent styling and layout adjustments.
This commit is contained in:
Julien Froidefond
2025-09-15 09:15:10 +02:00
parent b8b35547aa
commit 1b97323279
1 changed files with 44 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
components/kanban/KanbanFilters.tsx
View File

@@ -277,60 +277,63 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
{/* Filtres étendus */} {/* Filtres étendus */}
{isExpanded && ( {isExpanded && (
<div className="mt-4 space-y-4 border-t border-slate-700/50 pt-4"> <div className="mt-4 border-t border-slate-700/50 pt-4">
{/* Filtres par priorité */} {/* Grille responsive pour les filtres */}
<div className="space-y-2"> <div className="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-6 lg:gap-8">
<label className="block text-xs font-mono font-medium text-slate-300 uppercase tracking-wider"> {/* Filtres par priorité */}
Priorités <div className="space-y-3">
</label>
<div className="flex flex-wrap gap-2">
{priorityOptions.map((priority) => (
<button
key={priority.value}
onClick={() => handlePriorityToggle(priority.value)}
className={`flex items-center gap-2 px-2 py-1 rounded-lg border transition-all text-xs font-medium ${
filters.priorities?.includes(priority.value)
? 'border-cyan-400 bg-cyan-400/10 text-cyan-400'
: 'border-slate-600 bg-slate-800/50 text-slate-400 hover:border-slate-500'
}`}
>
<div
className="w-2 h-2 rounded-full"
style={{ backgroundColor: getPriorityColorHex(priority.color) }}
/>
{priority.label} ({priority.count})
</button>
))}
</div>
</div>
{/* Filtres par tags */}
{availableTags.length > 0 && (
<div className="space-y-2">
<label className="block text-xs font-mono font-medium text-slate-300 uppercase tracking-wider"> <label className="block text-xs font-mono font-medium text-slate-300 uppercase tracking-wider">
Tags Priorités
</label> </label>
<div className="flex flex-wrap gap-2"> <div className="grid grid-cols-2 gap-2">
{sortedTags.map((tag) => ( {priorityOptions.map((priority) => (
<button <button
key={tag.id} key={priority.value}
onClick={() => handleTagToggle(tag.name)} onClick={() => handlePriorityToggle(priority.value)}
className={`flex items-center gap-2 px-2 py-1 rounded-lg border transition-all text-xs font-medium ${ className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all text-xs font-medium whitespace-nowrap ${
filters.tags?.includes(tag.name) filters.priorities?.includes(priority.value)
? 'border-cyan-400 bg-cyan-400/10 text-cyan-400' ? 'border-cyan-400 bg-cyan-400/10 text-cyan-400'
: 'border-slate-600 bg-slate-800/50 text-slate-400 hover:border-slate-500' : 'border-slate-600 bg-slate-800/50 text-slate-400 hover:border-slate-500'
}`} }`}
> >
<div <div
className="w-2 h-2 rounded-full" className="w-2 h-2 rounded-full"
style={{ backgroundColor: tag.color }} style={{ backgroundColor: getPriorityColorHex(priority.color) }}
/> />
{tag.name} ({tagCounts[tag.name] || 0}) {priority.label} ({priority.count})
</button> </button>
))} ))}
</div> </div>
</div> </div>
)}
{/* Filtres par tags */}
{availableTags.length > 0 && (
<div className="space-y-3">
<label className="block text-xs font-mono font-medium text-slate-300 uppercase tracking-wider">
Tags
</label>
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
{sortedTags.map((tag) => (
<button
key={tag.id}
onClick={() => handleTagToggle(tag.name)}
className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all text-xs font-medium ${
filters.tags?.includes(tag.name)
? 'border-cyan-400 bg-cyan-400/10 text-cyan-400'
: 'border-slate-600 bg-slate-800/50 text-slate-400 hover:border-slate-500'
}`}
>
<div
className="w-2 h-2 rounded-full"
style={{ backgroundColor: tag.color }}
/>
{tag.name} ({tagCounts[tag.name] || 0})
</button>
))}
</div>
</div>
)}
</div>
{/* Résumé des filtres actifs */} {/* Résumé des filtres actifs */}
{activeFiltersCount > 0 && ( {activeFiltersCount > 0 && (