Skip to content

Commit

Permalink
2 line
Browse files Browse the repository at this point in the history
  • Loading branch information
mnvr committed Dec 23, 2024
1 parent 26c0a8e commit dafbf23
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 13 deletions.
18 changes: 17 additions & 1 deletion web/packages/base/components/Typography.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;
15 changes: 4 additions & 11 deletions web/packages/new/photos/components/gallery/BarImpl.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -508,21 +509,13 @@ const CollectionBarCard: React.FC<CollectionBarCardProps> = ({
const CardText: React.FC<React.PropsWithChildren> = ({ children }) => (
<TileTextOverlay>
<Box height={"2.1em"}>
<Ellipsized variant="small">{children}</Ellipsized>
<Ellipsized2LineTypography variant="small">
{children}
</Ellipsized2LineTypography>
</Box>
</TileTextOverlay>
);

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;
}
Expand Down
5 changes: 4 additions & 1 deletion web/packages/new/photos/pages/duplicates.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -511,7 +512,9 @@ const ListItem: React.FC<ListChildComponentProps<DuplicatesListItemData>> =
coverFile={item.file}
>
<DuplicateTileTextOverlay>
<Typography color="text.muted">{item.collectionName}</Typography>
<Ellipsized2LineTypography color="text.muted">
{item.collectionName}
</Ellipsized2LineTypography>
</DuplicateTileTextOverlay>
</ItemCard>
))}
Expand Down

0 comments on commit dafbf23

Please sign in to comment.