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

feat: enhance EditCheckboxModal with task tags display

Browse Source 
- Updated the task status display to include tags in a flex container for better layout.
- Added logic to show up to 3 tags with a count for additional tags, improving task information visibility.
This commit is contained in:
Julien Froidefond
2025-09-26 08:17:01 +02:00
parent a3a5be96a2
commit 65a307c8ac
1 changed files with 47 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/daily/EditCheckboxModal.tsx
View File

@@ -168,13 +168,27 @@ export function EditCheckboxModal({
{selectedTask.description} {selectedTask.description}
</div> </div>
)} )}
<span className={`inline-block px-1 py-0.5 rounded text-xs mt-1 ${ <div className="flex items-center gap-2 mt-1">
selectedTask.status === 'todo' ? 'bg-blue-100 text-blue-800' : <span className={`inline-block px-1 py-0.5 rounded text-xs ${
selectedTask.status === 'in_progress' ? 'bg-yellow-100 text-yellow-800' : selectedTask.status === 'todo' ? 'bg-blue-100 text-blue-800' :
'bg-gray-100 text-gray-800' selectedTask.status === 'in_progress' ? 'bg-yellow-100 text-yellow-800' :
}`}> 'bg-gray-100 text-gray-800'
{selectedTask.status} }`}>
</span> {selectedTask.status}
</span>
{selectedTask.tags && selectedTask.tags.length > 0 && (
<div className="flex flex-wrap gap-1">
{selectedTask.tags.map((tag, index) => (
<span
key={index}
className="inline-block px-1.5 py-0.5 rounded text-xs bg-[var(--primary)]/20 text-[var(--primary)] border border-[var(--primary)]/30"
>
#{tag}
</span>
))}
</div>
)}
</div>
</div> </div>
<Button <Button
type="button" type="button"
@@ -225,13 +239,32 @@ export function EditCheckboxModal({
{task.description} {task.description}
</div> </div>
)} )}
<span className={`inline-block px-1 py-0.5 rounded text-xs mt-1 ${ <div className="flex items-center gap-2 mt-1">
task.status === 'todo' ? 'bg-blue-100 text-blue-800' : <span className={`inline-block px-1 py-0.5 rounded text-xs ${
task.status === 'in_progress' ? 'bg-yellow-100 text-yellow-800' : task.status === 'todo' ? 'bg-blue-100 text-blue-800' :
'bg-gray-100 text-gray-800' task.status === 'in_progress' ? 'bg-yellow-100 text-yellow-800' :
}`}> 'bg-gray-100 text-gray-800'
{task.status} }`}>
</span> {task.status}
</span>
{task.tags && task.tags.length > 0 && (
<div className="flex flex-wrap gap-1">
{task.tags.slice(0, 3).map((tag, index) => (
<span
key={index}
className="inline-block px-1.5 py-0.5 rounded text-xs bg-[var(--primary)]/20 text-[var(--primary)] border border-[var(--primary)]/30"
>
#{tag}
</span>
))}
{task.tags.length > 3 && (
<span className="text-xs text-[var(--muted-foreground)]">
+{task.tags.length - 3}
</span>
)}
</div>
)}
</div>
</button> </button>
)) ))
)} )}