mirror of
https://github.com/hex248/sprint.git
synced 2026-02-07 18:23:03 +00:00
use a grid for the assignees
This commit is contained in:
@@ -36,7 +36,7 @@ export function IssuesTable({
|
|||||||
{issuesData.map((issueData) => (
|
{issuesData.map((issueData) => (
|
||||||
<TableRow
|
<TableRow
|
||||||
key={issueData.Issue.id}
|
key={issueData.Issue.id}
|
||||||
className="cursor-pointer"
|
className="cursor-pointer max-w-full"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
issueSelectAction?.(issueData);
|
issueSelectAction?.(issueData);
|
||||||
}}
|
}}
|
||||||
@@ -48,7 +48,7 @@ export function IssuesTable({
|
|||||||
)}
|
)}
|
||||||
{(columns.title == null || columns.title === true) && (
|
{(columns.title == null || columns.title === true) && (
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<span className="flex items-center gap-2 max-w-full truncate">
|
<span className="flex items-center gap-2 truncate">
|
||||||
{(columns.status == null || columns.status === true) && (
|
{(columns.status == null || columns.status === true) && (
|
||||||
<StatusTag
|
<StatusTag
|
||||||
status={issueData.Issue.status}
|
status={issueData.Issue.status}
|
||||||
@@ -73,11 +73,11 @@ export function IssuesTable({
|
|||||||
username={assignee.username}
|
username={assignee.username}
|
||||||
avatarURL={assignee.avatarURL}
|
avatarURL={assignee.avatarURL}
|
||||||
textClass="text-xs"
|
textClass="text-xs"
|
||||||
className="ring-2 ring-background"
|
className="ring-1 ring-background"
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
{issueData.Assignees.length > 3 && (
|
{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-2 ring-background">
|
<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">
|
||||||
+{issueData.Assignees.length - 3}
|
+{issueData.Assignees.length - 3}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -49,8 +49,9 @@ export function MultiAssigneeSelect({
|
|||||||
const canAddMore = selectedCount < users.length && lastRowHasSelection;
|
const canAddMore = selectedCount < users.length && lastRowHasSelection;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-1">
|
<div className="grid grid-cols-2 gap-1">
|
||||||
{assigneeIds.map((assigneeId, index) => (
|
{assigneeIds.map((assigneeId, index) => (
|
||||||
|
<>
|
||||||
<div key={`assignee-${index}-${assigneeId}`} className="flex items-center gap-1">
|
<div key={`assignee-${index}-${assigneeId}`} className="flex items-center gap-1">
|
||||||
<UserSelect
|
<UserSelect
|
||||||
users={getAvailableUsers(index)}
|
users={getAvailableUsers(index)}
|
||||||
@@ -58,18 +59,19 @@ export function MultiAssigneeSelect({
|
|||||||
onChange={(value) => handleAssigneeChange(index, value)}
|
onChange={(value) => handleAssigneeChange(index, value)}
|
||||||
fallbackUser={getFallbackUser(assigneeId)}
|
fallbackUser={getFallbackUser(assigneeId)}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
{index === assigneeIds.length - 1 && canAddMore && (
|
{index === assigneeIds.length - 1 && canAddMore && (
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="dummy"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="h-7 w-7 shrink-0"
|
className="h-7 w-7 shrink-0 h-9"
|
||||||
onClick={handleAddAssignee}
|
onClick={handleAddAssignee}
|
||||||
title="Add assignee"
|
title="Add assignee"
|
||||||
>
|
>
|
||||||
<Plus className="h-4 w-4" />
|
<Plus className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user