ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-07 18:23:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

nicer border around selected issue in table

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-30 14:12:59 +00:00
parent 8b24a4e119
commit a00cf1c023
1 changed files with 116 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
packages/frontend/src/components/issues-table.tsx
View File

@@ -170,108 +170,126 @@ export function IssuesTable({
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{issues.map((issueData) => ( {issues.map((issueData) => {
<TableRow const isSelected = issueData.Issue.id === selectedIssueId;
key={issueData.Issue.id} return (
className={cn("cursor-pointer max-w-full")} <TableRow
onClick={() => { key={issueData.Issue.id}
if (issueData.Issue.id === selectedIssueId) { className={cn("cursor-pointer max-w-full")}
selectIssue(null); onClick={() => {
return; if (isSelected) {
} selectIssue(null);
selectIssue(issueData); return;
}} }
> selectIssue(issueData);
{showId && ( }}
<TableCell >
className={cn( {showId && (
"font-medium border-r text-right p-0", <TableCell
issueData.Issue.id === selectedIssueId && "shadow-[inset_2px_0_0_0_var(--personality)]", className={cn(
)} "font-medium border-r text-right p-0",
> isSelected &&
<a "shadow-[inset_2px_2px_0_0_var(--personality),inset_0_-2px_0_0_var(--personality)]",
href={getIssueUrl(issueData.Issue.number)} )}
onClick={handleLinkClick}
className="block w-full h-full px-2 py-1 text-inherit hover:underline decoration-transparent"
> >
{issueData.Issue.number.toString().padStart(3, "0")} <a
</a> href={getIssueUrl(issueData.Issue.number)}
</TableCell> onClick={handleLinkClick}
)} className="block w-full h-full px-2 py-1 text-inherit hover:underline decoration-transparent"
{showTitle && ( >
<TableCell {issueData.Issue.number.toString().padStart(3, "0")}
className={cn( </a>
"min-w-0 p-0", </TableCell>
!showId && )}
issueData.Issue.id === selectedIssueId && {showTitle && (
"shadow-[inset_2px_0_0_0_var(--personality)]", <TableCell
)} className={cn(
> "min-w-0 p-0",
<a isSelected &&
href={getIssueUrl(issueData.Issue.number)} "shadow-[inset_0_2px_0_0_var(--personality),inset_0_-2px_0_0_var(--personality)]",
onClick={handleLinkClick} )}
className="flex items-center gap-2 min-w-0 w-full h-full px-2 py-1 text-inherit hover:underline decoration-transparent"
> >
{selectedOrganisation?.Organisation.features.issueTypes && <a
issueTypes[issueData.Issue.type] && ( href={getIssueUrl(issueData.Issue.number)}
<Icon onClick={handleLinkClick}
icon={issueTypes[issueData.Issue.type].icon as IconName} className="flex items-center gap-2 min-w-0 w-full h-full px-2 py-1 text-inherit hover:underline decoration-transparent"
size={16} >
color={issueTypes[issueData.Issue.type].color} {selectedOrganisation?.Organisation.features.issueTypes &&
/> issueTypes[issueData.Issue.type] && (
)} <Icon
{selectedOrganisation?.Organisation.features.issueStatus && icon={issueTypes[issueData.Issue.type].icon as IconName}
(columns.status == null || columns.status === true) && ( size={16}
<StatusTag status={issueData.Issue.status} colour={statuses[issueData.Issue.status]} /> color={issueTypes[issueData.Issue.type].color}
)} />
<span className="truncate">{issueData.Issue.title}</span> )}
</a> {selectedOrganisation?.Organisation.features.issueStatus &&
</TableCell> (columns.status == null || columns.status === true) && (
)} <StatusTag
{showDescription && ( status={issueData.Issue.status}
<TableCell className="overflow-hidden p-0"> colour={statuses[issueData.Issue.status]}
<a />
href={getIssueUrl(issueData.Issue.number)} )}
onClick={handleLinkClick} <span className="truncate">{issueData.Issue.title}</span>
className="block w-full h-full px-2 py-1 text-inherit hover:underline decoration-transparent" </a>
</TableCell>
)}
{showDescription && (
<TableCell
className={cn(
"overflow-hidden p-0",
isSelected &&
"shadow-[inset_0_2px_0_0_var(--personality),inset_0_-2px_0_0_var(--personality)]",
)}
> >
{issueData.Issue.description} <a
</a> href={getIssueUrl(issueData.Issue.number)}
</TableCell> onClick={handleLinkClick}
)} className="block w-full h-full px-2 py-1 text-inherit hover:underline decoration-transparent"
{showAssignee && ( >
<TableCell className="h-[32px] p-0"> {issueData.Issue.description}
<a </a>
href={getIssueUrl(issueData.Issue.number)} </TableCell>
onClick={handleLinkClick} )}
className="flex items-center justify-end w-full h-full px-2" {showAssignee && (
<TableCell
className={cn(
"h-[32px] p-0",
isSelected &&
"shadow-[inset_0_2px_0_0_var(--personality),inset_-2px_0_0_0_var(--personality),inset_0_-2px_0_0_var(--personality)]",
)}
> >
{selectedOrganisation?.Organisation.features.issueAssigneesShownInTable && <a
issueData.Assignees && href={getIssueUrl(issueData.Issue.number)}
issueData.Assignees.length > 0 && ( onClick={handleLinkClick}
<div className="flex items-center -space-x-2 pr-1.5"> className="flex items-center justify-end w-full h-full px-2"
{issueData.Assignees.slice(0, 3).map((assignee) => ( >
<Avatar {selectedOrganisation?.Organisation.features.issueAssigneesShownInTable &&
key={assignee.id} issueData.Assignees &&
name={assignee.name} issueData.Assignees.length > 0 && (
username={assignee.username} <div className="flex items-center -space-x-2 pr-1.5">
avatarURL={assignee.avatarURL} {issueData.Assignees.slice(0, 3).map((assignee) => (
textClass="text-xs" <Avatar
className="ring-1 ring-background" key={assignee.id}
/> name={assignee.name}
))} username={assignee.username}
{issueData.Assignees.length > 3 && ( avatarURL={assignee.avatarURL}
<span className="flex items-center justify-center w-6 h-6 text-[10px] font-medium bg-muted text-muted-foreground rounded-full ring-1 ring-background"> textClass="text-xs"
+{issueData.Assignees.length - 3} className="ring-1 ring-background"
</span> />
)} ))}
</div> {issueData.Assignees.length > 3 && (
)} <span className="flex items-center justify-center w-6 h-6 text-[10px] font-medium bg-muted text-muted-foreground rounded-full ring-1 ring-background">
</a> +{issueData.Assignees.length - 3}
</TableCell> </span>
)} )}
</TableRow> </div>
))} )}
</a>
</TableCell>
)}
</TableRow>
);
})}
</TableBody> </TableBody>
</Table> </Table>
); );