thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests 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">
{type && !isNotAllowed && (
<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 && (
<CustomMenu.MenuItem onClick={removeIssue}>
<>Remove from {type}</>
</CustomMenu.MenuItem>
)}
<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}>
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>
)}

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

@ -257,16 +257,29 @@ export const SingleListIssue: React.FC<Props> = ({
)}
{type && !isNotAllowed && (
<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 && (
<CustomMenu.MenuItem onClick={removeIssue}>
<>Remove from {type}</>
</CustomMenu.MenuItem>
)}
<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 onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
</CustomMenu>
)}
</div>

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

@ -15,10 +15,10 @@ import {
ChartPieIcon,
ArrowLongRightIcon,
TrashIcon,
DocumentDuplicateIcon,
UserCircleIcon,
ChevronDownIcon,
DocumentIcon,
LinkIcon,
} from "@heroicons/react/24/outline";
// ui
import { CustomMenu, Loader, ProgressBar } from "components/ui";
@ -295,7 +295,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<CustomMenu width="lg" ellipsis>
<CustomMenu.MenuItem onClick={handleCopyText}>
<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>
</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 {
ChevronDownIcon,
DocumentDuplicateIcon,
LinkIcon,
PencilIcon,
StarIcon,
TrashIcon,
@ -318,7 +318,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
)}
<CustomMenu.MenuItem onClick={handleCopyText}>
<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>
</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 { copyTextToClipboard, truncateText } from "helpers/string.helper";
import useToast from "hooks/use-toast";
import { LinkIcon } from "@heroicons/react/24/outline";
type Props = {
issue: IIssue;
@ -167,7 +168,12 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
</Tooltip>
)}
<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>
</div>
</div>

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

@ -12,7 +12,6 @@ import {
CalendarDaysIcon,
ChartPieIcon,
ChevronDownIcon,
DocumentDuplicateIcon,
DocumentIcon,
PlusIcon,
TrashIcon,
@ -41,6 +40,7 @@ import { IIssue, IModule, ModuleLink, UserAuth } from "types";
import { MODULE_DETAILS } from "constants/fetch-keys";
// constant
import { MODULE_STATUS } from "constants/module";
import { LinkIcon } from "@heroicons/react/20/solid";
const defaultValues: Partial<IModule> = {
lead: "",
@ -334,7 +334,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
<CustomMenu width="lg" ellipsis>
<CustomMenu.MenuItem onClick={handleCopyText}>
<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>
</CustomMenu.MenuItem>

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

@ -14,12 +14,7 @@ import { DeleteModuleModal } from "components/modules";
// ui
import { AssigneesList, Avatar, CustomMenu, Tooltip } from "components/ui";
// icons
import {
DocumentDuplicateIcon,
PencilIcon,
StarIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
import { CalendarMonthIcon, TargetIcon } from "components/icons";
// helpers
@ -127,14 +122,14 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
setIsOpen={setModuleDeleteModal}
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="flex w-full flex-col gap-5">
<div className="flex items-start justify-between gap-2">
<Tooltip tooltipContent={module.name} position="top-left">
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
<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)}
</h3>
</a>
@ -142,7 +137,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
</Tooltip>
<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>
</div>
{module.is_favorite ? (
@ -157,20 +152,20 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
<CustomMenu width="auto" verticalEllipsis>
<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" />
<span>Edit Module</span>
</span>
</CustomMenu.MenuItem>
<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" />
<span>Delete Module</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2 text-gray-800">
<DocumentDuplicateIcon className="h-4 w-4" />
<span className="flex items-center justify-start gap-2 text-gray-700">
<LinkIcon className="h-4 w-4" />
<span>Copy Module Link</span>
</span>
</CustomMenu.MenuItem>
@ -191,7 +186,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
</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">
<span>Progress</span>
<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>
<span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span>
</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]">
Last updated:
<span className="text-black font-medium">
{renderShortDateWithYearFormat(lastUpdated)}
</span>
<span className="font-medium text-black">
{renderShortDateWithYearFormat(lastUpdated)}
</span>
</p>
{
module.members_detail.length>0 &&
{module.members_detail.length > 0 && (
<div className="flex items-center gap-1">
<AssigneesList users={module.members_detail} length={4} />
</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
import { CustomMenu, Loader, Tooltip } from "components/ui";
// icons
import { CalendarDaysIcon, PencilIcon, PlusIcon } from "@heroicons/react/24/outline";
import { StarIcon } from "@heroicons/react/20/solid";
import {
CalendarDaysIcon,
LinkIcon,
PencilIcon,
PlusIcon,
StarIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
// helpers
import { renderShortNumericDateFormat } from "helpers/date-time.helper";
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@ -213,20 +219,32 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
<CustomMenu width="auto" verticalEllipsis>
{isOwner && (
<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>
)}
{project.is_favorite ? (
<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 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 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>
</div>

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

@ -6,7 +6,12 @@ import { Disclosure, Transition } from "@headlessui/react";
// ui
import { CustomMenu } from "components/ui";
// icons
import { ChevronDownIcon, DocumentTextIcon } from "@heroicons/react/24/outline";
import {
ChevronDownIcon,
DocumentTextIcon,
StarIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
import {
ContrastIcon,
LayerDiagonalIcon,
@ -111,20 +116,32 @@ export const SingleSidebarProject: React.FC<Props> = ({
{!sidebarCollapse && (
<CustomMenu ellipsis>
<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>
{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>
)}
{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 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>
)}