[WEB-3095] fix: recents widget title truncate (#6512)

* fix: recents widget title truncate

* chore: revert prop changes

* chore: revert list item changes
This commit is contained in:
Aaryan Khandelwal 2025-01-30 13:34:42 +05:30 committed by GitHub
parent 8f5ce6b232
commit ff778b98f5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 47 additions and 38 deletions

View file

@ -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={

View file

@ -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={

View file

@ -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={