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: truncate (#388)

Browse Source 
* style: truncate

* fix: truncate text added to cycle and module card
This commit is contained in:
Anmol Singh Bhatia 2023-03-07 19:32:29 +05:30 committed by GitHub
parent 61102952d0
commit d18765a613
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@ import { ChevronDownIcon, PencilIcon, StarIcon } from "@heroicons/react/24/outli
// helpers // helpers
import { getDateRangeStatus, renderShortDateWithYearFormat } from "helpers/date-time.helper"; import { getDateRangeStatus, renderShortDateWithYearFormat } from "helpers/date-time.helper";
import { groupBy } from "helpers/array.helper"; import { groupBy } from "helpers/array.helper";
import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper"; import { capitalizeFirstLetter, copyTextToClipboard, truncateText } from "helpers/string.helper";
// types // types
import { import {
CompletedCyclesResponse, CompletedCyclesResponse,
@ -235,7 +235,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
<div className="flex items-center justify-between gap-1"> <div className="flex items-center justify-between gap-1">
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
<a className="w-full"> <a className="w-full">
<h3 className="text-xl font-semibold leading-5 ">{cycle.name}</h3> <h3 className="text-xl font-semibold leading-5 ">{truncateText(cycle.name,75)}</h3>
</a> </a>
</Link> </Link>
{cycle.is_favorite ? ( {cycle.is_favorite ? (

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

@ -10,7 +10,7 @@ import useToast from "hooks/use-toast";
// components // components
import { DeleteModuleModal } from "components/modules"; import { DeleteModuleModal } from "components/modules";
// ui // ui
import { AssigneesList, Avatar, CustomMenu } from "components/ui"; import { AssigneesList, Avatar, CustomMenu, Tooltip } from "components/ui";
// icons // icons
import User from "public/user.png"; import User from "public/user.png";
import { import {
@ -32,7 +32,7 @@ import { IModule } from "types";
// fetch-key // fetch-key
import { MODULE_LIST, STATE_LIST } from "constants/fetch-keys"; import { MODULE_LIST, STATE_LIST } from "constants/fetch-keys";
// helper // helper
import { copyTextToClipboard } from "helpers/string.helper"; import { copyTextToClipboard, truncateText } from "helpers/string.helper";
import { getStatesList } from "helpers/state.helper"; import { getStatesList } from "helpers/state.helper";
type Props = { type Props = {
@ -162,7 +162,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
setIsOpen={setModuleDeleteModal} setIsOpen={setModuleDeleteModal}
data={module} data={module}
/> />
<div className="h-full w-full min-w-[380px]"> <div className="h-full w-full min-w-[360px]">
<div className="flex h-full w-full flex-row rounded-[10px] bg-white text-xs shadow"> <div className="flex h-full w-full flex-row rounded-[10px] bg-white text-xs shadow">
<span <span
className={`h-full w-2.5 rounded-l-[10px] `} className={`h-full w-2.5 rounded-l-[10px] `}
@ -173,12 +173,16 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
}} }}
/> />
<div className="flex h-full w-full flex-col items-start justify-between gap-6 p-5"> <div className="flex h-full w-full flex-col items-start justify-between gap-6 p-5">
<div className="flex flex-col w-full gap-5"> <div className="flex w-full flex-col gap-5">
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}> <Tooltip tooltipContent={module.name} position="top-left">
<a className="w-full"> <span
<span className="text-xl font-semibold text-black">{module.name}</span> className="break-all text-xl font-semibold text-black"
</a> >
</Link> <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
<a className="w-full">{truncateText(module.name, 75)}</a>
</Link>
</span>
</Tooltip>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex items-start gap-1 "> <div className="flex items-start gap-1 ">
<CalendarDaysIcon className="h-4 w-4 text-gray-900" /> <CalendarDaysIcon className="h-4 w-4 text-gray-900" />
@ -242,30 +246,25 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
<span className="capitalize">{module?.status?.replace("-", " ")}</span> <span className="capitalize">{module?.status?.replace("-", " ")}</span>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<span> {module.is_favorite ? (
{module.is_favorite ? ( <button onClick={handleRemoveFromFavorites}>
<button onClick={handleRemoveFromFavorites}> <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
<StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" /> </button>
</button> ) : (
) : ( <button onClick={handleAddToFavorites}>
<button onClick={handleAddToFavorites}> <StarIcon className="h-4 w-4 " color="#858E96" />
<StarIcon className="h-4 w-4 " color="#858E96" /> </button>
</button> )}
)}
</span> <CustomMenu width="auto" verticalEllipsis>
<span> <CustomMenu.MenuItem onClick={handleEditModule}>Edit module</CustomMenu.MenuItem>
<CustomMenu width="auto" verticalEllipsis> <CustomMenu.MenuItem onClick={handleDeleteModule}>
<CustomMenu.MenuItem onClick={handleEditModule}> Delete module
Edit module </CustomMenu.MenuItem>
</CustomMenu.MenuItem> <CustomMenu.MenuItem onClick={handleCopyText}>
<CustomMenu.MenuItem onClick={handleDeleteModule}> Copy module link
Delete module </CustomMenu.MenuItem>
</CustomMenu.MenuItem> </CustomMenu>
<CustomMenu.MenuItem onClick={handleCopyText}>
Copy module link
</CustomMenu.MenuItem>
</CustomMenu>
</span>
</div> </div>
</div> </div>
</div> </div>