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

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 && ( {type && !isNotAllowed && (
<CustomMenu width="auto" ellipsis> <CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem onClick={editIssue}> <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" /> <PencilIcon className="h-4 w-4" />
<span>Edit issue</span> <span>Edit issue</span>
</span> </span>
@ -237,13 +237,13 @@ export const SingleBoardIssue: React.FC<Props> = ({
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
)} )}
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}> <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" /> <TrashIcon className="h-4 w-4" />
<span>Delete issue</span> <span>Delete issue</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-700"> <span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" /> <LinkIcon className="h-4 w-4" />
<span>Copy issue Link</span> <span>Copy issue Link</span>
</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 && ( {type && !isNotAllowed && (
<CustomMenu width="auto" ellipsis> <CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem onClick={editIssue}> <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" /> <PencilIcon className="h-4 w-4" />
<span>Edit issue</span> <span>Edit issue</span>
</span> </span>
@ -269,13 +269,13 @@ export const SingleListIssue: React.FC<Props> = ({
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
)} )}
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}> <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" /> <TrashIcon className="h-4 w-4" />
<span>Delete issue</span> <span>Delete issue</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-700"> <span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" /> <LinkIcon className="h-4 w-4" />
<span>Copy issue link</span> <span>Copy issue link</span>
</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"> <div className="flex items-start justify-between gap-2 w-full">
<h4 className="text-xl font-semibold text-gray-900">{cycle.name}</h4> <h4 className="text-xl font-semibold text-gray-900">{cycle.name}</h4>
<CustomMenu width="lg" ellipsis> <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 && ( {!isCompleted && (
<CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}> <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" /> <TrashIcon className="h-4 w-4" />
<span>Delete</span> <span>Delete</span>
</span> </span>
</CustomMenu.MenuItem> </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> </CustomMenu>
</div> </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> <CustomMenu width="auto" verticalEllipsis>
{!isCompleted && ( {!isCompleted && (
<CustomMenu.MenuItem onClick={handleDeleteCycle}> <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" /> <TrashIcon className="h-4 w-4" />
<span>Delete Cycle</span> <span>Delete cycle</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">
<LinkIcon 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>
</CustomMenu> </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 width="auto" ellipsis>
<CustomMenu.MenuItem onClick={handleCopyText}> <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" /> <LinkIcon className="h-4 w-4" />
<span>Copy issue link</span> <span>Copy issue link</span>
</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"> <Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
<DatePicker <DatePicker
selected={ selected={
watch("target_date") ? new Date(`${watch("target_date")}`) : new Date() watch("target_date")
? new Date(`${watch("target_date")}`)
: new Date()
} }
onChange={(date) => { onChange={(date) => {
submitChanges({ submitChanges({
@ -332,18 +334,18 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
<div className="flex items-start justify-between gap-2 w-full "> <div className="flex items-start justify-between gap-2 w-full ">
<h4 className="text-xl font-semibold text-gray-900">{module.name}</h4> <h4 className="text-xl font-semibold text-gray-900">{module.name}</h4>
<CustomMenu width="lg" ellipsis> <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)}> <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" /> <TrashIcon className="h-4 w-4" />
<span>Delete</span> <span>Delete</span>
</span> </span>
</CustomMenu.MenuItem> </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> </CustomMenu>
</div> </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 width="auto" verticalEllipsis>
<CustomMenu.MenuItem onClick={handleEditModule}> <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" /> <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-700"> <span className="flex items-center justify-start gap-2">
<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-700"> <span className="flex items-center justify-start gap-2">
<LinkIcon 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>
</CustomMenu> </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> <CustomMenu width="auto" verticalEllipsis>
{isOwner && ( {isOwner && (
<CustomMenu.MenuItem onClick={() => setDeleteProject(project.id)}> <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" /> <TrashIcon className="h-4 w-4" />
<span>Delete project</span> <span>Delete project</span>
</span> </span>
@ -227,21 +227,21 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
)} )}
{project.is_favorite ? ( {project.is_favorite ? (
<CustomMenu.MenuItem onClick={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" /> <StarIcon className="h-4 w-4" />
<span>Remove from favorites</span> <span>Remove from favorites</span>
</span> </span>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
) : ( ) : (
<CustomMenu.MenuItem onClick={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" /> <StarIcon className="h-4 w-4" />
<span>Add to favorites</span> <span>Add to favorites</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-700"> <span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" /> <LinkIcon className="h-4 w-4" />
<span>Copy project link</span> <span>Copy project link</span>
</span> </span>

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

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

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

@ -71,7 +71,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
{renderAs === "a" ? ( {renderAs === "a" ? (
<Link href={href}> <Link href={href}>
<a <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 />} {Icon && <Icon />}
@ -82,7 +82,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
) : ( ) : (
<button <button
type="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} onClick={onClick}
> >
<> <>

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

@ -141,7 +141,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
<a <a
className={`${className} ${ className={`${className} ${
active ? "bg-hover-gray" : "" 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} onClick={close}
> >
{children} {children}
@ -152,7 +152,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
type="button" type="button"
className={`${className} ${ className={`${className} ${
active ? "bg-hover-gray" : "" 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} onClick={onClick}
> >
{children} {children}