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

style: ellipsis consistent style (#632)

Browse Source 
* style: ellipsis consistent style

* style: consistent ellipsis menu for module and cycle
This commit is contained in:
Anmol Singh Bhatia 2023-03-31 00:31:00 +05:30 committed by GitHub
parent 3cf2172520
commit 5d0533a44f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 48 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -226,7 +226,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
{type && !isNotAllowed && (
<CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem onClick={editIssue}>
<span className="flex items-center justify-start gap-2 text-gray-700">
<span className="flex items-center justify-start gap-2">
<PencilIcon className="h-4 w-4" />
<span>Edit issue</span>
</span>
@ -237,13 +237,13 @@ export const SingleBoardIssue: React.FC<Props> = ({
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
<span className="flex items-center justify-start gap-2 text-gray-700">
<span className="flex items-center justify-start gap-2">
<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">
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy issue Link</span>
</span>

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

@ -258,7 +258,7 @@ export const SingleListIssue: React.FC<Props> = ({
{type && !isNotAllowed && (
<CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem onClick={editIssue}>
<span className="flex items-center justify-start gap-2 text-gray-700">
<span className="flex items-center justify-start gap-2">
<PencilIcon className="h-4 w-4" />
<span>Edit issue</span>
</span>
@ -269,13 +269,13 @@ export const SingleListIssue: React.FC<Props> = ({
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
<span className="flex items-center justify-start gap-2 text-gray-700">
<span className="flex items-center justify-start gap-2">
<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">
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy issue link</span>
</span>

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

@ -293,20 +293,20 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<div className="flex items-start justify-between gap-2 w-full">
<h4 className="text-xl font-semibold text-gray-900">{cycle.name}</h4>
<CustomMenu width="lg" ellipsis>
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2 text-gray-800">
<LinkIcon className="h-4 w-4" />
<span>Copy Link</span>
</span>
</CustomMenu.MenuItem>
{!isCompleted && (
<CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
<span className="flex items-center justify-start gap-2 text-gray-800">
<span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" />
<span>Delete</span>
</span>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy link</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>

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

@ -310,16 +310,16 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
<CustomMenu width="auto" verticalEllipsis>
{!isCompleted && (
<CustomMenu.MenuItem onClick={handleDeleteCycle}>
<span className="flex items-center justify-start gap-2 text-gray-800">
<span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" />
<span>Delete Cycle</span>
<span>Delete cycle</span>
</span>
</CustomMenu.MenuItem>
)}
<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">
<LinkIcon className="h-4 w-4" />
<span>Copy Cycle Link</span>
<span>Copy cycle link</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>

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

@ -169,7 +169,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
)}
<CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2 text-gray-700">
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy issue link</span>
</span>

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

@ -305,7 +305,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
<Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
<DatePicker
selected={
watch("target_date") ? new Date(`${watch("target_date")}`) : new Date()
watch("target_date")
? new Date(`${watch("target_date")}`)
: new Date()
}
onChange={(date) => {
submitChanges({
@ -332,18 +334,18 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
<div className="flex items-start justify-between gap-2 w-full ">
<h4 className="text-xl font-semibold text-gray-900">{module.name}</h4>
<CustomMenu width="lg" ellipsis>
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2 text-gray-800">
<LinkIcon className="h-4 w-4" />
<span>Copy Link</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
<span className="flex items-center justify-start gap-2 text-gray-800">
<span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" />
<span>Delete</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy link</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>

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

@ -152,21 +152,21 @@ 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-700">
<span className="flex items-center justify-start gap-2">
<PencilIcon className="h-4 w-4" />
<span>Edit Module</span>
<span>Edit module</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleDeleteModule}>
<span className="flex items-center justify-start gap-2 text-gray-700">
<span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" />
<span>Delete Module</span>
<span>Delete module</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2 text-gray-700">
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy Module Link</span>
<span>Copy module link</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>

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

@ -219,7 +219,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
<CustomMenu width="auto" verticalEllipsis>
{isOwner && (
<CustomMenu.MenuItem onClick={() => setDeleteProject(project.id)}>
<span className="flex items-center justify-start gap-2 text-gray-700">
<span className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" />
<span>Delete project</span>
</span>
@ -227,21 +227,21 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
)}
{project.is_favorite ? (
<CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
<span className="flex items-center justify-start gap-2 text-gray-700">
<span className="flex items-center justify-start gap-2">
<StarIcon className="h-4 w-4" />
<span>Remove from favorites</span>
</span>
</CustomMenu.MenuItem>
) : (
<CustomMenu.MenuItem onClick={handleAddToFavorites}>
<span className="flex items-center justify-start gap-2 text-gray-700">
<span className="flex items-center justify-start gap-2">
<StarIcon className="h-4 w-4" />
<span>Add to favorites</span>
</span>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2 text-gray-700">
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy project link</span>
</span>

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

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

4
apps/app/components/ui/context-menu.tsx
View File

@ -71,7 +71,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
{renderAs === "a" ? (
<Link href={href}>
<a
className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left hover:bg-hover-gray`}
className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-gray-500 hover:bg-gray-100 hover:text-gray-900`}
>
<>
{Icon && <Icon />}
@ -82,7 +82,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
) : (
<button
type="button"
className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left hover:bg-hover-gray`}
className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-gray-500 hover:bg-gray-100 hover:text-gray-900`}
onClick={onClick}
>
<>

4
apps/app/components/ui/custom-menu.tsx
View File

@ -141,7 +141,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
<a
className={`${className} ${
active ? "bg-hover-gray" : ""
} inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-gray-500`}
} inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-gray-500 hover:bg-gray-100 hover:text-gray-900`}
onClick={close}
>
{children}
@ -152,7 +152,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
type="button"
className={`${className} ${
active ? "bg-hover-gray" : ""
} w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-gray-500`}
} w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-gray-500 hover:bg-gray-100 hover:text-gray-900`}
onClick={onClick}
>
{children}