github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add icons to dropdown and replace link icon (#630)

Browse Source
This commit is contained in:
Saheb Giri 2023-03-30 20:45:15 +05:30 committed by GitHub
parent 73c7b1bddc
commit a8a5873d88
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 104 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/app/components/core/board-view/single-issue.tsx
View File

@ -225,17 +225,28 @@ export const SingleBoardIssue: React.FC<Props> = ({
<div className="z-1 absolute top-1.5 right-1.5 opacity-0 group-hover/card:opacity-100"> <div className="z-1 absolute top-1.5 right-1.5 opacity-0 group-hover/card:opacity-100">
{type && !isNotAllowed && ( {type && !isNotAllowed && (
<CustomMenu width="auto" ellipsis> <CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem> <CustomMenu.MenuItem onClick={editIssue}>
<span className="flex items-center justify-start gap-2 text-gray-700">
<PencilIcon className="h-4 w-4" />
<span>Edit issue</span>
</span>
</CustomMenu.MenuItem>
{type !== "issue" && removeIssue && ( {type !== "issue" && removeIssue && (
<CustomMenu.MenuItem onClick={removeIssue}> <CustomMenu.MenuItem onClick={removeIssue}>
<>Remove from {type}</> <>Remove from {type}</>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
)} )}
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}> <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
Delete issue <span className="flex items-center justify-start gap-2 text-gray-700">
<TrashIcon className="h-4 w-4" />
<span>Delete issue</span>
</span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleCopyText}> <CustomMenu.MenuItem onClick={handleCopyText}>
Copy issue link <span className="flex items-center justify-start gap-2 text-gray-700">
<LinkIcon className="h-4 w-4" />
<span>Copy issue Link</span>
</span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
</CustomMenu> </CustomMenu>
)} )}

19
apps/app/components/core/list-view/single-issue.tsx
View File

@ -257,16 +257,29 @@ export const SingleListIssue: React.FC<Props> = ({
)} )}
{type && !isNotAllowed && ( {type && !isNotAllowed && (
<CustomMenu width="auto" ellipsis> <CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem> <CustomMenu.MenuItem onClick={editIssue}>
<span className="flex items-center justify-start gap-2 text-gray-700">
<PencilIcon className="h-4 w-4" />
<span>Edit issue</span>
</span>
</CustomMenu.MenuItem>
{type !== "issue" && removeIssue && ( {type !== "issue" && removeIssue && (
<CustomMenu.MenuItem onClick={removeIssue}> <CustomMenu.MenuItem onClick={removeIssue}>
<>Remove from {type}</> <>Remove from {type}</>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
)} )}
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}> <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
Delete issue <span className="flex items-center justify-start gap-2 text-gray-700">
<TrashIcon className="h-4 w-4" />
<span>Delete issue</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2 text-gray-700">
<LinkIcon className="h-4 w-4" />
<span>Copy issue link</span>
</span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
</CustomMenu> </CustomMenu>
)} )}
</div> </div>

4
apps/app/components/cycles/sidebar.tsx
View File

@ -15,10 +15,10 @@ import {
ChartPieIcon, ChartPieIcon,
ArrowLongRightIcon, ArrowLongRightIcon,
TrashIcon, TrashIcon,
DocumentDuplicateIcon,
UserCircleIcon, UserCircleIcon,
ChevronDownIcon, ChevronDownIcon,
DocumentIcon, DocumentIcon,
LinkIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
// ui // ui
import { CustomMenu, Loader, ProgressBar } from "components/ui"; import { CustomMenu, Loader, ProgressBar } from "components/ui";
@ -295,7 +295,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<CustomMenu width="lg" ellipsis> <CustomMenu width="lg" ellipsis>
<CustomMenu.MenuItem onClick={handleCopyText}> <CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2 text-gray-800"> <span className="flex items-center justify-start gap-2 text-gray-800">
<DocumentDuplicateIcon className="h-4 w-4" /> <LinkIcon className="h-4 w-4" />
<span>Copy Link</span> <span>Copy Link</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>

4
apps/app/components/cycles/single-cycle-card.tsx
View File

@ -18,7 +18,7 @@ import { CalendarDaysIcon } from "@heroicons/react/20/solid";
import { TargetIcon } from "components/icons"; import { TargetIcon } from "components/icons";
import { import {
ChevronDownIcon, ChevronDownIcon,
DocumentDuplicateIcon, LinkIcon,
PencilIcon, PencilIcon,
StarIcon, StarIcon,
TrashIcon, TrashIcon,
@ -318,7 +318,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
)} )}
<CustomMenu.MenuItem onClick={handleCopyText}> <CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2 text-gray-800"> <span className="flex items-center justify-start gap-2 text-gray-800">
<DocumentDuplicateIcon className="h-4 w-4" /> <LinkIcon className="h-4 w-4" />
<span>Copy Cycle Link</span> <span>Copy Cycle Link</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>

8
apps/app/components/issues/my-issues-list-item.tsx
View File

@ -22,6 +22,7 @@ import { IIssue, Properties } from "types";
import { USER_ISSUE } from "constants/fetch-keys"; import { USER_ISSUE } from "constants/fetch-keys";
import { copyTextToClipboard, truncateText } from "helpers/string.helper"; import { copyTextToClipboard, truncateText } from "helpers/string.helper";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import { LinkIcon } from "@heroicons/react/24/outline";
type Props = { type Props = {
issue: IIssue; issue: IIssue;
@ -167,7 +168,12 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
</Tooltip> </Tooltip>
)} )}
<CustomMenu width="auto" ellipsis> <CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem> <CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2 text-gray-700">
<LinkIcon className="h-4 w-4" />
<span>Copy issue link</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu> </CustomMenu>
</div> </div>
</div> </div>

4
apps/app/components/modules/sidebar.tsx
View File

@ -12,7 +12,6 @@ import {
CalendarDaysIcon, CalendarDaysIcon,
ChartPieIcon, ChartPieIcon,
ChevronDownIcon, ChevronDownIcon,
DocumentDuplicateIcon,
DocumentIcon, DocumentIcon,
PlusIcon, PlusIcon,
TrashIcon, TrashIcon,
@ -41,6 +40,7 @@ import { IIssue, IModule, ModuleLink, UserAuth } from "types";
import { MODULE_DETAILS } from "constants/fetch-keys"; import { MODULE_DETAILS } from "constants/fetch-keys";
// constant // constant
import { MODULE_STATUS } from "constants/module"; import { MODULE_STATUS } from "constants/module";
import { LinkIcon } from "@heroicons/react/20/solid";
const defaultValues: Partial<IModule> = { const defaultValues: Partial<IModule> = {
lead: "", lead: "",
@ -334,7 +334,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
<CustomMenu width="lg" ellipsis> <CustomMenu width="lg" ellipsis>
<CustomMenu.MenuItem onClick={handleCopyText}> <CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2 text-gray-800"> <span className="flex items-center justify-start gap-2 text-gray-800">
<DocumentDuplicateIcon className="h-4 w-4" /> <LinkIcon className="h-4 w-4" />
<span>Copy Link</span> <span>Copy Link</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>

36
apps/app/components/modules/single-module-card.tsx
View File

@ -14,12 +14,7 @@ import { DeleteModuleModal } from "components/modules";
// ui // ui
import { AssigneesList, Avatar, CustomMenu, Tooltip } from "components/ui"; import { AssigneesList, Avatar, CustomMenu, Tooltip } from "components/ui";
// icons // icons
import { import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
DocumentDuplicateIcon,
PencilIcon,
StarIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
import { CalendarMonthIcon, TargetIcon } from "components/icons"; import { CalendarMonthIcon, TargetIcon } from "components/icons";
// helpers // helpers
@ -127,14 +122,14 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
setIsOpen={setModuleDeleteModal} setIsOpen={setModuleDeleteModal}
data={module} data={module}
/> />
<div className="flex flex-col overflow-hidden rounded-[10px] divide-y border bg-white text-xs"> <div className="flex flex-col divide-y overflow-hidden rounded-[10px] border bg-white text-xs">
<div className="p-4"> <div className="p-4">
<div className="flex w-full flex-col gap-5"> <div className="flex w-full flex-col gap-5">
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
<Tooltip tooltipContent={module.name} position="top-left"> <Tooltip tooltipContent={module.name} position="top-left">
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}> <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
<a className="w-auto max-w-[calc(100%-9rem)]"> <a className="w-auto max-w-[calc(100%-9rem)]">
<h3 className="break-all text-lg truncate font-semibold text-black"> <h3 className="truncate break-all text-lg font-semibold text-black">
{truncateText(module.name, 75)} {truncateText(module.name, 75)}
</h3> </h3>
</a> </a>
@ -142,7 +137,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
</Tooltip> </Tooltip>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<div className="mr-2 rounded flex bg-gray-100 px-2.5 py-2 whitespace-nowrap"> <div className="mr-2 flex whitespace-nowrap rounded bg-gray-100 px-2.5 py-2">
<span className="capitalize">{module?.status?.replace("-", " ")}</span> <span className="capitalize">{module?.status?.replace("-", " ")}</span>
</div> </div>
{module.is_favorite ? ( {module.is_favorite ? (
@ -157,20 +152,20 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
<CustomMenu width="auto" verticalEllipsis> <CustomMenu width="auto" verticalEllipsis>
<CustomMenu.MenuItem onClick={handleEditModule}> <CustomMenu.MenuItem onClick={handleEditModule}>
<span className="flex items-center justify-start gap-2 text-gray-800"> <span className="flex items-center justify-start gap-2 text-gray-700">
<PencilIcon className="h-4 w-4" /> <PencilIcon className="h-4 w-4" />
<span>Edit Module</span> <span>Edit Module</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleDeleteModule}> <CustomMenu.MenuItem onClick={handleDeleteModule}>
<span className="flex items-center justify-start gap-2 text-gray-800"> <span className="flex items-center justify-start gap-2 text-gray-700">
<TrashIcon className="h-4 w-4" /> <TrashIcon className="h-4 w-4" />
<span>Delete Module</span> <span>Delete Module</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleCopyText}> <CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2 text-gray-800"> <span className="flex items-center justify-start gap-2 text-gray-700">
<DocumentDuplicateIcon className="h-4 w-4" /> <LinkIcon className="h-4 w-4" />
<span>Copy Module Link</span> <span>Copy Module Link</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
@ -191,7 +186,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
</div> </div>
</div> </div>
</div> </div>
<div className="flex flex-col items-end h-20"> <div className="flex h-20 flex-col items-end">
<div className="flex w-full items-center justify-between gap-2 justify-self-end bg-gray-100 p-4"> <div className="flex w-full items-center justify-between gap-2 justify-self-end bg-gray-100 p-4">
<span>Progress</span> <span>Progress</span>
<div className="bar relative h-1 w-full rounded bg-gray-300"> <div className="bar relative h-1 w-full rounded bg-gray-300">
@ -204,19 +199,18 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
</div> </div>
<span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span> <span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span>
</div> </div>
<div className="flex justify-between w-full h-full px-4 pb-4 bg-gray-100 item-center"> <div className="item-center flex h-full w-full justify-between bg-gray-100 px-4 pb-4">
<p className="text-[#858E96]"> <p className="text-[#858E96]">
Last updated: Last updated:
<span className="text-black font-medium"> <span className="font-medium text-black">
{renderShortDateWithYearFormat(lastUpdated)} {renderShortDateWithYearFormat(lastUpdated)}
</span> </span>
</p> </p>
{ {module.members_detail.length > 0 && (
module.members_detail.length>0 &&
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<AssigneesList users={module.members_detail} length={4} /> <AssigneesList users={module.members_detail} length={4} />
</div> </div>
} )}
</div> </div>
</div> </div>
</div> </div>

30
apps/app/components/project/single-project-card.tsx
View File

@ -14,8 +14,14 @@ import useToast from "hooks/use-toast";
// ui // ui
import { CustomMenu, Loader, Tooltip } from "components/ui"; import { CustomMenu, Loader, Tooltip } from "components/ui";
// icons // icons
import { CalendarDaysIcon, PencilIcon, PlusIcon } from "@heroicons/react/24/outline"; import {
import { StarIcon } from "@heroicons/react/20/solid"; CalendarDaysIcon,
LinkIcon,
PencilIcon,
PlusIcon,
StarIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
// helpers // helpers
import { renderShortNumericDateFormat } from "helpers/date-time.helper"; import { renderShortNumericDateFormat } from "helpers/date-time.helper";
import { copyTextToClipboard, truncateText } from "helpers/string.helper"; import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@ -213,20 +219,32 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
<CustomMenu width="auto" verticalEllipsis> <CustomMenu width="auto" verticalEllipsis>
{isOwner && ( {isOwner && (
<CustomMenu.MenuItem onClick={() => setDeleteProject(project.id)}> <CustomMenu.MenuItem onClick={() => setDeleteProject(project.id)}>
Delete project <span className="flex items-center justify-start gap-2 text-gray-700">
<TrashIcon className="h-4 w-4" />
<span>Delete project</span>
</span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
)} )}
{project.is_favorite ? ( {project.is_favorite ? (
<CustomMenu.MenuItem onClick={handleRemoveFromFavorites}> <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
Remove from favorites <span className="flex items-center justify-start gap-2 text-gray-700">
<StarIcon className="h-4 w-4" />
<span>Remove from favorites</span>
</span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
) : ( ) : (
<CustomMenu.MenuItem onClick={handleAddToFavorites}> <CustomMenu.MenuItem onClick={handleAddToFavorites}>
Add to favorites <span className="flex items-center justify-start gap-2 text-gray-700">
<StarIcon className="h-4 w-4" />
<span>Add to favorites</span>
</span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
)} )}
<CustomMenu.MenuItem onClick={handleCopyText}> <CustomMenu.MenuItem onClick={handleCopyText}>
Copy project link <span className="flex items-center justify-start gap-2 text-gray-700">
<LinkIcon className="h-4 w-4" />
<span>Copy project link</span>
</span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
</CustomMenu> </CustomMenu>
</div> </div>

27
apps/app/components/project/single-sidebar-project.tsx
View File

@ -6,7 +6,12 @@ import { Disclosure, Transition } from "@headlessui/react";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu } from "components/ui";
// icons // icons
import { ChevronDownIcon, DocumentTextIcon } from "@heroicons/react/24/outline"; import {
ChevronDownIcon,
DocumentTextIcon,
StarIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
import { import {
ContrastIcon, ContrastIcon,
LayerDiagonalIcon, LayerDiagonalIcon,
@ -111,20 +116,32 @@ export const SingleSidebarProject: React.FC<Props> = ({
{!sidebarCollapse && ( {!sidebarCollapse && (
<CustomMenu ellipsis> <CustomMenu ellipsis>
<CustomMenu.MenuItem onClick={handleDeleteProject}> <CustomMenu.MenuItem onClick={handleDeleteProject}>
Delete project <span className="flex items-center justify-start gap-2 text-gray-700">
<TrashIcon className="h-4 w-4" />
<span>Delete project</span>
</span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
{handleAddToFavorites && ( {handleAddToFavorites && (
<CustomMenu.MenuItem onClick={handleAddToFavorites}> <CustomMenu.MenuItem onClick={handleAddToFavorites}>
Add to favorites <span className="flex items-center justify-start gap-2 text-gray-700">
<StarIcon className="h-4 w-4" />
<span>Add to favorites</span>
</span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
)} )}
{handleRemoveFromFavorites && ( {handleRemoveFromFavorites && (
<CustomMenu.MenuItem onClick={handleRemoveFromFavorites}> <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
Remove from favorites <span className="flex items-center justify-start gap-2 text-gray-700">
<StarIcon className="h-4 w-4" />
<span>Remove from favorites</span>
</span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
)} )}
<CustomMenu.MenuItem onClick={handleCopyText}> <CustomMenu.MenuItem onClick={handleCopyText}>
Copy project link <span className="flex items-center justify-start gap-2 text-gray-700">
<TrashIcon className="h-4 w-4" />
<span>Copy project link</span>
</span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
</CustomMenu> </CustomMenu>
)} )}