mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-05-14 10:14:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-1236] fix mac tooltips on truncated folder names is inconsistent (#1497)

Browse Source 
* fix tooltip

* fix isTruncated
This commit is contained in:
nikec
2023-10-11 16:29:26 +02:00
committed by GitHub
parent d9c8af0551
commit edda9566b1
4 changed files with 45 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
interface/app/$libraryId/Explorer/FilePath/RenameTextBox.tsx
View File

@@ -26,7 +26,7 @@ export const RenameTextBox = forwardRef<HTMLDivElement, Props>(
useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(_ref, () => ref.current);
//this is to determine if file name is truncated
const isTruncated = useIsTextTruncated(ref, name);
const isTruncated = useIsTextTruncated(ref);
// Highlight file name up to extension or
// fully if it's a directory, hidden file or has no extension

2
interface/app/$libraryId/Explorer/View/ListView/index.tsx
View File

@@ -71,7 +71,7 @@ const ListViewItem = memo((props: ListViewItemProps) => {
const HeaderColumnName = ({ name }: { name: string }) => {
const textRef = useRef<HTMLParagraphElement>(null);
const isTruncated = useIsTextTruncated(textRef, name);
const isTruncated = useIsTextTruncated(textRef);
return (
<div ref={textRef} className="truncate">

26
interface/hooks/useIsTextTruncated.ts
View File

@@ -1,11 +1,23 @@
import { RefObject, useMemo } from 'react';
import { RefObject, useState } from 'react';
import { useMutationObserver } from 'rooks';
import useResizeObserver from 'use-resize-observer';
export const useIsTextTruncated = (element: RefObject<HTMLElement>, text: string | null) => {
const { width } = useResizeObserver({ ref: element });
export const useIsTextTruncated = (element: RefObject<HTMLElement>) => {
const [truncated, setTruncated] = useState(false);
return useMemo(() => {
if (!element.current) return false;
return element.current.scrollWidth > element.current.clientWidth;
}, [element, width, text]);
const handleIsTruncated = () => {
if (!element.current) return;
setTruncated(element.current.scrollWidth > element.current.clientWidth);
};
useMutationObserver(element, handleIsTruncated, {
attributes: true
});
useResizeObserver({
ref: element,
onResize: handleIsTruncated
});
return truncated;
};

49
packages/ui/src/Tooltip.tsx
View File

@@ -40,31 +40,30 @@ export const Tooltip = ({ position = 'bottom', ...props }: TooltipProps) => {
)}
</TooltipPrimitive.Trigger>
<TooltipPrimitive.Portal>
{props.label && (
<TooltipPrimitive.Content
side={position}
className={clsx(
'TooltipContent z-50 m-2 mt-1 flex max-w-[200px] select-text items-center gap-2 break-words rounded border border-app-line bg-app-box px-2 py-1 text-center text-xs text-ink',
props.tooltipClassName
)}
>
<p className={props.labelClassName}>{props.label}</p>
{props.keybinds && (
<div className="flex items-center justify-center gap-1">
{separateKeybinds(props.keybinds)?.map((k, _) => (
<kbd
key={k.toString()}
className={
'h-4.5 flex items-center justify-center rounded-md border border-app-selected bg-app-selected/50 px-1.5 py-0.5 text-[10px] text-ink'
}
>
<p>{k}</p>
</kbd>
))}
</div>
)}
</TooltipPrimitive.Content>
)}
<TooltipPrimitive.Content
side={position}
className={clsx(
'TooltipContent z-50 m-2 mt-1 flex max-w-[200px] select-text items-center gap-2 break-words rounded border border-app-line bg-app-box px-2 py-1 text-center text-xs text-ink',
props.tooltipClassName,
!props.label && 'hidden'
)}
>
<p className={props.labelClassName}>{props.label}</p>
{props.keybinds && (
<div className="flex items-center justify-center gap-1">
{separateKeybinds(props.keybinds)?.map((k, _) => (
<kbd
key={k.toString()}
className={
'h-4.5 flex items-center justify-center rounded-md border border-app-selected bg-app-selected/50 px-1.5 py-0.5 text-[10px] text-ink'
}
>
<p>{k}</p>
</kbd>
))}
</div>
)}
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal>
</TooltipPrimitive.Root>
);