binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: page breadcrumb tooltip persistence (#5137)

Browse source
This commit is contained in:
Aaryan Khandelwal 2024-07-18 15:49:25 +05:30 • committed by GitHub
parent 39e3c28ad8
commit 209b700fd9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 51 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

94
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
View file

@ -7,7 +7,7 @@ import { FileText } from "lucide-react";
// types // types
import { TLogoProps } from "@plane/types"; import { TLogoProps } from "@plane/types";
// ui // ui
import { Breadcrumbs, Button, EmojiIconPicker, EmojiIconPickerTypes, TOAST_TYPE, setToast } from "@plane/ui"; import { Breadcrumbs, Button, EmojiIconPicker, EmojiIconPickerTypes, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
// components // components
import { BreadcrumbLink, Logo } from "@/components/common"; import { BreadcrumbLink, Logo } from "@/components/common";
// helpers // helpers
@ -31,7 +31,7 @@ export const PageDetailsHeader = observer(() => {
const { currentProjectDetails, loader } = useProject(); const { currentProjectDetails, loader } = useProject();
const { isContentEditable, isSubmitting, name, logo_props, updatePageLogo } = usePage(pageId?.toString() ?? ""); const { isContentEditable, isSubmitting, name, logo_props, updatePageLogo } = usePage(pageId?.toString() ?? "");
// use platform // use platform
const { platform } = usePlatformOS(); const { isMobile, platform } = usePlatformOS();
// derived values // derived values
const isMac = platform === "MacOS"; const isMac = platform === "MacOS";
@ -100,49 +100,57 @@ export const PageDetailsHeader = observer(() => {
<Breadcrumbs.BreadcrumbItem <Breadcrumbs.BreadcrumbItem
type="text" type="text"
link={ link={
<BreadcrumbLink <li className="flex items-center space-x-2" tabIndex={-1}>
label={name ?? "Page"} <div className="flex flex-wrap items-center gap-2.5">
icon={ <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
<EmojiIconPicker <div className="flex h-5 w-5 items-center justify-center overflow-hidden">
isOpen={isOpen} <EmojiIconPicker
handleToggle={(val: boolean) => setIsOpen(val)} isOpen={isOpen}
className="flex items-center justify-center" handleToggle={(val: boolean) => setIsOpen(val)}
buttonClassName="flex items-center justify-center" className="flex items-center justify-center"
label={ buttonClassName="flex items-center justify-center"
<> label={
{logo_props?.in_use ? ( <>
<Logo logo={logo_props} size={16} type="lucide" /> {logo_props?.in_use ? (
) : ( <Logo logo={logo_props} size={16} type="lucide" />
<FileText className="h-4 w-4 text-custom-text-300" /> ) : (
)} <FileText className="h-4 w-4 text-custom-text-300" />
</> )}
} </>
onChange={(val) => { }
let logoValue = {}; onChange={(val) => {
let logoValue = {};
if (val?.type === "emoji") if (val?.type === "emoji")
logoValue = { logoValue = {
value: convertHexEmojiToDecimal(val.value.unified), value: convertHexEmojiToDecimal(val.value.unified),
url: val.value.imageUrl, url: val.value.imageUrl,
}; };
else if (val?.type === "icon") logoValue = val.value; else if (val?.type === "icon") logoValue = val.value;
handlePageLogoUpdate({ handlePageLogoUpdate({
in_use: val?.type, in_use: val?.type,
[val?.type]: logoValue, [val?.type]: logoValue,
}).finally(() => setIsOpen(false)); }).finally(() => setIsOpen(false));
}} }}
defaultIconColor={ defaultIconColor={
logo_props?.in_use && logo_props.in_use === "icon" ? logo_props?.icon?.color : undefined logo_props?.in_use && logo_props.in_use === "icon" ? logo_props?.icon?.color : undefined
} }
defaultOpen={ defaultOpen={
logo_props?.in_use && logo_props?.in_use === "emoji" logo_props?.in_use && logo_props?.in_use === "emoji"
? EmojiIconPickerTypes.EMOJI ? EmojiIconPickerTypes.EMOJI
: EmojiIconPickerTypes.ICON : EmojiIconPickerTypes.ICON
} }
/> />
} </div>
/> <Tooltip tooltipContent={name ?? "Page"} position="bottom" isMobile={isMobile}>
<div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">
{name ?? "Page"}
</div>
</Tooltip>
</div>
</div>
</li>
} }
/> />
</Breadcrumbs> </Breadcrumbs>