kenmirrors/ente
1
0
Fork 0
mirror of https://github.com/ente-io/ente.git synced 2025-08-13 01:27:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Menu 1

Browse Source
This commit is contained in:
Manav Rathi
2025-03-04 09:42:11 +05:30
parent e376bf00e0
commit 35b3dbe650
1 changed files with 65 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
web/packages/gallery/components/viewer/FileViewer.tsx
View File

@@ -33,7 +33,16 @@ import {
ImageEditorOverlay,
type ImageEditorOverlayProps,
} from "@/new/photos/components/ImageEditorOverlay";
import { Button, Menu, MenuItem, styled } from "@mui/material";
import EditIcon from "@mui/icons-material/Edit";
import {
Button,
ListItemText,
Menu,
MenuItem,
Stack,
styled,
Typography,
} from "@mui/material";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { fileInfoExifForFile, updateItemDataAlt } from "./data-source";
import {
@@ -418,7 +427,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
onSelectPerson={handleSelectPerson}
{...{ fileCollectionIDs, allCollectionsNameByID }}
/>
<Menu
<MoreMenu
open={!!moreMenuAnchorEl}
onClose={handleMoreMenuClose}
anchorEl={moreMenuAnchorEl}
@@ -429,10 +438,44 @@ const FileViewer: React.FC<FileViewerProps> = ({
>
{activeAnnotatedFile?.annotation.isEditableImage && (
<MenuItem onClick={handleEditImage}>
{/*TODO */ pt("Edit image")}
<EditIcon fontSize="20px" />
<ListItemText>
{/*TODO */ pt("Edit image")}
</ListItemText>
<Typography
variant="small"
sx={{ color: "text.muted" }}
>
E
</Typography>
</MenuItem>
)}
</Menu>
<MenuItem sx={(theme) => ({})}>
<Stack
direction="row"
sx={{
gap: 1.5,
alignItems: "center",
// Fill our container.
width: "100%",
// MUI has responsive padding, use a static value instead.
py: 1,
}}
>
<EditIcon fontSize="20px" />
<Typography sx={{ flex: 1, fontWeight: "medium" }}>
{/*TODO */ pt("Edit image")}
</Typography>
<Typography
variant="small"
sx={{ color: "text.muted" }}
>
E
</Typography>
</Stack>
</MenuItem>
</MoreMenu>
<ImageEditorOverlay
open={openImageEditor}
onClose={handleImageEditorClose}
@@ -454,6 +497,24 @@ const Container = styled("div")`
}
`;
const MoreMenu = styled(Menu)`
& .MuiPaper-root {
background-color: #252525 /* theme.dark.background.paper2 */;
min-width: 220px;
}
& .MuiMenuItem-root {
/* Same as other controls on the PhotoSwipe UI */
color: rgba(255 255 255 / 0.85);
&:hover {
/* Highlight on hover */
color: rgba(255 255 255 / 1);
}
.MuiSvgIcon-root {
font-size: 20px;
}
}
`;
const fileIsEditableImage = (file: EnteFile) => {
// Only images are editable.
if (file.metadata.fileType !== FileType.image) return false;