diff --git a/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.module.scss b/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.module.scss index 274eae13db..d10f248dfa 100644 --- a/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.module.scss +++ b/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.module.scss @@ -1,4 +1,5 @@ @import "../../../../../../constants"; +@import "../../../../../../styles/sizes"; .linkIcon { width: 1rem; @@ -11,9 +12,13 @@ .tooltipContent { max-width: 30rem; - z-index: 3; + z-index: 1; display: flex; flex-direction: column; + + @include tablet { + max-width: 100vw; + } } .contentTitle { @@ -29,7 +34,6 @@ .link { width: 100%; - margin-bottom: 0.625rem; display: flex; align-items: center; font-size: 0.875rem; @@ -38,10 +42,9 @@ &:hover { color: $c-pink-primary; } - - &:last-child { - margin-bottom: 0; - } +} +.linkWithBottomMargin { + margin-bottom: 0.625rem; } .linkLeft, diff --git a/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.tsx b/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.tsx index 0d6bcf42fb..c6df7d05da 100644 --- a/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.tsx +++ b/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.tsx @@ -1,21 +1,17 @@ -import React, { - FC, - MouseEventHandler, - ReactElement, - useEffect, - useState, -} from "react"; +import React, { FC, MouseEventHandler, useEffect, useState } from "react"; import { NavLink } from "react-router-dom"; +import classNames from "classnames"; import { ButtonIcon } from "@/shared/components"; import { useRoutesContext } from "@/shared/contexts"; -import { RightArrowThinIcon, Link4Icon } from "@/shared/icons"; -import { Common } from "@/shared/models"; +import { useIsTabletView } from "@/shared/hooks/viewport"; +import { Link4Icon } from "@/shared/icons"; import { Loader, Tooltip, TooltipContent, TooltipTrigger, } from "@/shared/ui-kit"; +import { LinkedItemTooltipContent } from "./components"; import { useCommonPaths } from "./hooks"; import styles from "./LinkedItemMark.module.scss"; @@ -31,6 +27,7 @@ const LinkedItemMark: FC<LinkedItemMarkProps> = (props) => { originalCommonId = "", linkedCommonIds = [], } = props; + const isTabletView = useIsTabletView(); const [isOpen, setIsOpen] = useState(false); const { data: commonPaths, @@ -57,45 +54,12 @@ const LinkedItemMark: FC<LinkedItemMarkProps> = (props) => { fetchCommonPaths(commonIds); }, [isOpen]); - const renderFullPath = (commons: Common[]): ReactElement => { - return ( - <div className={styles.linkLeft}> - {commons.map((common, commonIndex) => ( - <React.Fragment key={common.id}> - {common.name} - {commonIndex !== commons.length - 1 && ( - <RightArrowThinIcon className={styles.arrowIcon} /> - )} - </React.Fragment> - ))} - </div> - ); - }; - - const renderCutPath = (commons: Common[]): ReactElement => { - const lastCommon = commons[commons.length - 1]; - const parentCommons = commons.slice(0, -1); - - return ( - <> - <div className={styles.linkLeft}> - {parentCommons.map((common, commonIndex) => ( - <React.Fragment key={common.id}> - {common.name} - {commonIndex !== commons.length - 1 && ( - <RightArrowThinIcon className={styles.arrowIcon} /> - )} - </React.Fragment> - ))} - </div> - <div className={styles.ellipsis}>…</div> - <div className={styles.linkRight}>{lastCommon?.name}</div> - </> - ); - }; - return ( - <Tooltip open={isOpen} onOpenChange={setIsOpen} placement="right"> + <Tooltip + open={isOpen} + onOpenChange={setIsOpen} + placement={isTabletView ? "bottom-start" : "right"} + > <TooltipTrigger onClick={toggleTooltip} asChild> <ButtonIcon> <Link4Icon className={styles.linkIcon} /> @@ -112,11 +76,14 @@ const LinkedItemMark: FC<LinkedItemMarkProps> = (props) => { return ( <NavLink key={key} - className={styles.link} + className={classNames(styles.link, { + [styles.linkWithBottomMargin]: + index !== commonPaths.length - 1, + })} to={getCommonPagePath(lastCommon?.id || "")} title={lastCommon?.name} > - {renderCutPath(commons)} + <LinkedItemTooltipContent commons={commons} /> </NavLink> ); })} diff --git a/src/pages/common/components/FeedCard/components/LinkedItemMark/components/LinkedItemTooltipContent/LinkedItemTooltipContent.module.scss b/src/pages/common/components/FeedCard/components/LinkedItemMark/components/LinkedItemTooltipContent/LinkedItemTooltipContent.module.scss new file mode 100644 index 0000000000..e688805ad6 --- /dev/null +++ b/src/pages/common/components/FeedCard/components/LinkedItemMark/components/LinkedItemTooltipContent/LinkedItemTooltipContent.module.scss @@ -0,0 +1,24 @@ +.linkLeft, +.linkRight { + white-space: nowrap; + overflow: hidden; +} + +.linkLeft { + display: flex; + align-items: center; + text-overflow: ellipsis; +} + +.linkRight { + flex-shrink: 0; + max-width: 25rem; +} + +.ellipsis { + flex-shrink: 0; +} + +.arrowIcon { + flex-shrink: 0; +} diff --git a/src/pages/common/components/FeedCard/components/LinkedItemMark/components/LinkedItemTooltipContent/LinkedItemTooltipContent.tsx b/src/pages/common/components/FeedCard/components/LinkedItemMark/components/LinkedItemTooltipContent/LinkedItemTooltipContent.tsx new file mode 100644 index 0000000000..310bedb9f1 --- /dev/null +++ b/src/pages/common/components/FeedCard/components/LinkedItemMark/components/LinkedItemTooltipContent/LinkedItemTooltipContent.tsx @@ -0,0 +1,61 @@ +import React, { FC, ReactElement, useEffect, useState } from "react"; +import { RightArrowThinIcon } from "@/shared/icons"; +import { Common } from "@/shared/models"; +import styles from "./LinkedItemTooltipContent.module.scss"; + +interface LinkedItemTooltipContentProps { + commons: Common[]; +} + +const renderCutPath = (commons: Common[]): ReactElement => { + const lastCommon = commons[commons.length - 1]; + const parentCommons = commons.slice(0, -1); + + return ( + <> + <div className={styles.linkLeft}> + {parentCommons.map((common, commonIndex) => ( + <React.Fragment key={common.id}> + {common.name} + {commonIndex !== commons.length - 1 && ( + <RightArrowThinIcon className={styles.arrowIcon} /> + )} + </React.Fragment> + ))} + </div> + <div className={styles.ellipsis}>…</div> + <div className={styles.linkRight}>{lastCommon?.name}</div> + </> + ); +}; + +const LinkedItemTooltipContent: FC<LinkedItemTooltipContentProps> = (props) => { + const { commons } = props; + const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null); + const [shouldCut, setShouldCut] = useState(false); + + useEffect(() => { + if (containerRef && containerRef.scrollWidth > containerRef.clientWidth) { + setShouldCut(true); + } + }, [containerRef]); + + if (shouldCut) { + return renderCutPath(commons); + } + + return ( + <div ref={setContainerRef} className={styles.linkLeft}> + {commons.map((common, commonIndex) => ( + <React.Fragment key={common.id}> + {common.name} + {commonIndex !== commons.length - 1 && ( + <RightArrowThinIcon className={styles.arrowIcon} /> + )} + </React.Fragment> + ))} + </div> + ); +}; + +export default LinkedItemTooltipContent; diff --git a/src/pages/common/components/FeedCard/components/LinkedItemMark/components/LinkedItemTooltipContent/index.ts b/src/pages/common/components/FeedCard/components/LinkedItemMark/components/LinkedItemTooltipContent/index.ts new file mode 100644 index 0000000000..d7f01d8657 --- /dev/null +++ b/src/pages/common/components/FeedCard/components/LinkedItemMark/components/LinkedItemTooltipContent/index.ts @@ -0,0 +1 @@ +export { default as LinkedItemTooltipContent } from "./LinkedItemTooltipContent"; diff --git a/src/pages/common/components/FeedCard/components/LinkedItemMark/components/index.ts b/src/pages/common/components/FeedCard/components/LinkedItemMark/components/index.ts new file mode 100644 index 0000000000..7ba868bb69 --- /dev/null +++ b/src/pages/common/components/FeedCard/components/LinkedItemMark/components/index.ts @@ -0,0 +1 @@ +export * from "./LinkedItemTooltipContent";