[STYLE] Document picker UI improvements (#1700)

* rework document picker ui

* refactor tooltips to use react-tooltip lib with custom elements

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>
This commit is contained in:
Sean Hatfield 2024-06-17 14:26:44 -07:00 committed by GitHub
parent 0d5cc558c9
commit c5ba2d73d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 60 additions and 83 deletions

View File

@ -1,26 +1,13 @@
import { useState } from "react";
import React from "react";
import {
formatDate,
getFileExtension,
middleTruncate,
} from "@/utils/directories";
import { File } from "@phosphor-icons/react";
import debounce from "lodash.debounce";
import { Tooltip } from "react-tooltip";
export default function FileRow({ item, selected, toggleSelection }) {
const [showTooltip, setShowTooltip] = useState(false);
const handleShowTooltip = () => {
setShowTooltip(true);
};
const handleHideTooltip = () => {
setShowTooltip(false);
};
const handleMouseEnter = debounce(handleShowTooltip, 500);
const handleMouseLeave = debounce(handleHideTooltip, 500);
return (
<tr
onClick={() => toggleSelection(item)}
@ -28,7 +15,10 @@ export default function FileRow({ item, selected, toggleSelection }) {
selected ? "selected" : ""
}`}
>
<div className="pl-2 col-span-6 flex gap-x-[4px] items-center">
<div
data-tooltip-id={`directory-item-${item.url}`}
className="col-span-10 w-fit flex gap-x-[4px] items-center relative"
>
<div
className="shrink-0 w-3 h-3 rounded border-[1px] border-white flex justify-center items-center cursor-pointer"
role="checkbox"
@ -41,34 +31,35 @@ export default function FileRow({ item, selected, toggleSelection }) {
className="shrink-0 text-base font-bold w-4 h-4 mr-[3px]"
weight="fill"
/>
<div
className="relative"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<p className="whitespace-nowrap overflow-hidden max-w-[165px] text-ellipsis">
{middleTruncate(item.title, 17)}
</p>
{showTooltip && (
<div className="absolute left-0 bg-white text-black p-1.5 rounded shadow-lg whitespace-nowrap">
{item.title}
</div>
)}
</div>
<p className="whitespace-nowrap overflow-hidden text-ellipsis">
{middleTruncate(item.title, 60)}
</p>
</div>
<p className="col-span-3 pl-3.5 whitespace-nowrap">
{formatDate(item?.published)}
</p>
<p className="col-span-2 pl-2 uppercase overflow-x-hidden">
{getFileExtension(item.url)}
</p>
<div className="-col-span-2 flex justify-end items-center">
<div className="col-span-2 flex justify-end items-center">
{item?.cached && (
<div className="bg-white/10 rounded-3xl">
<p className="text-xs px-2 py-0.5">Cached</p>
</div>
)}
</div>
<Tooltip
id={`directory-item-${item.url}`}
place="bottom"
delayShow={800}
className="tooltip invert z-99"
>
<div className="text-xs ">
<p className="text-white">{item.title}</p>
<div className="flex mt-1 gap-x-2">
<p className="">
Date: <b>{formatDate(item?.published)}</b>
</p>
<p className="">
Type: <b>{getFileExtension(item.url).toUpperCase()}</b>
</p>
</div>
</div>
</Tooltip>
</tr>
);
}

View File

@ -203,8 +203,6 @@ function Directory({
<div className="relative w-[560px] h-[310px] bg-zinc-900 rounded-2xl overflow-hidden">
<div className="absolute top-0 left-0 right-0 z-10 rounded-t-2xl text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 shadow-lg bg-zinc-900">
<p className="col-span-6">Name</p>
<p className="col-span-3">Date</p>
<p className="col-span-2">Kind</p>
</div>
<div className="overflow-y-auto h-full pt-8">

View File

@ -6,9 +6,8 @@ import {
} from "@/utils/directories";
import { ArrowUUpLeft, File, PushPin } from "@phosphor-icons/react";
import Workspace from "@/models/workspace";
import debounce from "lodash.debounce";
import { Tooltip } from "react-tooltip";
import showToast from "@/utils/toast";
import { Tooltip } from "react-tooltip";
export default function WorkspaceFileRow({
item,
@ -20,8 +19,6 @@ export default function WorkspaceFileRow({
hasChanges,
movedItems,
}) {
const [showTooltip, setShowTooltip] = useState(false);
const onRemoveClick = async () => {
setLoading(true);
@ -40,62 +37,57 @@ export default function WorkspaceFileRow({
setLoading(false);
};
const handleShowTooltip = () => {
setShowTooltip(true);
};
const handleHideTooltip = () => {
setShowTooltip(false);
};
const isMovedItem = movedItems?.some((movedItem) => movedItem.id === item.id);
const handleMouseEnter = debounce(handleShowTooltip, 500);
const handleMouseLeave = debounce(handleHideTooltip, 500);
return (
<div
className={`items-center text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer
${isMovedItem ? "bg-green-800/40" : "file-row"}`}
className={`items-center text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer ${
isMovedItem ? "bg-green-800/40" : "file-row"
}`}
>
<div className="col-span-5 flex gap-x-[4px] items-center">
<div
data-tooltip-id={`directory-item-${item.url}`}
className="col-span-10 w-fit flex gap-x-[4px] items-center relative"
>
<File
className="text-base font-bold w-4 h-4 ml-3 mr-[3px]"
className="shrink-0 text-base font-bold w-4 h-4 mr-[3px] ml-3"
weight="fill"
/>
<div
className="relative"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<p className="whitespace-nowrap overflow-hidden max-w-[165px] text-ellipsis">
{middleTruncate(item.title, 17)}
</p>
{showTooltip && (
<div className="absolute left-0 bg-white text-black p-1.5 rounded shadow-lg whitespace-nowrap">
{item.title}
</div>
)}
</div>
<p className="whitespace-nowrap overflow-hidden text-ellipsis">
{middleTruncate(item.title, 60)}
</p>
</div>
<p className="col-span-3 pl-3.5 whitespace-nowrap">
{formatDate(item?.published)}
</p>
<p className="col-span-2 pl-2 uppercase overflow-x-hidden">
{getFileExtension(item.url)}
</p>
<div className="col-span-2 flex justify-center items-center">
<div className="col-span-2 flex justify-end items-center">
{hasChanges ? (
<div className="w-4 h-4 ml-2 flex-shrink-0" />
) : (
<div className="flex gap-x-2 items-center">
<PinItemToWorkspace
workspace={workspace}
docPath={`${folderName}/${item.name}`} // how to find documents during pin/unpin
docPath={`${folderName}/${item.name}`}
item={item}
/>
<RemoveItemFromWorkspace item={item} onClick={onRemoveClick} />
</div>
)}
</div>
<Tooltip
id={`directory-item-${item.url}`}
place="bottom"
delayShow={800}
className="tooltip invert z-99"
>
<div className="text-xs ">
<p className="text-white">{item.title}</p>
<div className="flex mt-1 gap-x-2">
<p className="">
Date: <b>{formatDate(item?.published)}</b>
</p>
<p className="">
Type: <b>{getFileExtension(item.url).toUpperCase()}</b>
</p>
</div>
</div>
</Tooltip>
</div>
);
}

View File

@ -31,8 +31,6 @@ function WorkspaceDirectory({
<div className="relative w-[560px] h-[445px] bg-zinc-900 rounded-2xl mt-5">
<div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8">
<p className="col-span-5">Name</p>
<p className="col-span-3">Date</p>
<p className="col-span-2">Kind</p>
<p className="col-span-2" />
</div>
<div className="w-full h-full flex items-center justify-center flex-col gap-y-5">
@ -61,8 +59,6 @@ function WorkspaceDirectory({
>
<div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 bg-zinc-900 sticky top-0 z-10">
<p className="col-span-5">Name</p>
<p className="col-span-3">Date</p>
<p className="col-span-2">Kind</p>
<p className="col-span-2" />
</div>
<div className="w-full h-full flex flex-col z-0">