From a307eda1d1949134b564c7eb82860168d7a8e069 Mon Sep 17 00:00:00 2001 From: Prozilla Date: Mon, 11 Dec 2023 20:47:45 +0100 Subject: [PATCH] Added virtual file & folder links --- .../file-explorer/FileExplorer.jsx | 54 ++----- .../file-explorer/FileExplorer.module.css | 33 ++++- .../file-explorer/FilePreview.jsx | 31 ++++ .../file-explorer/FolderPreview.jsx | 18 +++ src/components/task-bar/menus/HomeMenu.jsx | 2 +- src/features/virtual-drive/VirtualFileLink.js | 105 ++++++++++++++ .../virtual-drive/VirtualFolderLink.js | 133 ++++++++++++++++++ src/features/virtual-drive/virtualBase.js | 14 ++ src/features/virtual-drive/virtualFile.js | 7 + src/features/virtual-drive/virtualFolder.js | 112 ++++++++++++++- src/features/virtual-drive/virtualRoot.js | 38 ++++- 11 files changed, 495 insertions(+), 52 deletions(-) create mode 100644 src/components/applications/file-explorer/FilePreview.jsx create mode 100644 src/components/applications/file-explorer/FolderPreview.jsx create mode 100644 src/features/virtual-drive/VirtualFileLink.js create mode 100644 src/features/virtual-drive/VirtualFolderLink.js diff --git a/src/components/applications/file-explorer/FileExplorer.jsx b/src/components/applications/file-explorer/FileExplorer.jsx index f8e1f16..e9e3ef6 100644 --- a/src/components/applications/file-explorer/FileExplorer.jsx +++ b/src/components/applications/file-explorer/FileExplorer.jsx @@ -2,8 +2,7 @@ import { useState } from "react"; import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext.js"; import styles from "./FileExplorer.module.css"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faArrowUp, faCaretLeft, faCaretRight, faCog, faDesktop, faFile, faFileLines, faFolder, faHouse, faImage, faPlus, faSearch } from "@fortawesome/free-solid-svg-icons"; -import { VirtualFile } from "../../../features/virtual-drive/virtualFile.js"; +import { faArrowUp, faCaretLeft, faCaretRight, faCog, faDesktop, faFileLines, faHouse, faImage, faPlus, faSearch } from "@fortawesome/free-solid-svg-icons"; import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext.js"; import { useContextMenu } from "../../../hooks/modals/contextMenu.js"; import { useModals } from "../../../hooks/modals/modals.js"; @@ -12,31 +11,8 @@ import { QuickAccessButton } from "./QuickAccessButton.jsx"; import { useDialogBox } from "../../../hooks/modals/dialogBox.js"; import Vector2 from "../../../features/math/vector2.js"; import { DIALOG_CONTENT_TYPES } from "../../../constants/modals.js"; - -/** - * @param {object} props - * @param {VirtualFile} props.file - */ -function FilePreview({ file }) { - let preview = null; - - switch (file.extension) { - case "png": - preview = (
- {file.id} -
); - break; - case "txt": - case "md": - preview = ; - break; - default: - preview = ; - break; - } - - return preview; -} +import { FilePreview } from "./FilePreview.jsx"; +import { FolderPreview } from "./FolderPreview.jsx"; export function FileExplorer({ startPath, app }) { const virtualRoot = useVirtualRoot(); @@ -60,13 +36,13 @@ export function FileExplorer({ startPath, app }) { "Delete": ({ name }) => { currentDirectory.findSubFolder(name)?.delete(); } } }); - const { onContextMenu: onNew } = useContextMenu({ - modalsManager, - options: { - "File": () => { currentDirectory.createFile("New File"); }, - "Folder": () => { currentDirectory.createFolder("New Folder"); } - } - }); + // const { onContextMenu: onNew } = useContextMenu({ + // modalsManager, + // options: { + // "File": () => { currentDirectory.createFile("New File"); }, + // "Folder": () => { currentDirectory.createFolder("New Folder"); } + // } + // }); const { onDialogBox } = useDialogBox({ modalsManager }); const changeDirectory = (path, absolute = false) => { @@ -159,17 +135,17 @@ export function FileExplorer({ startPath, app }) { { changeDirectory("~/Images"); }} icon={faImage}/>
- {currentDirectory?.getSubFolders(showHidden)?.map(({ name }, index) => + {currentDirectory?.getSubFolders(showHidden)?.map((folder, index) => )} {currentDirectory?.getFiles(showHidden)?.map((file, index) => diff --git a/src/components/applications/file-explorer/FileExplorer.module.css b/src/components/applications/file-explorer/FileExplorer.module.css index 11c0cf5..1533be3 100644 --- a/src/components/applications/file-explorer/FileExplorer.module.css +++ b/src/components/applications/file-explorer/FileExplorer.module.css @@ -163,14 +163,45 @@ border-radius: 0.5rem; } -.File-button svg, .Folder-button svg { +.File-button svg, .Folder-button > div { width: 50%; height: auto; aspect-ratio: 1; } +.Folder-button > div > svg { + width: 100%; + height: 100%; + aspect-ratio: 1; +} + .File-button p, .Folder-button p { max-width: 100%; margin: 0; word-wrap: break-word; +} + +.Folder-button > div { + position: relative; +} + +.Folder-link-icon { + position: absolute; + display: flex; + justify-content: flex-end; + align-items: flex-end; + top: 0; + left: 0; + width: 92.5%; + height: 87.5%; +} + +.Folder-link-icon svg { + width: 55%; + height: auto; + aspect-ratio: 1; +} + +.Folder-link-icon svg * { + fill: var(--background-color-b); } \ No newline at end of file diff --git a/src/components/applications/file-explorer/FilePreview.jsx b/src/components/applications/file-explorer/FilePreview.jsx new file mode 100644 index 0000000..155440c --- /dev/null +++ b/src/components/applications/file-explorer/FilePreview.jsx @@ -0,0 +1,31 @@ +import { faFile, faFileInvoice, faFileLines } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import styles from "./FileExplorer.module.css"; +import { VirtualFile } from "../../../features/virtual-drive/virtualFile.js"; + +/** + * @param {object} props + * @param {VirtualFile} props.file + */ +export function FilePreview({ file }) { + let preview = null; + + switch (file.extension) { + case "png": + preview = (
+ {file.id} +
); + break; + case "txt": + preview = ; + break; + case "md": + preview = ; + break; + default: + preview = ; + break; + } + + return preview; +} \ No newline at end of file diff --git a/src/components/applications/file-explorer/FolderPreview.jsx b/src/components/applications/file-explorer/FolderPreview.jsx new file mode 100644 index 0000000..e86c825 --- /dev/null +++ b/src/components/applications/file-explorer/FolderPreview.jsx @@ -0,0 +1,18 @@ +import { faFolder, faLink } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import styles from "./FileExplorer.module.css"; +import { VirtualFolder } from "../../../features/virtual-drive/virtualFolder.js"; + +/** + * @param {object} props + * @param {VirtualFolder} props.folder + */ +export function FolderPreview({ folder }) { + return (
+ + {folder.linkedPath + ?
+ : null + } +
); +} \ No newline at end of file diff --git a/src/components/task-bar/menus/HomeMenu.jsx b/src/components/task-bar/menus/HomeMenu.jsx index ea04990..51abba1 100644 --- a/src/components/task-bar/menus/HomeMenu.jsx +++ b/src/components/task-bar/menus/HomeMenu.jsx @@ -61,7 +61,7 @@ export function HomeMenu({ active, setActive, search }) {
-