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

17
components/kanban/KanbanFilters.tsx
View File

@@ -277,18 +277,20 @@ 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">
{/* Grille responsive pour les filtres */}
<div className="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-6 lg:gap-8">
{/* Filtres par priorité */} {/* Filtres par priorité */}
<div className="space-y-2"> <div className="space-y-3">
<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">
Priorités Priorités
</label> </label>
<div className="flex flex-wrap gap-2"> <div className="grid grid-cols-2 gap-2">
{priorityOptions.map((priority) => ( {priorityOptions.map((priority) => (
<button <button
key={priority.value} key={priority.value}
onClick={() => handlePriorityToggle(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 ${ className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all text-xs font-medium whitespace-nowrap ${
filters.priorities?.includes(priority.value) 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'
@@ -306,16 +308,16 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
{/* Filtres par tags */} {/* Filtres par tags */}
{availableTags.length > 0 && ( {availableTags.length > 0 && (
<div className="space-y-2"> <div className="space-y-3">
<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 Tags
</label> </label>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
{sortedTags.map((tag) => ( {sortedTags.map((tag) => (
<button <button
key={tag.id} key={tag.id}
onClick={() => handleTagToggle(tag.name)} onClick={() => handleTagToggle(tag.name)}
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 ${
filters.tags?.includes(tag.name) filters.tags?.includes(tag.name)
? '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'
@@ -331,6 +333,7 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
</div> </div>
</div> </div>
)} )}
</div>
{/* Résumé des filtres actifs */} {/* Résumé des filtres actifs */}
{activeFiltersCount > 0 && ( {activeFiltersCount > 0 && (