diff --git a/web/packages/gallery/components/viewer/FileViewer.tsx b/web/packages/gallery/components/viewer/FileViewer.tsx index ab1b385905..ad7247a3ea 100644 --- a/web/packages/gallery/components/viewer/FileViewer.tsx +++ b/web/packages/gallery/components/viewer/FileViewer.tsx @@ -17,6 +17,7 @@ import { isDesktop } from "@/base/app"; import { type ModalVisibilityProps } from "@/base/components/utils/modal"; import { useBaseContext } from "@/base/context"; import { lowercaseExtension } from "@/base/file-name"; +import { pt } from "@/base/i18n"; import type { LocalUser } from "@/base/local-user"; import log from "@/base/log"; import { @@ -32,7 +33,7 @@ import { ImageEditorOverlay, type ImageEditorOverlayProps, } from "@/new/photos/components/ImageEditorOverlay"; -import { Button, Menu, styled } from "@mui/material"; +import { Button, Menu, MenuItem, styled } from "@mui/material"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { fileInfoExifForFile } from "./data-source"; import { @@ -417,7 +418,9 @@ const FileViewer: React.FC = ({ list: { "aria-labelledby": moreButtonID }, }} > - Test + {activeAnnotatedFile?.annotation.isEditableImage && ( + {/*TODO */ pt("Edit image")} + )} onViewInfo(currentAnnotatedFile()), }); - // TODO(PS): - if (showModifyActions && onEditImage && false) { + if (showModifyActions && onEditImage) { pswp.ui.registerElement({ - name: "edit", + name: "more", // TODO(PS): - // title: t("edit_image"), - title: pt("Edit image"), + title: pt("More"), order: 16, isButton: true, - html: createPSRegisterElementIconHTML("edit"), - // TODO - // onClick: withCurrentAnnotatedFile(delegate.onEditImage), - // onInit: (buttonElement) => - // pswp.on("change", () => - // showIf( - // buttonElement, - // !!currentFileAnnotation().isEditableImage, - // ), - // ), + html: createPSRegisterElementIconHTML("more"), + onInit: (buttonElement) => { + buttonElement.setAttribute("id", moreButtonID); + buttonElement.setAttribute("aria-haspopup", "true"); + pswp.on("change", () => + showIf( + buttonElement, + !!currentFileAnnotation().isEditableImage, + ), + ); + }, + onClick: (e) => { + const buttonElement = e.target; + // See also: `resetMoreMenuButtonOnMenuClose`. + buttonElement.setAttribute("aria-controls", moreMenuID); + buttonElement.setAttribute("aria-expanded", true); + onMore(currentAnnotatedFile(), buttonElement); + }, }); } - - pswp.ui.registerElement({ - name: "more", - // TODO(PS): - title: pt("More"), - order: 17, - isButton: true, - html: createPSRegisterElementIconHTML("more"), - onInit: (buttonElement) => { - buttonElement.setAttribute("id", moreButtonID); - buttonElement.setAttribute("aria-haspopup", "true"); - }, - onClick: (e) => { - const buttonElement = e.target; - // See also: `resetMoreMenuButtonOnMenuClose`. - buttonElement.setAttribute("aria-controls", moreMenuID); - buttonElement.setAttribute("aria-expanded", true); - onMore(currentAnnotatedFile(), buttonElement); - }, - }); }); // Modify the default UI elements.