thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

[WEB-716] style: list view issues responsiveness (#3938)

Browse Source
This commit is contained in:
Ramesh Kumar Chandra 2024-03-12 12:29:00 +05:30 committed by GitHub
parent 578bd29f6f
commit 73c91654eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 45 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
web/components/issues/issue-layouts/list/block.tsx
View File

@ -44,53 +44,62 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
return (
<div
className={cn("min-h-12 relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm", {
"border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id,
"last:border-b-transparent": peekIssue?.issueId !== issue.id,
})}
className={cn(
"min-h-12 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 text-sm",
{
"border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id,
"last:border-b-transparent": peekIssue?.issueId !== issue.id,
}
)}
>
{displayProperties && displayProperties?.key && (
<div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
{projectIdentifier}-{issue.sequence_id}
<div className="flex">
<div className="flex flex-grow items-center gap-3">
{displayProperties && displayProperties?.key && (
<div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
{projectIdentifier}-{issue.sequence_id}
</div>
)}
{issue?.tempId !== undefined && (
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
)}
{issue?.is_draft ? (
<Tooltip tooltipContent={issue.name}>
<span>{issue.name}</span>
</Tooltip>
) : (
<ControlLink
href={`/${workspaceSlug}/projects/${issue.project_id}/${
issue.archived_at ? "archived-issues" : "issues"
}/${issue.id}`}
target="_blank"
onClick={() => handleIssuePeekOverview(issue)}
className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
disabled={!!issue?.tempId}
>
<Tooltip tooltipContent={issue.name}>
<span>{issue.name}</span>
</Tooltip>
</ControlLink>
)}
</div>
)}
{issue?.tempId !== undefined && (
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
)}
{issue?.is_draft ? (
<Tooltip tooltipContent={issue.name}>
<span>{issue.name}</span>
</Tooltip>
) : (
<ControlLink
href={`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archived-issues" : "issues"}/${
issue.id
}`}
target="_blank"
onClick={() => handleIssuePeekOverview(issue)}
className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
disabled={!!issue?.tempId}
>
<Tooltip tooltipContent={issue.name}>
<span>{issue.name}</span>
</Tooltip>
</ControlLink>
)}
<div className="ml-auto flex flex-shrink-0 items-center gap-2">
{!issue?.tempId && (
<div className="block md:hidden border border-custom-border-300 rounded ">{quickActions(issue)}</div>
)}
</div>
<div className="ml-0 md:ml-auto flex flex-wrap md:flex-shrink-0 items-center gap-2">
{!issue?.tempId ? (
<>
<IssueProperties
className="relative flex items-center gap-2 whitespace-nowrap"
className="relative flex flex-wrap md:flex-grow md:flex-shrink-0 items-center gap-2 whitespace-nowrap"
issue={issue}
isReadOnly={!canEditIssueProperties}
updateIssue={updateIssue}
displayProperties={displayProperties}
activeLayout="List"
/>
{quickActions(issue)}
<div className="hidden md:block">{quickActions(issue)}</div>
</>
) : (
<div className="h-4 w-4">