[WEB-2926]fix: added tooltips for favorites (#6320)
* * fix: added tooltips for favorites * chore: code formatting
This commit is contained in:
parent
e4f9d027fe
commit
d26fb8ce02
3 changed files with 18 additions and 10 deletions
|
|
@ -3,9 +3,9 @@
|
||||||
import React, { useEffect, useRef, useState } from "react";
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
import { observer } from "mobx-react";
|
import { observer } from "mobx-react";
|
||||||
import { useParams, usePathname } from "next/navigation";
|
import { useParams, usePathname } from "next/navigation";
|
||||||
|
import { EIssuesStoreType } from "@plane/constants";
|
||||||
import { useTranslation } from "@plane/i18n";
|
import { useTranslation } from "@plane/i18n";
|
||||||
// types
|
// types
|
||||||
import { EIssuesStoreType } from "@plane/constants";
|
|
||||||
import type { TBaseIssue, TIssue } from "@plane/types";
|
import type { TBaseIssue, TIssue } from "@plane/types";
|
||||||
// ui
|
// ui
|
||||||
import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
|
import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
|
||||||
|
|
|
||||||
|
|
@ -175,11 +175,16 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
|
||||||
"justify-center": isSidebarCollapsed,
|
"justify-center": isSidebarCollapsed,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<Disclosure.Button as="button" className="size-8 aspect-square flex-shrink-0 grid place-items-center">
|
<Tooltip tooltipContent={favorite.name} position="right" isMobile={isMobile}>
|
||||||
<div className="size-4 grid place-items-center flex-shrink-0">
|
<Disclosure.Button
|
||||||
<FavoriteFolderIcon />
|
as="button"
|
||||||
</div>
|
className="size-8 aspect-square flex-shrink-0 grid place-items-center"
|
||||||
</Disclosure.Button>
|
>
|
||||||
|
<div className="size-4 grid place-items-center flex-shrink-0">
|
||||||
|
<FavoriteFolderIcon />
|
||||||
|
</div>
|
||||||
|
</Disclosure.Button>
|
||||||
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
import React, { FC } from "react";
|
import React, { FC } from "react";
|
||||||
import { observer } from "mobx-react";
|
import { observer } from "mobx-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import { Tooltip } from "@plane/ui";
|
||||||
import { useAppTheme } from "@/hooks/store";
|
import { useAppTheme } from "@/hooks/store";
|
||||||
import { usePlatformOS } from "@/hooks/use-platform-os";
|
import { usePlatformOS } from "@/hooks/use-platform-os";
|
||||||
|
|
||||||
|
|
@ -27,9 +28,11 @@ export const FavoriteItemTitle: FC<Props> = observer((props) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link href={href} className={isSidebarCollapsed ? collapsedClass : linkClass} draggable onClick={handleOnClick}>
|
<Tooltip tooltipContent={title} isMobile={isMobile} disabled={!isSidebarCollapsed} position="right">
|
||||||
<span className="flex items-center justify-center size-5">{icon}</span>
|
<Link href={href} className={isSidebarCollapsed ? collapsedClass : linkClass} draggable onClick={handleOnClick}>
|
||||||
{!isSidebarCollapsed && <span className="text-sm leading-5 font-medium flex-1 truncate">{title}</span>}
|
<span className="flex items-center justify-center size-5">{icon}</span>
|
||||||
</Link>
|
{!isSidebarCollapsed && <span className="text-sm leading-5 font-medium flex-1 truncate">{title}</span>}
|
||||||
|
</Link>
|
||||||
|
</Tooltip>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue