θΏ™ζ˜―indexlocζδΎ›ηš„ζœεŠ‘οΌŒδΈθ¦θΎ“ε…₯任何密码
Skip to content

[STYLE] Document picker UI improvements #1700

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 17, 2024
Merged

[STYLE] Document picker UI improvements #1700

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1521a0e
rework document picker ui
shatfield4 Jun 17, 2024
b95c126
refactor tooltips to use react-tooltip lib with custom elements
timothycarambat Jun 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 28 additions & 37 deletions frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,24 @@
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)}
className={`text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer file-row ${
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"
Expand All @@ -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>
);
}
2 changes: 0 additions & 2 deletions frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
72 changes: 32 additions & 40 deletions ...components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -20,8 +19,6 @@ export default function WorkspaceFileRow({
hasChanges,
movedItems,
}) {
const [showTooltip, setShowTooltip] = useState(false);

const onRemoveClick = async () => {
setLoading(true);

Expand All @@ -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>
);
}
Expand Down
4 changes: 0 additions & 4 deletions frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down