kenmirrors/ente
1
0
Fork 0
mirror of https://github.com/ente-io/ente.git synced 2025-07-24 12:52:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Center

Browse Source
This commit is contained in:
Manav Rathi 2024-10-12 16:50:53 +05:30
parent 67fda60ba5
commit c0a1b2daef
No known key found for this signature in database
3 changed files with 32 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/packages/base/components/mui/Container.tsx Normal file
View File

@ -0,0 +1,12 @@
import { styled } from "@mui/material";
/**
* A flex child that fills the entire flex direction, and shows its children
* after centering them both vertically and horizontally.
*/
export const CenteredBox = styled("div")`
flex: 1;
display: flex;
justify-content: center;
align-items: center;
`;

29
web/packages/new/photos/components/gallery/PeopleHeader.tsx
View File

@ -1,3 +1,4 @@
import { CenteredBox } from "@/base/components/mui/Container";
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
import { LoadingButton } from "@/base/components/mui/LoadingButton";
@ -319,21 +320,23 @@ const SuggestionsDialog: React.FC<SuggestionsDialogProps> = ({
fullScreen={isSmallWidth}
PaperProps={{ sx: { minHeight: "60svh" } }}
>
<DialogTitle sx={{ "&&&": { pt: "20px" } }}>
<DialogTitle sx={{ "&&&": { py: "20px" } }}>
{pt(`${person.name}?`)}
</DialogTitle>
<DialogContent>
<DialogContent dividers sx={{ display: "flex" }}>
{!suggestions ? (
phase == "loading" ? (
<ActivityIndicator />
) : (
<Typography
color="text.muted"
sx={{ textAlign: "center" }}
>
{pt("No more suggestions for now")}
</Typography>
)
<CenteredBox>
{phase == "loading" || true ? (
<ActivityIndicator />
) : (
<Typography
color="text.muted"
sx={{ textAlign: "center" }}
>
{pt("No more suggestions for now")}
</Typography>
)}
</CenteredBox>
) : (
<ul>
{suggestions.map((suggestion) => (
@ -344,7 +347,7 @@ const SuggestionsDialog: React.FC<SuggestionsDialogProps> = ({
</ul>
)}
</DialogContent>
<DialogActions>
<DialogActions sx={{ "&&": { pt: "12px" } }}>
<FocusVisibleButton
fullWidth
color="secondary"

4
web/packages/shared/components/Container.tsx
View File

@ -20,6 +20,10 @@ export const SpaceBetweenFlex = styled(FlexWrapper)`
justify-content: space-between;
`;
/**
* Deprecated, use {@link CenteredFlex} from @/base/components/mui/container
* instead
*/
export const CenteredFlex = styled(FlexWrapper)`
justify-content: center;
`;