mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-09-21 03:40:52 +02:00
[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
GitHub
parent
0d5cc558c9
commit
c5ba2d73d0
@ -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 className="whitespace-nowrap overflow-hidden text-ellipsis">
|
||||
{middleTruncate(item.title, 60)}
|
||||
</p>
|
||||
{showTooltip && (
|
||||
<div className="absolute left-0 bg-white text-black p-1.5 rounded shadow-lg whitespace-nowrap">
|
||||
{item.title}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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
|
||||
data-tooltip-id={`directory-item-${item.url}`}
|
||||
className="col-span-10 w-fit flex gap-x-[4px] items-center relative"
|
||||
>
|
||||
<div className="col-span-5 flex gap-x-[4px] items-center">
|
||||
<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 className="whitespace-nowrap overflow-hidden text-ellipsis">
|
||||
{middleTruncate(item.title, 60)}
|
||||
</p>
|
||||
{showTooltip && (
|
||||
<div className="absolute left-0 bg-white text-black p-1.5 rounded shadow-lg whitespace-nowrap">
|
||||
{item.title}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user