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

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

@@ -170,12 +170,14 @@ export function IssuesTable({
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{issues.map((issueData) => ( {issues.map((issueData) => {
const isSelected = issueData.Issue.id === selectedIssueId;
return (
<TableRow <TableRow
key={issueData.Issue.id} key={issueData.Issue.id}
className={cn("cursor-pointer max-w-full")} className={cn("cursor-pointer max-w-full")}
onClick={() => { onClick={() => {
if (issueData.Issue.id === selectedIssueId) { if (isSelected) {
selectIssue(null); selectIssue(null);
return; return;
} }
@@ -186,7 +188,8 @@ export function IssuesTable({
<TableCell <TableCell
className={cn( className={cn(
"font-medium border-r text-right p-0", "font-medium border-r text-right p-0",
issueData.Issue.id === selectedIssueId && "shadow-[inset_2px_0_0_0_var(--personality)]", isSelected &&
"shadow-[inset_2px_2px_0_0_var(--personality),inset_0_-2px_0_0_var(--personality)]",
)} )}
> >
<a <a
@@ -202,9 +205,8 @@ export function IssuesTable({
<TableCell <TableCell
className={cn( className={cn(
"min-w-0 p-0", "min-w-0 p-0",
!showId && isSelected &&
issueData.Issue.id === selectedIssueId && "shadow-[inset_0_2px_0_0_var(--personality),inset_0_-2px_0_0_var(--personality)]",
"shadow-[inset_2px_0_0_0_var(--personality)]",
)} )}
> >
<a <a
@@ -222,14 +224,23 @@ export function IssuesTable({
)} )}
{selectedOrganisation?.Organisation.features.issueStatus && {selectedOrganisation?.Organisation.features.issueStatus &&
(columns.status == null || columns.status === true) && ( (columns.status == null || columns.status === true) && (
<StatusTag status={issueData.Issue.status} colour={statuses[issueData.Issue.status]} /> <StatusTag
status={issueData.Issue.status}
colour={statuses[issueData.Issue.status]}
/>
)} )}
<span className="truncate">{issueData.Issue.title}</span> <span className="truncate">{issueData.Issue.title}</span>
</a> </a>
</TableCell> </TableCell>
)} )}
{showDescription && ( {showDescription && (
<TableCell className="overflow-hidden p-0"> <TableCell
className={cn(
"overflow-hidden p-0",
isSelected &&
"shadow-[inset_0_2px_0_0_var(--personality),inset_0_-2px_0_0_var(--personality)]",
)}
>
<a <a
href={getIssueUrl(issueData.Issue.number)} href={getIssueUrl(issueData.Issue.number)}
onClick={handleLinkClick} onClick={handleLinkClick}
@@ -240,7 +251,13 @@ export function IssuesTable({
</TableCell> </TableCell>
)} )}
{showAssignee && ( {showAssignee && (
<TableCell className="h-[32px] p-0"> <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)]",
)}
>
<a <a
href={getIssueUrl(issueData.Issue.number)} href={getIssueUrl(issueData.Issue.number)}
onClick={handleLinkClick} onClick={handleLinkClick}
@@ -271,7 +288,8 @@ export function IssuesTable({
</TableCell> </TableCell>
)} )}
</TableRow> </TableRow>
))} );
})}
</TableBody> </TableBody>
</Table> </Table>
); );