From dff964747a3bd5545199836a55f9ecf31ada48f1 Mon Sep 17 00:00:00 2001 From: ewsgit Date: Tue, 5 May 2026 09:21:07 +0000 Subject: [PATCH] add non-image previews to the files preview dialog --- applications/uk.ewsgit.files/backend/index.ts | 3 +- .../uk.ewsgit.files/web/layout/Layout.tsx | 6 ++-- .../PreviewDialog/PreviewDialog.module.scss | 31 ++++++++++++++---- .../PreviewDialog/PreviewDialog.tsx | 32 ++++++++++++++----- .../uk.ewsgit.files/web/pages/dir/View.tsx | 22 +++++++++++-- .../web/pages/dir/itemSelection.ts | 5 +-- 6 files changed, 77 insertions(+), 22 deletions(-) diff --git a/applications/uk.ewsgit.files/backend/index.ts b/applications/uk.ewsgit.files/backend/index.ts index 5ed5999..a08937a 100644 --- a/applications/uk.ewsgit.files/backend/index.ts +++ b/applications/uk.ewsgit.files/backend/index.ts @@ -510,7 +510,7 @@ const router = t.router({ const pathStat = await fs.lstat(resolvedPath); const isDirectory = pathStat.isDirectory(); - const fileType = instance.sys.filesystem.getFileType(resolvedPath); + const fileType = !isDirectory ? instance.sys.filesystem.getFileType(resolvedPath) : "directory"; let imageDimensions: { width: number; height: number } = { width: 0, height: 0 }; @@ -534,6 +534,7 @@ const router = t.router({ : undefined, metadata: { size: pathStat.size, + type: pathStat.isSymbolicLink() ? "link" : pathStat.isDirectory() ? "directory" : pathStat.isFile() ? "file" : "file", itemCount: isDirectory ? (await fs.readdir(resolvedPath)).length : undefined, pixelate: imageDimensions.width !== 0 && imageDimensions.height !== 0 && imageDimensions.width < 640 && imageDimensions.height < 640, }, diff --git a/applications/uk.ewsgit.files/web/layout/Layout.tsx b/applications/uk.ewsgit.files/web/layout/Layout.tsx index 9a00211..adef922 100644 --- a/applications/uk.ewsgit.files/web/layout/Layout.tsx +++ b/applications/uk.ewsgit.files/web/layout/Layout.tsx @@ -6,7 +6,7 @@ import PERSON_ICON from "@material-symbols/svg-700/outlined/person.svg"; import UKSideBar from "@onlineworkspace/uikit-solid/src/components/sideBar/UKSideBar.tsx"; import {useNavigate} from "@solidjs/router"; import browserPath from "path-browserify"; -import {type Component, type ParentProps, Show, useContext} from "solid-js"; +import {type Component, type ParentProps, Show, Suspense, useContext} from "solid-js"; import {AppContext} from "../appContext.ts"; import PreviewDialog from "./components/PreviewDialog/PreviewDialog.tsx"; import PreviewPane from "./components/PreviewPane/PreviewPane.tsx"; @@ -121,9 +121,11 @@ const Layout: Component = (props) => { + - + + ); }; diff --git a/applications/uk.ewsgit.files/web/layout/components/PreviewDialog/PreviewDialog.module.scss b/applications/uk.ewsgit.files/web/layout/components/PreviewDialog/PreviewDialog.module.scss index 690b612..520c45a 100644 --- a/applications/uk.ewsgit.files/web/layout/components/PreviewDialog/PreviewDialog.module.scss +++ b/applications/uk.ewsgit.files/web/layout/components/PreviewDialog/PreviewDialog.module.scss @@ -5,7 +5,7 @@ top: 0; left: 0; z-index: 9; - background: #2224; + background: transparent; border: none; } @@ -33,18 +33,16 @@ &.expanded { max-width: 100%; } - - &.loadingData { - height: 256px; - } } @keyframes animateIn { from { - transform: translate(-50%, -50%) scale(0); + transform: translate(-50%, -50%) scale(0.75); + opacity: 0; } to { transform: translate(-50%, -50%) scale(1); + opacity: 1; } } @@ -101,3 +99,24 @@ .originalHasLoaded { opacity: 1; } + +.generalContent { + display: flex; + align-items: center; + justify-content: center; + flex-direction: row; + gap: 1rem; + width: 100%; + padding-top: 2rem; + padding-bottom: 2rem; + + .generalIcon { + --icon-size: 8rem; + } + + .metadata { + display: flex; + flex-direction: column; + gap: 0.25rem; + } +} diff --git a/applications/uk.ewsgit.files/web/layout/components/PreviewDialog/PreviewDialog.tsx b/applications/uk.ewsgit.files/web/layout/components/PreviewDialog/PreviewDialog.tsx index ca88f79..0f64906 100644 --- a/applications/uk.ewsgit.files/web/layout/components/PreviewDialog/PreviewDialog.tsx +++ b/applications/uk.ewsgit.files/web/layout/components/PreviewDialog/PreviewDialog.tsx @@ -13,12 +13,16 @@ import {AppContext} from "../../../appContext"; import styles from "./PreviewDialog.module.scss"; import clsx from "clsx"; import filesystemInterface, {type UniformResourceLocator} from "../../../lib/filesystemInterface"; +import UKDivider from "@onlineworkspace/uikit-solid/src/components/divider/UKDivider.jsx"; +import UKIcon from "@onlineworkspace/uikit-solid/src/components/icon/UKIcon.jsx"; +import iconForItemType from "../../../pages/dir/iconForItemType"; +import humanReadableSize from "../../../lib/humanReadableSize"; const PreviewDialog: Component<{pathUrl: UniformResourceLocator}> = (props) => { const appContext = useContext(AppContext); const [ isExpanded, setIsExpanded ] = createSignal(false); const [ originalHasLoaded, setOriginalHasLoaded ] = createSignal(false); - const [ data ] = createResource(() => props.pathUrl, (url) => filesystemInterface.getPreviewDialogMetadata(url as UniformResourceLocator)) + const [data] = createResource(() => props.pathUrl, (url) => filesystemInterface.getPreviewDialogMetadata(url as UniformResourceLocator)) return ( <> @@ -29,7 +33,7 @@ const PreviewDialog: Component<{pathUrl: UniformResourceLocator}> = (props) => { appContext?.setGlobalState("showPreview", false); }} /> - +
{ !appContext?.isDesktopApp && <> @@ -53,9 +57,11 @@ const PreviewDialog: Component<{pathUrl: UniformResourceLocator}> = (props) => { /> } + Preview for {path.basename(props.pathUrl)} - + + = (props) => {
, {status: "ok"}>)?.data?.metadata?.pixelate && styles.pixelate)}> - + , { status: "ok" }>).data.assets} fallback={<> +
+ { iconForItemType((data() as Extract, { status: "ok" }>).data.metadata.type as unknown as any) } + +
+ {path.basename(props.pathUrl)} + Contains { (data() as Extract, { status: "ok" }>).data.metadata.itemCount} items + {humanReadableSize((data() as Extract, { status: "ok" }>).data.metadata.size)} +
+
+ }> { data()!.status === "ok" && <> , {status: "ok"}>).data.assets?.small || ""} alt="preview"> @@ -93,11 +109,11 @@ const PreviewDialog: Component<{pathUrl: UniformResourceLocator}> = (props) => { setOriginalHasLoaded(true)} src={(data() as Extract, {status: "ok"}>).data.assets?.original || ""} alt="preview"> } - } + } + - -
- + + ); }; diff --git a/applications/uk.ewsgit.files/web/pages/dir/View.tsx b/applications/uk.ewsgit.files/web/pages/dir/View.tsx index d45340e..edd4715 100644 --- a/applications/uk.ewsgit.files/web/pages/dir/View.tsx +++ b/applications/uk.ewsgit.files/web/pages/dir/View.tsx @@ -1,7 +1,7 @@ import ERROR_ICON from "@material-symbols/svg-700/outlined/error.svg"; import FOLDER_LIMITED_ICON from "@material-symbols/svg-700/outlined/folder_limited.svg"; import {useSearchParams} from "@solidjs/router"; -import {type Component, createEffect, createSignal, Match, onCleanup, onMount, Switch, useContext} from "solid-js"; +import {type Component, createEffect, createSignal, Match, onCleanup, onMount, Suspense, Switch, useContext} from "solid-js"; import {createStore} from "solid-js/store"; import type {Task} from "../../App.tsx"; import {AppContext} from "../../appContext.ts"; @@ -159,6 +159,22 @@ const View: Component = () => { appContext?.setGlobalState("disableShortcuts", false) break; } + case "Enter": { + if (appContext?.viewState.lastSelectedItem) { + const item = appContext.viewState.viewItems.find(i => i.path === appContext.viewState.lastSelectedItem) + + if (!item) return; + + if (item.type === "file") { + filesystemInterface.openInDefaultApplication(item.path as UniformResourceLocator); + return; + } + + setSearchParams({ path: item.path }); + } + deselectAllItems(appContext!) + break; + } case "ArrowLeft": { selectPreviousItem(appContext!) break; @@ -197,7 +213,7 @@ const View: Component = () => { }) return ( - <> + {errorMessage() ? ( ) : appContext?.viewState.viewItems.length === 0 && !appContext.viewState.isLoading ? ( @@ -323,7 +339,7 @@ const View: Component = () => { )} - + ); }; diff --git a/applications/uk.ewsgit.files/web/pages/dir/itemSelection.ts b/applications/uk.ewsgit.files/web/pages/dir/itemSelection.ts index 82c7cbe..e21fb06 100644 --- a/applications/uk.ewsgit.files/web/pages/dir/itemSelection.ts +++ b/applications/uk.ewsgit.files/web/pages/dir/itemSelection.ts @@ -9,9 +9,10 @@ export function selectItem(appContext: AppContextType, path: string) { } export function deselectAllItems(appContext: AppContextType) { - appContext?.setViewState("lastSelectedItem", undefined); - appContext?.setViewState("selectedItems", []); + appContext.setViewState("lastSelectedItem", undefined); + appContext.setViewState("selectedItems", []); appContext.setViewState("lastSelectionTime", -1); + appContext.setGlobalState("showPreview", false) return true; } -- 2.51.2