diff --git a/components/apps/FileExplorer/StyledFileExplorer.ts b/components/apps/FileExplorer/StyledFileExplorer.ts index 98dfc6f9..778e476f 100644 --- a/components/apps/FileExplorer/StyledFileExplorer.ts +++ b/components/apps/FileExplorer/StyledFileExplorer.ts @@ -1,5 +1,5 @@ import styled from "styled-components"; -import StyledLoading from "components/system/Files/FileManager/StyledLoading"; +import StyledLoading from "components/system/Apps/StyledLoading"; import StyledDetailsFileManager from "components/system/Files/Views/Details/StyledFileManager"; import StyledIconFileManager from "components/system/Files/Views/Icon/StyledFileManager"; @@ -21,6 +21,7 @@ const StyledFileExplorer = styled.div` ${StyledLoading} { height: ${({ theme }) => `calc(100% - ${theme.sizes.fileExplorer.navBarHeight} - ${theme.sizes.fileExplorer.statusBarHeight})`}; + position: absolute; } `; diff --git a/components/apps/IRC/index.tsx b/components/apps/IRC/index.tsx index 516d5e74..b21644b3 100644 --- a/components/apps/IRC/index.tsx +++ b/components/apps/IRC/index.tsx @@ -1,7 +1,7 @@ import { useEffect, useRef, useState } from "react"; import { getNetworkConfig } from "components/apps/IRC/config"; import { type ComponentProcessProps } from "components/system/Apps/RenderComponent"; -import StyledLoading from "components/system/Files/FileManager/StyledLoading"; +import StyledLoading from "components/system/Apps/StyledLoading"; import { useProcesses } from "contexts/process"; import processDirectory from "contexts/process/directory"; import { IFRAME_CONFIG } from "utils/constants"; diff --git a/components/apps/Paint/index.tsx b/components/apps/Paint/index.tsx index 3a4fe765..95fc60bd 100644 --- a/components/apps/Paint/index.tsx +++ b/components/apps/Paint/index.tsx @@ -2,7 +2,7 @@ import { basename, dirname, join } from "path"; import { useCallback, useEffect, useRef, useState } from "react"; import StyledPaint from "components/apps/Paint/StyledPaint"; import { type ComponentProcessProps } from "components/system/Apps/RenderComponent"; -import StyledLoading from "components/system/Files/FileManager/StyledLoading"; +import StyledLoading from "components/system/Apps/StyledLoading"; import useFileDrop from "components/system/Files/FileManager/useFileDrop"; import useTitle from "components/system/Window/useTitle"; import { useFileSystem } from "contexts/fileSystem"; diff --git a/components/system/Apps/AppContainer.tsx b/components/system/Apps/AppContainer.tsx index f8871177..c3968171 100644 --- a/components/system/Apps/AppContainer.tsx +++ b/components/system/Apps/AppContainer.tsx @@ -1,7 +1,7 @@ import { memo, useMemo, useRef, useState } from "react"; import styled, { type IStyledComponent } from "styled-components"; import { type FastOmit } from "styled-components/dist/types"; -import StyledLoading from "components/system/Files/FileManager/StyledLoading"; +import StyledLoading from "components/system/Apps/StyledLoading"; import useFileDrop from "components/system/Files/FileManager/useFileDrop"; import { useProcesses } from "contexts/process"; diff --git a/components/system/Apps/StyledLoading.ts b/components/system/Apps/StyledLoading.ts new file mode 100644 index 00000000..5daeb28f --- /dev/null +++ b/components/system/Apps/StyledLoading.ts @@ -0,0 +1,29 @@ +import styled from "styled-components"; + +type StyledLoadingProps = { + $hasColumns?: boolean; +}; + +const StyledLoading = styled.div` + cursor: wait; + height: 100%; + width: 100%; + + &::before { + color: #fff; + content: "Working on it..."; + display: flex; + font-size: 12px; + font-weight: 200; + justify-content: center; + letter-spacing: 0.3px; + mix-blend-mode: difference; + padding-top: ${({ $hasColumns, theme }) => + $hasColumns + ? theme.sizes.window.textTopPadding + + theme.sizes.fileManager.columnHeight + : theme.sizes.window.textTopPadding}px; + } +`; + +export default StyledLoading; diff --git a/components/system/Files/FileManager/Columns/StyledColumns.ts b/components/system/Files/FileManager/Columns/StyledColumns.ts index 2e2746d0..5f72b5f9 100644 --- a/components/system/Files/FileManager/Columns/StyledColumns.ts +++ b/components/system/Files/FileManager/Columns/StyledColumns.ts @@ -12,7 +12,7 @@ const StyledColumns = styled.span` ol { display: flex; - height: ${({ theme }) => theme.sizes.fileManager.columnHeight}; + height: ${({ theme }) => theme.sizes.fileManager.columnHeight}px; li { color: rgb(222 222 222); @@ -46,7 +46,7 @@ const StyledColumns = styled.span` .resize { border-left: 1px solid rgb(99 99 99); cursor: col-resize; - height: 25px; + height: ${({ theme }) => theme.sizes.fileManager.columnHeight}px; padding-left: ${({ theme }) => theme.sizes.fileManager.columnResizeWidth}px; position: absolute; diff --git a/components/system/Files/FileManager/Columns/index.tsx b/components/system/Files/FileManager/Columns/index.tsx index fa4f8b4c..3cff8ae1 100644 --- a/components/system/Files/FileManager/Columns/index.tsx +++ b/components/system/Files/FileManager/Columns/index.tsx @@ -1,4 +1,4 @@ -import { memo, useRef } from "react"; +import { memo, useCallback, useRef } from "react"; import { useTheme } from "styled-components"; import dynamic from "next/dynamic"; import { sortFiles } from "components/system/Files/FileManager/functions"; @@ -35,6 +35,64 @@ const Columns: FC = ({ const lastClientX = useRef(0); const { setSortOrder, sortOrders } = useSession(); const [, sortedBy = "name", ascending] = sortOrders[directory] ?? []; + const onPointerDownCapture = useCallback( + (name: string) => (event: React.PointerEvent) => { + if (event.button !== 0) return; + + draggingRef.current = + (event.target as HTMLElement).className === "resize" ? name : ""; + lastClientX.current = event.clientX; + }, + [] + ); + const onPointerMoveCapture = useCallback( + (event: React.PointerEvent) => { + if (draggingRef.current) { + const dragName = draggingRef.current as ColumnName; + + setColumns((currentColumns) => { + if (!currentColumns?.[dragName]) return currentColumns; + + const newColumns = { ...currentColumns }; + const newSize = + newColumns[dragName].width + event.clientX - lastClientX.current; + + if ( + newSize < sizes.fileManager.columnMinWidth || + Math.abs(lastClientX.current - event.clientX) > MAX_STEPS_PER_RESIZE + ) { + return newColumns; + } + + newColumns[dragName].width = newSize; + lastClientX.current = event.clientX; + + return newColumns; + }); + } + }, + [setColumns, sizes.fileManager.columnMinWidth] + ); + const onPointerUpCapture = useCallback( + (name: string) => (event: React.PointerEvent) => { + if (event.button !== 0) return; + + if (draggingRef.current) { + draggingRef.current = ""; + lastClientX.current = 0; + } else { + const sortBy = name as SortBy; + + setSortOrder( + directory, + Object.keys(sortFiles(directory, files, sortBy, !ascending)), + sortBy, + !ascending + ); + } + }, + [ascending, directory, files, setSortOrder] + ); return ( @@ -42,60 +100,9 @@ const Columns: FC = ({ {DEFAULT_COLUMN_ORDER.map((name) => (
  • { - if (event.button !== 0) return; - - draggingRef.current = - (event.target as HTMLElement).className === "resize" - ? name - : ""; - lastClientX.current = event.clientX; - }} - onPointerMoveCapture={(event) => { - if (draggingRef.current) { - const dragName = draggingRef.current as ColumnName; - - setColumns((currentColumns) => { - if (!currentColumns?.[dragName]) return currentColumns; - - const newColumns = { ...currentColumns }; - const newSize = - newColumns[dragName].width + - event.clientX - - lastClientX.current; - - if ( - newSize < sizes.fileManager.columnMinWidth || - Math.abs(lastClientX.current - event.clientX) > - MAX_STEPS_PER_RESIZE - ) { - return newColumns; - } - - newColumns[dragName].width = newSize; - lastClientX.current = event.clientX; - - return newColumns; - }); - } - }} - onPointerUpCapture={(event) => { - if (event.button !== 0) return; - - if (draggingRef.current) { - draggingRef.current = ""; - lastClientX.current = 0; - } else { - const sortBy = name as SortBy; - - setSortOrder( - directory, - Object.keys(sortFiles(directory, files, sortBy, !ascending)), - sortBy, - !ascending - ); - } - }} + onPointerDownCapture={onPointerDownCapture(name)} + onPointerMoveCapture={onPointerMoveCapture} + onPointerUpCapture={onPointerUpCapture(name)} style={{ width: `${columns[name].width}px` }} > {sortedBy === name && } diff --git a/components/system/Files/FileManager/StyledEmpty.ts b/components/system/Files/FileManager/StyledEmpty.ts index 53ee7c8f..93adb251 100644 --- a/components/system/Files/FileManager/StyledEmpty.ts +++ b/components/system/Files/FileManager/StyledEmpty.ts @@ -1,6 +1,10 @@ import styled from "styled-components"; -const StyledEmpty = styled.div` +type StyledEmptyProps = { + $hasColumns?: boolean; +}; + +const StyledEmpty = styled.div` position: absolute; width: 100%; @@ -13,7 +17,11 @@ const StyledEmpty = styled.div` justify-content: center; letter-spacing: 0.3px; mix-blend-mode: difference; - padding-top: 14px; + padding-top: ${({ $hasColumns, theme }) => + $hasColumns + ? theme.sizes.window.textTopPadding + + theme.sizes.fileManager.columnHeight + : theme.sizes.window.textTopPadding}px; } `; diff --git a/components/system/Files/FileManager/StyledLoading.ts b/components/system/Files/FileManager/StyledLoading.ts deleted file mode 100644 index 55203015..00000000 --- a/components/system/Files/FileManager/StyledLoading.ts +++ /dev/null @@ -1,19 +0,0 @@ -import styled from "styled-components"; - -const StyledLoading = styled.div` - cursor: wait; - height: 100%; - width: 100%; - - &::before { - color: #fff; - content: "Working on it..."; - display: flex; - font-size: 12px; - justify-content: center; - mix-blend-mode: difference; - padding-top: 18px; - } -`; - -export default StyledLoading; diff --git a/components/system/Files/FileManager/index.tsx b/components/system/Files/FileManager/index.tsx index a7a3e212..fe64e4de 100644 --- a/components/system/Files/FileManager/index.tsx +++ b/components/system/Files/FileManager/index.tsx @@ -1,7 +1,7 @@ import { basename, join } from "path"; import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"; import dynamic from "next/dynamic"; -import StyledLoading from "components/system/Files/FileManager/StyledLoading"; +import StyledLoading from "components/system/Apps/StyledLoading"; import StatusBar from "components/system/Files/FileManager/StatusBar"; import { DEFAULT_COLUMNS, @@ -85,11 +85,12 @@ const FileManager: FC = ({ const [renaming, setRenaming] = useState(""); const [mounted, setMounted] = useState(false); const fileManagerRef = useRef(null); + const isFileExplorerIconView = useMemo( + () => !isStartMenu && !isDesktop && !isDetailsView, + [isDesktop, isDetailsView, isStartMenu] + ); const { focusedEntries, focusableEntry, ...focusFunctions } = - useFocusableEntries( - fileManagerRef, - !isStartMenu && !isDesktop && !isDetailsView - ); + useFocusableEntries(fileManagerRef, isFileExplorerIconView); const { fileActions, files, folderActions, isLoading, updateFiles } = useFolder(url, setRenaming, focusFunctions, { hideFolders, @@ -121,7 +122,11 @@ const FileManager: FC = ({ isDesktop, isStartMenu ); - const loading = (!hideLoading && isLoading) || url !== currentUrl; + const loading = useMemo(() => { + if (hideLoading) return false; + + return isLoading || url !== currentUrl; + }, [currentUrl, hideLoading, isLoading, url]); const setView = useCallback( (newView: FileManagerViewNames) => { setViews((currentViews) => ({ ...currentViews, [url]: newView })); @@ -151,12 +156,10 @@ const FileManager: FC = ({ [keyShortcuts, renaming] ); const fileKeys = useMemo(() => Object.keys(files), [files]); - const isEmptyFolder = - !isDesktop && - !isStartMenu && - !loading && - view !== "list" && - fileKeys.length === 0; + const isEmptyFolder = useMemo( + () => !isDesktop && !isStartMenu && !loading && fileKeys.length === 0, + [fileKeys.length, isDesktop, isStartMenu, loading] + ); useEffect(() => { if ( @@ -231,34 +234,33 @@ const FileManager: FC = ({ return ( <> - {loading ? ( - - ) : ( - <> - {isEmptyFolder && } - - {isDetailsView && columns && ( - - )} + {loading && } + {!loading && isEmptyFolder && } + + {isDetailsView && columns && ( + + )} + {!loading && ( + <> {isSelecting && } {fileKeys.map((file) => ( = ({ /> ))} - - - )} + + )} + {showStatusBar && ( skipSorting || !sortBy || sortBy === "name" || sortBy === "type", + [skipSorting, sortBy] + ); const updateFiles = useCallback( async (newFile?: string, oldFile?: string) => { if (oldFile) { @@ -739,6 +741,7 @@ const useFolder = ( useEffect(() => { if (directory !== currentDirectory) { + setIsLoading(true); setCurrentDirectory(directory); setFiles(NO_FILES); } diff --git a/components/system/Window/StyledWindow.ts b/components/system/Window/StyledWindow.ts index bd675359..1ad343aa 100644 --- a/components/system/Window/StyledWindow.ts +++ b/components/system/Window/StyledWindow.ts @@ -1,6 +1,6 @@ import { m as motion } from "motion/react"; import styled from "styled-components"; -import StyledLoading from "components/system/Files/FileManager/StyledLoading"; +import StyledLoading from "components/system/Apps/StyledLoading"; type StyledWindowProps = { $backgroundBlur?: string; diff --git a/styles/defaultTheme/sizes.ts b/styles/defaultTheme/sizes.ts index e6538a04..b9f82031 100644 --- a/styles/defaultTheme/sizes.ts +++ b/styles/defaultTheme/sizes.ts @@ -26,7 +26,7 @@ const sizes = { }, fileManager: { columnGap: "1px", - columnHeight: "25px", + columnHeight: 25, columnMinWidth: 70, columnResizeWidth: 7, detailsEndPadding: 16, @@ -87,6 +87,7 @@ const sizes = { window: { cascadeOffset: 26, outline: "1px", + textTopPadding: 14, }, };