diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
index a8526908821ee760e380a95ada4fe41459df39cb..e679896fa64453153f43157bcc37bb2ad527fc77 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
@@ -24,7 +24,7 @@ export default function FileRow({ item, selected, toggleSelection }) {
return (
<tr
onClick={() => toggleSelection(item)}
- className={`transition-all duration-200 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 ${
+ 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" : ""
}`}
>
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
index 909b5fedf4f655a8aa1662bcccc88d21c4b4431e..46c4b7fd09d8312f81e87d860ee972672891dbe5 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
@@ -22,7 +22,7 @@ export default function FolderRow({
<>
<tr
onClick={onRowClick}
- className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 bg-[#1C1E21] hover:bg-sky-500/20 cursor-pointer w-full ${
+ className={`text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 bg-[#1C1E21] hover:bg-sky-500/20 cursor-pointer w-full file-row ${
selected ? "selected" : ""
}`}
>
@@ -59,7 +59,7 @@ export default function FolderRow({
<p className="col-span-2 pl-2" />
</tr>
{expanded && (
- <div className="col-span-full">
+ <>
{item.items.map((fileItem) => (
<FileRow
key={fileItem.id}
@@ -68,7 +68,7 @@ export default function FolderRow({
toggleSelection={toggleSelection}
/>
))}
- </div>
+ </>
)}
</>
);
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
index 44d65448c99eac647a0efda92b5c97e91d2c9ab3..83544f72d8eac38aeadbc95ddd905b7cf8798f73 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
@@ -87,8 +87,8 @@ function Directory({
const toggleSelection = (item) => {
setSelectedItems((prevSelectedItems) => {
const newSelectedItems = { ...prevSelectedItems };
-
if (item.type === "folder") {
+ // select all files in the folder
if (newSelectedItems[item.name]) {
delete newSelectedItems[item.name];
item.items.forEach((file) => delete newSelectedItems[file.id]);
@@ -97,6 +97,7 @@ function Directory({
item.items.forEach((file) => (newSelectedItems[file.id] = true));
}
} else {
+ // single file selections
if (newSelectedItems[item.id]) {
delete newSelectedItems[item.id];
} else {
@@ -108,16 +109,13 @@ function Directory({
});
};
- const isFolderCompletelySelected = (folder) => {
- if (!selectedItems[folder.name]) {
- return false;
- }
- return folder.items.every((file) => selectedItems[file.id]);
- };
-
+ // check if item is selected based on selectedItems state
const isSelected = (id, item) => {
if (item && item.type === "folder") {
- return isFolderCompletelySelected(item);
+ if (!selectedItems[item.name]) {
+ return false;
+ }
+ return item.items.every((file) => selectedItems[file.id]);
}
return !!selectedItems[id];
@@ -175,6 +173,7 @@ function Directory({
}
if (success && message) {
+ // show info if some files were not moved due to being embedded
showToast(message, "info");
} else {
showToast(`Successfully moved ${toMove.length} documents.`, "success");
@@ -209,7 +208,7 @@ function Directory({
</div>
) : (
<button
- className="flex items-center gap-x-2 cursor-pointer z-50 px-[14px] py-[7px] -mr-[14px] rounded-lg hover:bg-[#222628]/60"
+ className="flex items-center gap-x-2 cursor-pointer px-[14px] py-[7px] -mr-[14px] rounded-lg hover:bg-[#222628]/60"
onClick={createNewFolder}
>
<Plus size={18} weight="bold" color="#D3D4D4" />
@@ -220,17 +219,14 @@ function Directory({
)}
</div>
- <div className="relative w-[560px] h-[310px] bg-zinc-900 rounded-2xl">
- <div className="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 sticky top-0 z-10">
+ <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 pb-9"
- style={{ height: "calc(100% - 40px)" }}
- >
+ <div className="overflow-y-auto h-full pt-8">
{loading ? (
<div className="w-full h-full flex items-center justify-center flex-col gap-y-5">
<PreLoader />
@@ -264,42 +260,44 @@ function Directory({
</div>
)}
</div>
-
{amountSelected !== 0 && (
- <div className="w-full justify-center absolute bottom-[12px] flex">
- <div className="justify-center flex flex-row items-center bg-white/40 rounded-lg py-1 px-2 gap-x-2">
- <button
- onClick={moveToWorkspace}
- onMouseEnter={() => setHighlightWorkspace(true)}
- onMouseLeave={() => setHighlightWorkspace(false)}
- className="border-none text-sm font-semibold bg-white h-[30px] px-2.5 rounded-lg hover:text-white hover:bg-neutral-800/80"
- >
- Move to Workspace
- </button>
-
- <div className="relative">
+ <div className="absolute bottom-[12px] left-0 right-0 flex justify-center">
+ <div className="mx-auto bg-white/40 rounded-lg py-1 px-2">
+ <div className="flex flex-row items-center gap-x-2">
<button
- onClick={() => setShowFolderSelection(!showFolderSelection)}
- className="border-none text-sm font-semibold bg-white h-[32px] w-[32px] rounded-lg text-[#222628] hover:bg-neutral-800/80 flex justify-center items-center group"
+ onClick={moveToWorkspace}
+ onMouseEnter={() => setHighlightWorkspace(true)}
+ onMouseLeave={() => setHighlightWorkspace(false)}
+ className="border-none text-sm font-semibold bg-white h-[30px] px-2.5 rounded-lg hover:text-white hover:bg-neutral-800/80"
>
- <MoveToFolderIcon className="text-[#222628] group-hover:text-white" />
+ Move to Workspace
+ </button>
+ <div className="relative">
+ <button
+ onClick={() =>
+ setShowFolderSelection(!showFolderSelection)
+ }
+ className="border-none text-sm font-semibold bg-white h-[32px] w-[32px] rounded-lg text-[#222628] hover:bg-neutral-800/80 flex justify-center items-center group"
+ >
+ <MoveToFolderIcon className="text-[#222628] group-hover:text-white" />
+ </button>
+ {showFolderSelection && (
+ <FolderSelectionPopup
+ folders={files.items.filter(
+ (item) => item.type === "folder"
+ )}
+ onSelect={moveToFolder}
+ onClose={() => setShowFolderSelection(false)}
+ />
+ )}
+ </div>
+ <button
+ onClick={deleteFiles}
+ className="border-none text-sm font-semibold bg-white h-[32px] w-[32px] rounded-lg text-[#222628] hover:text-white hover:bg-neutral-800/80 flex justify-center items-center"
+ >
+ <Trash size={18} weight="bold" />
</button>
- {showFolderSelection && (
- <FolderSelectionPopup
- folders={files.items.filter(
- (item) => item.type === "folder"
- )}
- onSelect={moveToFolder}
- onClose={() => setShowFolderSelection(false)}
- />
- )}
</div>
- <button
- onClick={deleteFiles}
- className="border-none text-sm font-semibold bg-white h-[32px] w-[32px] rounded-lg text-[#222628] hover:text-white hover:bg-neutral-800/80 flex justify-center items-center"
- >
- <Trash size={18} weight="bold" />
- </button>
</div>
</div>
)}
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/index.jsx
index b83aadc2f1d93902af9d78e667d81cb7e204a823..acf319d92f555d3a51068f567f88452785211b2c 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/index.jsx
@@ -76,7 +76,7 @@ export default function UploadFile({ workspace, fetchKeys, setLoading }) {
return (
<div>
<div
- className={`transition-all duration-300 w-[560px] border-2 border-dashed rounded-2xl bg-zinc-900/50 p-3 ${
+ className={`w-[560px] border-2 border-dashed rounded-2xl bg-zinc-900/50 p-3 ${
ready ? "cursor-pointer" : "cursor-not-allowed"
} hover:bg-zinc-900/90`}
{...getRootProps()}
@@ -134,7 +134,7 @@ export default function UploadFile({ workspace, fetchKeys, setLoading }) {
<button
disabled={fetchingUrl}
type="submit"
- className="disabled:bg-white/20 disabled:text-slate-300 disabled:border-slate-400 disabled:cursor-wait bg bg-transparent hover:bg-slate-200 hover:text-slate-800 w-auto border border-white text-sm text-white p-2.5 rounded-lg transition-all duration-300"
+ className="disabled:bg-white/20 disabled:text-slate-300 disabled:border-slate-400 disabled:cursor-wait bg bg-transparent hover:bg-slate-200 hover:text-slate-800 w-auto border border-white text-sm text-white p-2.5 rounded-lg"
>
{fetchingUrl ? "Fetching..." : "Fetch website"}
</button>
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
index f73916290f32e377c1ff3ee1054d4d75185ec001..f473254273f59c108d5a8a74ded2e33c3e83afdc 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
@@ -53,7 +53,7 @@ export default function WorkspaceFileRow({
const handleMouseLeave = debounce(handleHideTooltip, 500);
return (
<div
- className={`items-center transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer
+ 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">
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx
index 68a5005a4a91f508d73a121fd8d76cf40a358b98..4cfa55a5d4728d2f7892a2565248796108693312 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx
@@ -55,7 +55,7 @@ function WorkspaceDirectory({
</h3>
</div>
<div
- className={`relative w-[560px] h-[445px] bg-zinc-900 rounded-2xl mt-5 overflow-y-auto border-4 transition-all duration-300 ${
+ className={`relative w-[560px] h-[445px] bg-zinc-900 rounded-2xl mt-5 overflow-y-auto border-4 ${
highlightWorkspace ? "border-cyan-300/80" : "border-transparent"
}`}
>
@@ -96,7 +96,7 @@ function WorkspaceDirectory({
</div>
</div>
{hasChanges && (
- <div className="flex items-center justify-between py-6 transition-all duration-300">
+ <div className="flex items-center justify-between py-6">
<div className="text-white/80">
<p className="text-sm font-semibold">
{embeddingCosts === 0
@@ -114,7 +114,7 @@ function WorkspaceDirectory({
<button
onClick={saveChanges}
- className="transition-all duration-300 border border-slate-200 px-5 py-2.5 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
+ className="border border-slate-200 px-5 py-2.5 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
>
Save and Embed
</button>
@@ -177,7 +177,7 @@ const PinAlert = memo(() => {
<button disabled={true} className="invisible" />
<button
onClick={dismissAlert}
- className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
+ className="border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
>
Okay, got it
</button>
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/index.jsx
index 5a5cf69d96c36dff0de3a28b29bd3b5533018170..12784299e44cbba61400ab987f914d522a73d878 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/index.jsx
@@ -191,7 +191,7 @@ export default function DocumentSettings({ workspace, systemSettings }) {
};
return (
- <div className="flex gap-x-6 justify-center -mt-6 z-10">
+ <div className="flex upload-modal -mt-6 z-10 relative">
<Directory
files={availableDocs}
setFiles={setAvailableDocs}
@@ -208,7 +208,7 @@ export default function DocumentSettings({ workspace, systemSettings }) {
moveToWorkspace={moveSelectedItemsToWorkspace}
setLoadingMessage={setLoadingMessage}
/>
- <div className="flex items-center">
+ <div className="upload-modal-arrow">
<ArrowsDownUp className="text-white text-base font-bold rotate-90 w-11 h-11" />
</div>
<WorkspaceDirectory
diff --git a/frontend/src/components/Modals/MangeWorkspace/index.jsx b/frontend/src/components/Modals/MangeWorkspace/index.jsx
index 010662efe704373c399d32dd6cfef3829a260299..4898f531f955e4503c655ad07b88f209d762119c 100644
--- a/frontend/src/components/Modals/MangeWorkspace/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/index.jsx
@@ -64,13 +64,14 @@ const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => {
return (
<div className="w-screen h-screen fixed top-0 left-0 flex justify-center items-center z-99">
<div className="backdrop h-full w-full absolute top-0 z-10" />
- <div className="absolute max-h-full w-fit transition duration-300 z-20">
+ <div className="absolute max-h-full w-fit transition duration-300 z-20 md:overflow-y-auto py-10">
<div className="relative bg-main-gradient rounded-[12px] shadow border-2 border-slate-300/10">
- <div className="flex items-start justify-between p-2 rounded-t border-gray-500/50 z-20 relative">
+ <div className="flex items-start justify-between p-2 rounded-t border-gray-500/50 relative">
+ <div />
<button
onClick={hideModal}
type="button"
- className="transition-all duration-300 text-gray-400 bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center hover:border-white/60 bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+ className="z-50 text-gray-400 bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center hover:border-white/60 bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
<X className="text-gray-300 text-lg" />
</button>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f65f9203b0a4bcacc91fdb05d05f0135e4afc380..c94ca23b937e5381867cd506c8fc6882afb08a12 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -613,3 +613,23 @@ dialog::backdrop {
.file-row.selected:nth-child(odd) {
@apply bg-sky-500/10;
}
+
+/* Flex upload modal to be a column when on small screens so that the UI
+does not extend the close button beyond the viewport. */
+@media (max-width: 1330px) {
+ .upload-modal {
+ @apply !flex-col !items-center !py-4 no-scroll;
+ }
+
+ .upload-modal-arrow {
+ margin-top: 0px !important;
+ }
+}
+
+.upload-modal {
+ @apply flex-row items-start gap-x-6 justify-center;
+}
+
+.upload-modal-arrow {
+ margin-top: 25%;
+}