From f0bf07a384fc06e6b2e89aac75d83467090ad606 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Fri, 23 Aug 2024 09:51:57 +0530 Subject: [PATCH 1/5] Move variant into custom component --- web/apps/photos/src/components/WatchFolder.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/web/apps/photos/src/components/WatchFolder.tsx b/web/apps/photos/src/components/WatchFolder.tsx index e95b86eb33..60bd050048 100644 --- a/web/apps/photos/src/components/WatchFolder.tsx +++ b/web/apps/photos/src/components/WatchFolder.tsx @@ -273,7 +273,7 @@ const WatchEntry: React.FC = ({ watch, removeWatch }) => { )} - {watch.folderPath} + {watch.folderPath} @@ -306,7 +306,11 @@ const EntryHeading: React.FC = ({ watch }) => { ); }; -const FolderPath = styled(Typography)(({ theme }) => ({ +const FolderPath: React.FC = ({ children }) => ( + {children} +); + +const FolderPath_ = styled(Typography)(({ theme }) => ({ overflow: "hidden", textOverflow: "ellipsis", color: theme.colors.text.muted, From 489dc2e46dc22aefc118c650aee6814664f010c5 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Fri, 23 Aug 2024 10:32:20 +0530 Subject: [PATCH 2/5] Extract --- .../photos/src/components/Notification.tsx | 14 +++---------- web/packages/base/components/Typography.tsx | 21 +++++++++++++++++++ 2 files changed, 24 insertions(+), 11 deletions(-) create mode 100644 web/packages/base/components/Typography.tsx diff --git a/web/apps/photos/src/components/Notification.tsx b/web/apps/photos/src/components/Notification.tsx index 0ade15c750..76adb95a12 100644 --- a/web/apps/photos/src/components/Notification.tsx +++ b/web/apps/photos/src/components/Notification.tsx @@ -1,4 +1,7 @@ +import { EllipsizedTypography } from "@/base/components/Typography"; +import { IconButtonWithBG } from "@ente/shared/components/Container"; import CloseIcon from "@mui/icons-material/Close"; +import InfoIcon from "@mui/icons-material/InfoOutlined"; import { Box, Button, @@ -6,15 +9,10 @@ import { Stack, SxProps, Theme, - Typography, - styled, type ButtonProps, } from "@mui/material"; import { NotificationAttributes } from "types/Notification"; -import { IconButtonWithBG } from "@ente/shared/components/Container"; -import InfoIcon from "@mui/icons-material/InfoOutlined"; - interface Iprops { open: boolean; onClose: () => void; @@ -127,9 +125,3 @@ export default function Notification({ ); } - -const EllipsizedTypography = styled(Typography)` - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -`; diff --git a/web/packages/base/components/Typography.tsx b/web/packages/base/components/Typography.tsx new file mode 100644 index 0000000000..ba118157d3 --- /dev/null +++ b/web/packages/base/components/Typography.tsx @@ -0,0 +1,21 @@ +import { styled, Typography } from "@mui/material"; + +/** + * A variant of {@link Typography} that inserts ellipsis instead of wrapping the + * text over multiple lines, or letting it overflow. + * + * Refs: + * - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text + * - https://developer.mozilla.org/en-US/docs/Web/CSS/white-space + */ +export const EllipsizedTypography = styled(Typography)` + /* Initial value of overflow is visible. Set overflow (the handling of + content that is too small for the container in the inline direction) to + hidden instead. */ + overflow: hidden; + /* Specify handling of text when it overflows, asking the browser to insert + ellipsis instead of clipping. */ + text-overflow: ellipsis; + /* Don't automatically wrap the text by inserting line breaks. */ + white-space: nowrap; +`; From f3dae23e2a5738d9496f1ad8196a1a9b888e2265 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Fri, 23 Aug 2024 10:36:53 +0530 Subject: [PATCH 3/5] Use --- .../photos/src/components/PhotoViewer/FileInfo/index.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx index 4827059278..a1c771a795 100644 --- a/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx +++ b/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx @@ -1,5 +1,6 @@ import { EnteDrawer } from "@/base/components/EnteDrawer"; import { Titlebar } from "@/base/components/Titlebar"; +import { EllipsizedTypography } from "@/base/components/Typography"; import { nameAndExtension } from "@/base/file"; import log from "@/base/log"; import type { ParsedMetadata } from "@/media/file-metadata"; @@ -609,16 +610,13 @@ const RawExif: React.FC = ({ {namespace} - {description} - + ))} From 467dccf8bbdd20724e419a10a0d8e0a083ad1f1d Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Fri, 23 Aug 2024 10:43:52 +0530 Subject: [PATCH 4/5] Use --- web/apps/photos/src/components/WatchFolder.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/web/apps/photos/src/components/WatchFolder.tsx b/web/apps/photos/src/components/WatchFolder.tsx index 60bd050048..0214507eda 100644 --- a/web/apps/photos/src/components/WatchFolder.tsx +++ b/web/apps/photos/src/components/WatchFolder.tsx @@ -1,3 +1,4 @@ +import { EllipsizedTypography } from "@/base/components/Typography"; import { ensureElectron } from "@/base/electron"; import { basename, dirname } from "@/base/file"; import type { CollectionMapping, FolderWatch } from "@/base/types/ipc"; @@ -307,15 +308,11 @@ const EntryHeading: React.FC = ({ watch }) => { }; const FolderPath: React.FC = ({ children }) => ( - {children} + + {children} + ); -const FolderPath_ = styled(Typography)(({ theme }) => ({ - overflow: "hidden", - textOverflow: "ellipsis", - color: theme.colors.text.muted, -})); - interface EntryOptionsProps { confirmStopWatching: () => void; } From 9577ff7776662bbf0bdbf6c764ab8882f416f885 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Fri, 23 Aug 2024 10:44:57 +0530 Subject: [PATCH 5/5] Remove unnecessary rep --- web/apps/photos/src/components/WatchFolder.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/web/apps/photos/src/components/WatchFolder.tsx b/web/apps/photos/src/components/WatchFolder.tsx index 0214507eda..66688266c6 100644 --- a/web/apps/photos/src/components/WatchFolder.tsx +++ b/web/apps/photos/src/components/WatchFolder.tsx @@ -260,7 +260,6 @@ const WatchEntry: React.FC = ({ watch, removeWatch }) => { {watch.collectionMapping === "root" ? ( @@ -284,7 +283,6 @@ const WatchEntry: React.FC = ({ watch, removeWatch }) => { const EntryContainer = styled(Box)({ overflow: "hidden", - textOverflow: "ellipsis", marginLeft: "12px", marginRight: "6px", marginBottom: "12px",