binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: optimised issue activity and updated the popover component in issue detail and peek overview (#5208)

Browse source
This commit is contained in:
guru_sainath 2024-07-23 17:54:26 +05:30 • committed by GitHub
parent 31fe9a1a02
commit f5027f4268
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 94 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

116
web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
View file

@ -1,85 +1,59 @@
import React, { FC, Fragment } from "react";
import React, { FC } from "react";
import { observer } from "mobx-react";
import { Check, ListFilter } from "lucide-react";
import { Popover, Transition } from "@headlessui/react";
// ui
import { Button } from "@plane/ui";
import { Button, PopoverMenu } from "@plane/ui";
// helper
import { cn } from "@/helpers/common.helper";
// constants
import { TActivityFilters, ACTIVITY_FILTER_TYPE_OPTIONS } from "@/plane-web/constants/issues";
import { TActivityFilterOption, TActivityFilters } from "@/plane-web/constants/issues";
type Props = {
type TActivityFilter = {
selectedFilters: TActivityFilters[];
toggleFilter: (filter: TActivityFilters) => void;
filterOptions: TActivityFilterOption[];
};
export const ActivityFilter: FC<Props> = observer((props) => {
const { selectedFilters, toggleFilter } = props;
return (
<Popover as="div" className="relative">
{({ open }) => (
<>
<Popover.Button as={React.Fragment}>
<Button
variant="neutral-primary"
size="sm"
prependIcon={<ListFilter className="h-3 w-3" />}
className="relative"
>
<span className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>Filters</span>
</Button>
</Popover.Button>
export const ActivityFilter: FC<TActivityFilter> = observer((props) => {
const { selectedFilters = [], filterOptions } = props;
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
return (
<PopoverMenu
buttonClassName="outline-none"
button={
<Button
variant="neutral-primary"
size="sm"
prependIcon={<ListFilter className="h-3 w-3" />}
className="relative"
>
<span className="text-custom-text-200">Filters</span>
</Button>
}
panelClassName="p-2 rounded-md border border-custom-border-200 bg-custom-background-100"
data={filterOptions}
keyExtractor={(item) => item.key}
render={(item) => (
<div
key={item.key}
className="flex items-center gap-2 text-sm cursor-pointer px-2 p-1 transition-all hover:bg-custom-background-80 rounded-sm"
onClick={item.onClick}
>
<div
className={cn(
"flex-shrink-0 w-3 h-3 flex justify-center items-center rounded-sm transition-all bg-custom-background-90",
{
"bg-custom-primary text-white": item.isSelected,
"bg-custom-background-80 text-custom-text-400": item.isSelected && selectedFilters.length === 1,
"bg-custom-background-90": !item.isSelected,
}
)}
>
<Popover.Panel className="absolute mt-2 right-0 z-10 min-w-40">
<div className="p-2 rounded-md border border-custom-border-200 bg-custom-background-100">
{Object.keys(ACTIVITY_FILTER_TYPE_OPTIONS).map((key) => {
const filterKey = key as TActivityFilters;
const filter = ACTIVITY_FILTER_TYPE_OPTIONS[filterKey];
const isSelected = selectedFilters.includes(filterKey);
return (
<div
key={filterKey}
className="flex items-center gap-2 text-sm cursor-pointer px-2 p-1 transition-all hover:bg-custom-background-80 rounded-sm"
onClick={() => toggleFilter(filterKey)}
>
<div
className={cn(
"flex-shrink-0 w-3 h-3 flex justify-center items-center rounded-sm transition-all bg-custom-background-90",
{
"bg-custom-primary text-white": isSelected,
"bg-custom-background-80 text-custom-text-400": isSelected && selectedFilters.length === 1,
"bg-custom-background-90": !isSelected,
}
)}
>
{isSelected && <Check className="h-2.5 w-2.5" />}
</div>
<div
className={cn(
"whitespace-nowrap",
isSelected ? "text-custom-text-100" : "text-custom-text-200"
)}
>
{filter.label}
</div>
</div>
);
})}
</div>
</Popover.Panel>
</Transition>
</>
{item.isSelected && <Check className="h-2.5 w-2.5" />}
</div>
<div className={cn("whitespace-nowrap", item.isSelected ? "text-custom-text-100" : "text-custom-text-200")}>
{item.label}
</div>
</div>
)}
</Popover>
/>
);
});

6
web/core/components/issues/issue-detail/issue-activity/root.tsx
View file

@ -7,12 +7,12 @@ import { TIssueComment } from "@plane/types";
// ui
import { TOAST_TYPE, setToast } from "@plane/ui";
// components
import { ActivityFilter, IssueCommentCreate } from "@/components/issues";
import { IssueCommentCreate } from "@/components/issues";
import { IssueActivityCommentRoot } from "@/components/issues/issue-detail";
// hooks
import { useIssueDetail, useProject } from "@/hooks/store";
// plane web components
import { IssueActivityWorklogCreateButton } from "@/plane-web/components/issues/worklog";
import { ActivityFilterRoot, IssueActivityWorklogCreateButton } from "@/plane-web/components/issues/worklog";
// plane web constants
import { TActivityFilters, defaultActivityFilters } from "@/plane-web/constants/issues";
@ -120,7 +120,7 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
issueId={issueId}
disabled={disabled}
/>
<ActivityFilter selectedFilters={selectedFilters} toggleFilter={toggleFilter} />
<ActivityFilterRoot selectedFilters={selectedFilters} toggleFilter={toggleFilter} />
</div>
</div>