TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move

Browse Source
This commit is contained in:
Manav Rathi
2025-05-28 07:12:56 +05:30
parent dbec318f7b
commit deb6cfe03a
3 changed files with 102 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
web/apps/photos/src/components/GalleryEmptyState.tsx
View File

@@ -1,98 +0,0 @@
import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternateOutlined";
import FolderIcon from "@mui/icons-material/FolderOutlined";
import { Button, Stack, Typography, styled } from "@mui/material";
import { EnteLogo } from "ente-base/components/EnteLogo";
import {
FlexWrapper,
VerticallyCentered,
} from "ente-shared/components/Container";
import { t } from "i18next";
import { Trans } from "react-i18next";
import { uploadManager } from "services/upload-manager";
export default function GalleryEmptyState({ openUploader }) {
return (
<Wrapper>
<Stack sx={{ flex: "none", paddingBlock: "12px 32px" }}>
<VerticallyCentered sx={{ flex: "none" }}>
<Typography
variant="h3"
sx={{
color: "text.muted",
userSelect: "none",
marginBlockEnd: 1,
svg: {
color: "text.base",
verticalAlign: "middle",
marginBlockEnd: "2px",
},
}}
>
<Trans
i18nKey="welcome_to_ente_title"
components={{ a: <EnteLogo /> }}
/>
</Typography>
<Typography variant="h2">
{t("welcome_to_ente_subtitle")}
</Typography>
</VerticallyCentered>
</Stack>
<NonDraggableImage
height={287.57}
alt=""
src="/images/empty-state/ente_duck.png"
srcSet="/images/empty-state/ente_duck@2x.png, /images/empty-state/ente_duck@3x.png"
/>
<VerticallyCentered paddingTop={1.5} paddingBottom={1.5}>
<Button
style={{
cursor:
!uploadManager.shouldAllowNewUpload() &&
"not-allowed",
}}
color="accent"
onClick={() => openUploader("upload")}
disabled={!uploadManager.shouldAllowNewUpload()}
sx={{ mt: 1.5, p: 1, width: 320, borderRadius: 0.5 }}
>
<FlexWrapper sx={{ gap: 1 }} justifyContent="center">
<AddPhotoAlternateIcon />
{t("upload_first_photo")}
</FlexWrapper>
</Button>
<Button
style={{
cursor:
!uploadManager.shouldAllowNewUpload() &&
"not-allowed",
}}
onClick={() => openUploader("import")}
disabled={!uploadManager.shouldAllowNewUpload()}
sx={{ mt: 1.5, p: 1, width: 320, borderRadius: 0.5 }}
>
<FlexWrapper sx={{ gap: 1 }} justifyContent="center">
<FolderIcon />
{t("import_your_folders")}
</FlexWrapper>
</Button>
</VerticallyCentered>
</Wrapper>
);
}
const Wrapper = styled("div")`
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
`;
/**
* Prevent the image from being selected _and_ dragged, since dragging it
* triggers the our dropdown selector overlay.
*/
const NonDraggableImage = styled("img")`
pointer-events: none;
user-select: none;
`;

7
web/apps/photos/src/pages/gallery.tsx
View File

@@ -14,7 +14,6 @@ import {
FilesDownloadProgressAttributes,
} from "components/FilesDownloadProgress";
import { FixCreationTime } from "components/FixCreationTime";
import GalleryEmptyState from "components/GalleryEmptyState";
import { Sidebar } from "components/Sidebar";
import { Upload, type UploadTypeSelectorIntent } from "components/Upload";
import SelectedFileOptions from "components/pages/gallery/SelectedFileOptions";
@@ -56,6 +55,7 @@ import {
} from "ente-new/photos/components/SearchBar";
import { WhatsNew } from "ente-new/photos/components/WhatsNew";
import {
GalleryEmptyState,
PeopleEmptyState,
SearchResultsHeader,
} from "ente-new/photos/components/gallery";
@@ -1094,7 +1094,10 @@ const Page: React.FC = () => {
!normalFiles?.length &&
!hiddenFiles?.length &&
activeCollectionID === ALL_SECTION ? (
<GalleryEmptyState openUploader={openUploader} />
<GalleryEmptyState
openUploader={openUploader}
shouldAllowNewUpload={uploadManager.shouldAllowNewUpload()}
/>
) : !isInSearchMode &&
!isFirstLoad &&
state.view.type == "people" &&

97
web/packages/new/photos/components/gallery/index.tsx
View File

@@ -51,6 +51,103 @@ export const SearchResultsHeader: React.FC<SearchResultsHeaderProps> = ({
</GalleryItemsHeaderAdapter>
);
import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternateOutlined";
import FolderIcon from "@mui/icons-material/FolderOutlined";
import { Button, styled } from "@mui/material";
import { EnteLogo } from "ente-base/components/EnteLogo";
import {
FlexWrapper,
VerticallyCentered,
} from "ente-shared/components/Container";
import { Trans } from "react-i18next";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
export function GalleryEmptyState({ openUploader, shouldAllowNewUpload }) {
return (
<Wrapper>
<Stack sx={{ flex: "none", paddingBlock: "12px 32px" }}>
<VerticallyCentered sx={{ flex: "none" }}>
<Typography
variant="h3"
sx={{
color: "text.muted",
userSelect: "none",
marginBlockEnd: 1,
svg: {
color: "text.base",
verticalAlign: "middle",
marginBlockEnd: "2px",
},
}}
>
<Trans
i18nKey="welcome_to_ente_title"
components={{ a: <EnteLogo /> }}
/>
</Typography>
<Typography variant="h2">
{t("welcome_to_ente_subtitle")}
</Typography>
</VerticallyCentered>
</Stack>
<NonDraggableImage
height={287.57}
alt=""
src="/images/empty-state/ente_duck.png"
srcSet="/images/empty-state/ente_duck@2x.png, /images/empty-state/ente_duck@3x.png"
/>
<VerticallyCentered paddingTop={1.5} paddingBottom={1.5}>
<Button
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
style={{ cursor: !shouldAllowNewUpload && "not-allowed" }}
color="accent"
// eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call
onClick={() => openUploader("upload")}
disabled={!shouldAllowNewUpload}
sx={{ mt: 1.5, p: 1, width: 320, borderRadius: 0.5 }}
>
<FlexWrapper sx={{ gap: 1 }} justifyContent="center">
<AddPhotoAlternateIcon />
{t("upload_first_photo")}
</FlexWrapper>
</Button>
<Button
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
style={{ cursor: !shouldAllowNewUpload && "not-allowed" }}
// eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call
onClick={() => openUploader("import")}
disabled={!shouldAllowNewUpload}
sx={{ mt: 1.5, p: 1, width: 320, borderRadius: 0.5 }}
>
<FlexWrapper sx={{ gap: 1 }} justifyContent="center">
<FolderIcon />
{t("import_your_folders")}
</FlexWrapper>
</Button>
</VerticallyCentered>
</Wrapper>
);
}
const Wrapper = styled("div")`
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
`;
/**
* Prevent the image from being selected _and_ dragged, since dragging it
* triggers the our dropdown selector overlay.
*/
const NonDraggableImage = styled("img")`
pointer-events: none;
user-select: none;
`;
export const PeopleEmptyState: React.FC = () => {
const mlStatus = useMLStatusSnapshot();