From 2e2c972a844faea4fa7bea9b5a3e336fc232bc76 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Mon, 23 Dec 2024 19:04:17 +0530 Subject: [PATCH 1/3] Tiles --- web/packages/new/photos/components/Tiles.tsx | 2 +- web/packages/new/photos/pages/duplicates.tsx | 21 ++++++++++++-------- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/web/packages/new/photos/components/Tiles.tsx b/web/packages/new/photos/components/Tiles.tsx index a6a44d5da5..ad800ad6e1 100644 --- a/web/packages/new/photos/components/Tiles.tsx +++ b/web/packages/new/photos/components/Tiles.tsx @@ -142,7 +142,7 @@ export const BaseTileButton = styled(UnstyledButton)` /* Buttons reset this to center */ text-align: inherit; - /* Rest of this is mostly verbatim from ItemTile ... */ + /* Rest of this is mostly verbatim from BaseTile ... */ display: flex; /* Act as container for the absolutely positioned ItemTileOverlays. */ diff --git a/web/packages/new/photos/pages/duplicates.tsx b/web/packages/new/photos/pages/duplicates.tsx index 6a94866379..bb8b55ede5 100644 --- a/web/packages/new/photos/pages/duplicates.tsx +++ b/web/packages/new/photos/pages/duplicates.tsx @@ -37,6 +37,7 @@ import { VariableSizeList, type ListChildComponentProps, } from "react-window"; +import { BaseTile, ItemCard } from "../components/Tiles"; import { computeThumbnailGridLayoutParams, type ThumbnailGridLayoutParams, @@ -500,21 +501,24 @@ const ListItem: React.FC> = {items.map((item, j) => ( -
- {item.collectionName} -
+ {/* {item.collectionName} */} + ))} ); }, areEqual); +export const ItemTile = styled(BaseTile)` + /* The thumbnails are not interactable, reset the pointer */ + cursor: initial; +`; + type ItemGridProps = Pick; const ItemGrid = styled("div", { @@ -523,7 +527,8 @@ const ItemGrid = styled("div", { ({ layoutParams }) => ` display: grid; padding-inline: ${layoutParams.paddingInline}px; - grid-template-columns: repeat(${layoutParams.columns}, 1fr); + grid-template-columns: repeat(${layoutParams.columns}, ${layoutParams.itemWidth}px); + grid-auto-rows: ${layoutParams.itemHeight}px; gap: ${layoutParams.gap}px; `, ); From 26c0a8e1d5176fa747fd12fd97eb8d90c848f09e Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Mon, 23 Dec 2024 19:25:37 +0530 Subject: [PATCH 2/3] Title --- .../photos/components/CollectionSelector.tsx | 4 ++- web/packages/new/photos/components/Tiles.tsx | 26 ++++++++++++++++--- web/packages/new/photos/pages/duplicates.tsx | 17 ++++++------ 3 files changed, 35 insertions(+), 12 deletions(-) diff --git a/web/packages/new/photos/components/CollectionSelector.tsx b/web/packages/new/photos/components/CollectionSelector.tsx index 07a22be7f0..5e83a94881 100644 --- a/web/packages/new/photos/components/CollectionSelector.tsx +++ b/web/packages/new/photos/components/CollectionSelector.tsx @@ -231,7 +231,9 @@ const CollectionButton: React.FC = ({ const AddCollectionButton: React.FC = ({ onClick }) => ( - {t("create_albums")} + + {t("create_albums")} + + ); diff --git a/web/packages/new/photos/components/Tiles.tsx b/web/packages/new/photos/components/Tiles.tsx index ad800ad6e1..df35c014dd 100644 --- a/web/packages/new/photos/components/Tiles.tsx +++ b/web/packages/new/photos/components/Tiles.tsx @@ -102,7 +102,7 @@ export const ItemCard: React.FC> = ({ * Use {@link ItemTileOverlay} (usually via one of its presets) to overlay * content on top of the tile. */ -export const BaseTile = styled("div")` +const BaseTile = styled("div")` display: flex; /* Act as container for the absolutely positioned ItemTileOverlays. */ position: relative; @@ -135,6 +135,14 @@ export const BarItemTile = styled(BaseTile)` height: 64px; `; +/** + * A square tile used on the duplicates listing. + */ +export const DuplicateItemTile = styled(BaseTile)` + /* The thumbnails are not interactable, reset the pointer */ + cursor: initial; +`; + /** * A variant of {@link BaseTile} meant for use when the tile is interactable. */ @@ -181,8 +189,8 @@ export const ItemTileOverlay = styled("div")` `; /** - * An {@link ItemTileOverlay} suitable for hosting textual content for small and - * medium sized tiles. + * An {@link ItemTileOverlay} suitable for hosting textual content at the top + * left of small and medium sized tiles. */ export const TileTextOverlay = styled(ItemTileOverlay)` padding: 4px; @@ -216,3 +224,15 @@ export const LargeTilePlusOverlay = styled(ItemTileOverlay)` font-size: 42px; color: ${({ theme }) => theme.colors.stroke.muted}; `; + +/** + * An {@link ItemTileOverlay} suitable for holding the collection name shown + * atop the tiles in the duplicates listing. + */ +export const DuplicateTileTextOverlay = styled(ItemTileOverlay)` + display: flex; + justify-content: center; + align-items: flex-end; + padding: 4px; + background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.7)); +`; diff --git a/web/packages/new/photos/pages/duplicates.tsx b/web/packages/new/photos/pages/duplicates.tsx index bb8b55ede5..28fb704b07 100644 --- a/web/packages/new/photos/pages/duplicates.tsx +++ b/web/packages/new/photos/pages/duplicates.tsx @@ -37,7 +37,11 @@ import { VariableSizeList, type ListChildComponentProps, } from "react-window"; -import { BaseTile, ItemCard } from "../components/Tiles"; +import { + DuplicateItemTile, + DuplicateTileTextOverlay, + ItemCard, +} from "../components/Tiles"; import { computeThumbnailGridLayoutParams, type ThumbnailGridLayoutParams, @@ -503,10 +507,12 @@ const ListItem: React.FC> = {items.map((item, j) => ( - {/* {item.collectionName} */} + + {item.collectionName} + ))} @@ -514,11 +520,6 @@ const ListItem: React.FC> = ); }, areEqual); -export const ItemTile = styled(BaseTile)` - /* The thumbnails are not interactable, reset the pointer */ - cursor: initial; -`; - type ItemGridProps = Pick; const ItemGrid = styled("div", { From dafbf23d67fcc90d66bc460ab54c481afa563557 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Mon, 23 Dec 2024 19:39:20 +0530 Subject: [PATCH 3/3] 2 line --- web/packages/base/components/Typography.tsx | 18 +++++++++++++++++- .../new/photos/components/gallery/BarImpl.tsx | 15 ++++----------- web/packages/new/photos/pages/duplicates.tsx | 5 ++++- 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/web/packages/base/components/Typography.tsx b/web/packages/base/components/Typography.tsx index 518bef28fb..9fa71e7b73 100644 --- a/web/packages/base/components/Typography.tsx +++ b/web/packages/base/components/Typography.tsx @@ -14,8 +14,24 @@ export const EllipsizedTypography = styled(Typography)` hidden instead. */ overflow: hidden; /* Specify handling of text when it overflows, asking the browser to insert - ellipsis instead of clipping. */ + ellipsis instead of clipping. + + Note that both overflow and text-overflow are required. + */ text-overflow: ellipsis; /* Don't automatically wrap the text by inserting line breaks. */ white-space: nowrap; `; + +/** + * A variant of {@link EllipsizedTypography} that takes up to 2 lines. + */ +export const Ellipsized2LineTypography = styled(Typography)` + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; /* number of lines to show */ + line-clamp: 2; + -webkit-box-orient: vertical; + word-break: break-word; +`; diff --git a/web/packages/new/photos/components/gallery/BarImpl.tsx b/web/packages/new/photos/components/gallery/BarImpl.tsx index 43ca6853ef..5606758559 100644 --- a/web/packages/new/photos/components/gallery/BarImpl.tsx +++ b/web/packages/new/photos/components/gallery/BarImpl.tsx @@ -1,5 +1,6 @@ import { FilledIconButton } from "@/base/components/mui"; import { Overlay } from "@/base/components/mui/Container"; +import { Ellipsized2LineTypography } from "@/base/components/Typography"; import { useIsSmallWidth } from "@/base/components/utils/hooks"; import { CollectionsSortOptions } from "@/new/photos/components/CollectionsSortOptions"; import { @@ -508,21 +509,13 @@ const CollectionBarCard: React.FC = ({ const CardText: React.FC = ({ children }) => ( - {children} + + {children} + ); -const Ellipsized = styled(Typography)` - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; // number of lines to show - line-clamp: 2; - -webkit-box-orient: vertical; - word-break: break-word; -`; - interface CollectionBarCardIconProps { type: CollectionSummaryType; } diff --git a/web/packages/new/photos/pages/duplicates.tsx b/web/packages/new/photos/pages/duplicates.tsx index 28fb704b07..5b476065a0 100644 --- a/web/packages/new/photos/pages/duplicates.tsx +++ b/web/packages/new/photos/pages/duplicates.tsx @@ -7,6 +7,7 @@ import { OverflowMenu, OverflowMenuOption, } from "@/base/components/OverflowMenu"; +import { Ellipsized2LineTypography } from "@/base/components/Typography"; import { pt } from "@/base/i18n"; import log from "@/base/log"; import { formattedByteSize } from "@/new/photos/utils/units"; @@ -511,7 +512,9 @@ const ListItem: React.FC> = coverFile={item.file} > - {item.collectionName} + + {item.collectionName} + ))}