Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: recents widget title truncate
Browse files Browse the repository at this point in the history
aaryan610 committed Jan 30, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 58a4ca9 commit 58977e0
Showing 4 changed files with 56 additions and 43 deletions.
14 changes: 9 additions & 5 deletions web/core/components/core/list/list-item.tsx
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ import { cn } from "@/helpers/common.helper";
import { useAppRouter } from "@/hooks/use-app-router";

interface IListItemProps {
title: string;
title?: string;
itemLink: string;
onItemClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
prependTitleElement?: JSX.Element;
@@ -72,10 +72,14 @@ export const ListItem: FC<IListItemProps> = (props) => {
disabled={disableLink}
>
<div className="flex items-center gap-4 truncate">
{prependTitleElement && <span className="flex items-center flex-shrink-0">{prependTitleElement}</span>}
<Tooltip tooltipContent={title} position="top" isMobile={isMobile}>
<span className="truncate text-sm">{title}</span>
</Tooltip>
{prependTitleElement && (
<span className="flex items-center flex-shrink-0 truncate">{prependTitleElement}</span>
)}
{title && (
<Tooltip tooltipContent={title} position="top" isMobile={isMobile}>
<span className="truncate text-sm">{title}</span>
</Tooltip>
)}
</div>
{appendTitleElement && <span className="flex items-center flex-shrink-0">{appendTitleElement}</span>}
</ControlLink>
23 changes: 16 additions & 7 deletions web/core/components/home/widgets/recents/issue.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
// plane types
import { TActivityEntityData, TIssueEntityData } from "@plane/types";
// plane ui
import { LayersIcon, PriorityIcon, StateGroupIcon, Tooltip } from "@plane/ui";
// components
import { ListItem } from "@/components/core/list";
import { MemberDropdown } from "@/components/dropdowns";
// helpers
import { calculateTimeAgo } from "@/helpers/date-time.helper";
// hooks
import { useIssueDetail, useProjectState } from "@/hooks/store";
// plane web components
import { IssueIdentifier } from "@/plane-web/components/issues";

type BlockProps = {
@@ -24,9 +30,9 @@ export const RecentIssue = (props: BlockProps) => {
<ListItem
key={activity.id}
itemLink=""
title={""}
title={issueDetails?.name}
prependTitleElement={
<div className="flex flex-shrink-0 items-center justify-center rounded-md gap-4 ">
<div className="flex-shrink-0 flex items-center gap-2">
{issueDetails.type ? (
<IssueIdentifier
size="lg"
@@ -38,16 +44,19 @@ export const RecentIssue = (props: BlockProps) => {
/>
) : (
<div className="flex gap-2 items-center justify-center">
<div className="flex flex-shrink-0 items-center justify-center rounded gap-4 bg-custom-background-80 w-[25.5px] h-[25.5px]">
<LayersIcon className="w-4 h-4 text-custom-text-350" />
<div className="flex-shrink-0 grid place-items-center rounded bg-custom-background-80 size-8">
<LayersIcon className="size-4 text-custom-text-350" />
</div>
<div className="font-medium text-custom-sidebar-text-400 text-sm whitespace-nowrap">
<div className="font-medium text-custom-text-400 text-sm whitespace-nowrap">
{issueDetails?.project_identifier}-{issueDetails?.sequence_id}
</div>
</div>
)}
<div className="text-custom-text-200 font-medium text-sm whitespace-nowrap">{issueDetails?.name}</div>
<div className="font-medium text-xs text-custom-text-400">{calculateTimeAgo(activity.visited_at)}</div>
</div>
}
appendTitleElement={
<div className="flex-shrink-0 font-medium text-xs text-custom-text-400">
{calculateTimeAgo(activity.visited_at)}
</div>
}
quickActionElement={
37 changes: 17 additions & 20 deletions web/core/components/home/widgets/recents/page.tsx
Original file line number Diff line number Diff line change
@@ -37,29 +37,26 @@ export const RecentPage = (props: BlockProps) => {
<ListItem
key={activity.id}
itemLink=""
title={""}
title={getPageName(pageDetails?.name)}
prependTitleElement={
<div className="flex flex-shrink-0 items-center justify-center rounded-md gap-4 ">
<div className="flex gap-2 items-center justify-center">
<div className="flex flex-shrink-0 items-center justify-center rounded gap-2 bg-custom-background-80 w-[25.5px] h-[25.5px]">
<>
{pageDetails?.logo_props?.in_use ? (
<Logo logo={pageDetails?.logo_props} size={16} type="lucide" />
) : (
<FileText className="h-4 w-4 text-custom-text-350" />
)}
</>
</div>
{pageDetails?.project_identifier && (
<div className="font-medium text-custom-sidebar-text-400 text-sm whitespace-nowrap">
{pageDetails?.project_identifier}
</div>
<div className="flex-shrink-0 flex items-center gap-2">
<div className="flex-shrink-0 grid place-items-center rounded bg-custom-background-80 size-8">
{pageDetails?.logo_props?.in_use ? (
<Logo logo={pageDetails?.logo_props} size={16} type="lucide" />
) : (
<FileText className="size-4 text-custom-text-350" />
)}
</div>
<div className="text-custom-text-200 font-medium text-sm whitespace-nowrap">
{getPageName(pageDetails?.name)}
</div>
<div className="font-medium text-xs text-custom-text-400">{calculateTimeAgo(activity.visited_at)}</div>
{pageDetails?.project_identifier && (
<div className="font-medium text-custom-text-400 text-sm whitespace-nowrap">
{pageDetails?.project_identifier}
</div>
)}
</div>
}
appendTitleElement={
<div className="flex-shrink-0 font-medium text-xs text-custom-text-400">
{calculateTimeAgo(activity.visited_at)}
</div>
}
quickActionElement={
25 changes: 14 additions & 11 deletions web/core/components/home/widgets/recents/project.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import { useRouter } from "next/navigation";
// plane types
import { TActivityEntityData, TProjectEntityData } from "@plane/types";
// plane ui
import { Logo } from "@plane/ui";
// components
import { ListItem } from "@/components/core/list";
import { MemberDropdown } from "@/components/dropdowns";
// helpers
import { calculateTimeAgo } from "@/helpers/date-time.helper";

type BlockProps = {
@@ -21,19 +25,18 @@ export const RecentProject = (props: BlockProps) => {
<ListItem
key={activity.id}
itemLink=""
title={""}
title={projectDetails?.name}
prependTitleElement={
<div className="flex flex-shrink-0 items-center justify-center rounded-md gap-4 ">
<div className="flex gap-2 items-center justify-center">
<div className="flex flex-shrink-0 items-center justify-center rounded gap-4 bg-custom-background-80 w-[25.5px] h-[25.5px]">
<Logo logo={projectDetails?.logo_props} size={16} />
</div>
<div className="font-medium text-custom-sidebar-text-400 text-sm whitespace-nowrap">
{projectDetails?.identifier}
</div>
<div className="flex-shrink-0 flex items-center gap-2">
<div className="flex-shrink-0 grid place-items-center rounded bg-custom-background-80 size-8">
<Logo logo={projectDetails?.logo_props} size={16} />
</div>
<div className="text-custom-text-200 font-medium text-sm whitespace-nowrap">{projectDetails?.name}</div>
<div className="font-medium text-xs text-custom-text-400">{calculateTimeAgo(activity.visited_at)}</div>
<div className="font-medium text-custom-text-400 text-sm whitespace-nowrap">{projectDetails?.identifier}</div>
</div>
}
appendTitleElement={
<div className="flex-shrink-0 font-medium text-xs text-custom-text-400">
{calculateTimeAgo(activity.visited_at)}
</div>
}
quickActionElement={

0 comments on commit 58977e0

Please sign in to comment.