From 3be7f7b55e98421caef2d4fdb3fb6f6a83527d26 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Mon, 10 Mar 2025 17:40:29 +0530 Subject: [PATCH] Inline --- web/packages/gallery/components/FileInfo.tsx | 11 +-- .../gallery/components/viewer/FileViewer.tsx | 95 ++++++++++++++++++- .../components/FileViewerComponents.tsx | 94 ------------------ 3 files changed, 98 insertions(+), 102 deletions(-) delete mode 100644 web/packages/new/photos/components/FileViewerComponents.tsx diff --git a/web/packages/gallery/components/FileInfo.tsx b/web/packages/gallery/components/FileInfo.tsx index 31f7250d7e..2fd9eb97bd 100644 --- a/web/packages/gallery/components/FileInfo.tsx +++ b/web/packages/gallery/components/FileInfo.tsx @@ -1,10 +1,9 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ -/* TODO: Audit this file -Plan of action: -- Move common components into FileInfoComponents.tsx - -- Move the rest out to files in the apps themeselves: albums/SharedFileInfo - and photos/FileInfo to deal with the @/new/photos imports here. +/* TODO: Split this file to deal with the @/new/photos imports. +1. Move common components into FileInfoComponents.tsx +2. Move the rest out to files in the apps themeselves: + - albums/SharedFileInfo + - photos/FileInfo */ import { assertionFailed } from "@/base/assert"; diff --git a/web/packages/gallery/components/viewer/FileViewer.tsx b/web/packages/gallery/components/viewer/FileViewer.tsx index 4ab53f564d..5b6810e799 100644 --- a/web/packages/gallery/components/viewer/FileViewer.tsx +++ b/web/packages/gallery/components/viewer/FileViewer.tsx @@ -4,7 +4,11 @@ import { isDesktop } from "@/base/app"; import { SpacedRow } from "@/base/components/containers"; +import { InlineErrorIndicator } from "@/base/components/ErrorIndicator"; +import { TitledMiniDialog } from "@/base/components/MiniDialog"; import { DialogCloseIconButton } from "@/base/components/mui/DialogCloseIconButton"; +import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton"; +import { LoadingButton } from "@/base/components/mui/LoadingButton"; import { useIsSmallWidth } from "@/base/components/utils/hooks"; import { type ModalVisibilityProps } from "@/base/components/utils/modal"; import { useBaseContext } from "@/base/context"; @@ -21,7 +25,6 @@ import type { Collection } from "@/media/collection"; import { FileType } from "@/media/file-type"; import type { EnteFile } from "@/media/file.js"; import { isHEICExtension, needsJPEGConversion } from "@/media/formats"; -import { ConfirmDeleteFileDialog } from "@/new/photos/components/FileViewerComponents"; import { ImageEditorOverlay, type ImageEditorOverlayProps, @@ -39,8 +42,10 @@ import { DialogTitle, Menu, MenuItem, + Stack, styled, Typography, + type ModalProps, } from "@mui/material"; import { t } from "i18next"; import React, { @@ -838,7 +843,6 @@ export const FileViewer: React.FC = ({ - {/* TODO(PS): Fix imports */} = ({ children }) => ( {children} ); +type ConfirmDeleteFileDialogProps = ModalVisibilityProps & { + /** + * Called when the user confirms the deletion. + * + * The delete button will show an activity indicator until this async + * operation completes. + */ + onConfirm: () => Promise; +}; + +/** + * A bespoke variant of AttributedMiniDialog for use by the delete file + * confirmation prompt that we show in the file viewer. + * + * - It auto focuses the primary action. + * - It uses a lighter backdrop in light mode. + */ +const ConfirmDeleteFileDialog: React.FC = ({ + open, + onClose, + onConfirm, +}) => { + const [phase, setPhase] = useState<"loading" | "failed" | undefined>(); + + const resetPhaseAndClose = () => { + setPhase(undefined); + onClose(); + }; + + const handleClick = async () => { + setPhase("loading"); + try { + await onConfirm(); + resetPhaseAndClose(); + } catch (e) { + log.error(e); + setPhase("failed"); + } + }; + + const handleClose: ModalProps["onClose"] = (_, reason) => { + // Ignore backdrop clicks when we're processing the user request. + if (reason == "backdropClick" && phase == "loading") return; + resetPhaseAndClose(); + }; + + return ( + ({ + // See: [Note: Lighter backdrop for overlays on photo viewer] + ...theme.applyStyles("light", { + ".MuiBackdrop-root": { + backgroundColor: theme.vars.palette.backdrop.faint, + }, + }), + })} + > + + {t("trash_file_message")} + + + {phase == "failed" && } + + {t("move_to_trash")} + + + {t("cancel")} + + + + ); +}; + const Shortcuts: React.FC = ({ open, onClose }) => ( Promise; -}; - -/** - * A bespoke variant of AttributedMiniDialog for use by the delete file - * confirmation prompt that we show in the image viewer. - * - * - It auto focuses the primary action. - * - It uses a lighter backdrop in light mode. - */ -export const ConfirmDeleteFileDialog: React.FC< - ConfirmDeleteFileDialogProps -> = ({ open, onClose, onConfirm }) => { - const [phase, setPhase] = useState<"loading" | "failed" | undefined>(); - - const resetPhaseAndClose = () => { - setPhase(undefined); - onClose(); - }; - - const handleClick = async () => { - setPhase("loading"); - try { - await onConfirm(); - resetPhaseAndClose(); - } catch (e) { - log.error(e); - setPhase("failed"); - } - }; - - const handleClose: ModalProps["onClose"] = (_, reason) => { - // Ignore backdrop clicks when we're processing the user request. - if (reason == "backdropClick" && phase == "loading") return; - resetPhaseAndClose(); - }; - - return ( - ({ - // See: [Note: Lighter backdrop for overlays on photo viewer] - ...theme.applyStyles("light", { - ".MuiBackdrop-root": { - backgroundColor: theme.vars.palette.backdrop.faint, - }, - }), - })} - > - - {t("trash_file_message")} - - - {phase == "failed" && } - - {t("move_to_trash")} - - - {t("cancel")} - - - - ); -};