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
import { getDateRangeStatus, renderShortDateWithYearFormat } from "helpers/date-time.helper";
import { groupBy } from "helpers/array.helper";
import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
import { capitalizeFirstLetter, copyTextToClipboard, truncateText } from "helpers/string.helper";
// types
import {
CompletedCyclesResponse,
@ -235,7 +235,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
<div className="flex items-center justify-between gap-1">
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
<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>
</Link>
{cycle.is_favorite ? (

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

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