feat: issue highlighting (#3514)

* chore: kanban issue highlight

* chore: issue highlighting added
This commit is contained in:
Anmol Singh Bhatia 2024-01-30 20:12:39 +05:30 committed by GitHub
parent 817737b2c0
commit 888665783e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 89 additions and 22 deletions

View file

@ -12,6 +12,8 @@ import { ControlLink, Tooltip } from "@plane/ui";
// hooks
import useOutsideClickDetector from "hooks/use-outside-click-detector";
import { useIssueDetail, useProject } from "hooks/store";
// helper
import { cn } from "helpers/common.helper";
// types
import { IIssueDisplayProperties, TIssue } from "@plane/types";
import { EIssueActions } from "../types";
@ -48,7 +50,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
const { workspaceSlug } = router.query;
//hooks
const { getProjectById } = useProject();
const { setPeekIssue } = useIssueDetail();
const { peekIssue, setPeekIssue } = useIssueDetail();
// states
const [isMenuActive, setIsMenuActive] = useState(false);
const [isExpanded, setExpanded] = useState<boolean>(false);
@ -95,9 +97,20 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
return (
<>
<tr>
<tr
className={cn({
"border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issueDetail.id,
})}
>
{/* first column/ issue name and key column */}
<td className="sticky group left-0 h-11 w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-l-0 after:border-custom-border-100 before:absolute before:h-full before:right-0 before:border before:border-l-0 before:border-custom-border-100">
<td
className={cn(
"sticky group left-0 h-11 w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] border-custom-border-200",
{
"border-b-[0.5px]": peekIssue?.issueId !== issueDetail.id,
}
)}
>
<WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
<div
className="flex min-w-min items-center gap-1.5 px-4 py-2.5 pr-0"