kenmirrors/ente
1
0
Fork 0
mirror of https://github.com/ente-io/ente.git synced 2025-07-25 19:15:32 +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 { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton"; import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
import { LoadingButton } from "@/base/components/mui/LoadingButton"; import { LoadingButton } from "@/base/components/mui/LoadingButton";
@ -319,21 +320,23 @@ const SuggestionsDialog: React.FC<SuggestionsDialogProps> = ({
fullScreen={isSmallWidth} fullScreen={isSmallWidth}
PaperProps={{ sx: { minHeight: "60svh" } }} PaperProps={{ sx: { minHeight: "60svh" } }}
> >
<DialogTitle sx={{ "&&&": { pt: "20px" } }}> <DialogTitle sx={{ "&&&": { py: "20px" } }}>
{pt(`${person.name}?`)} {pt(`${person.name}?`)}
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent dividers sx={{ display: "flex" }}>
{!suggestions ? ( {!suggestions ? (
phase == "loading" ? ( <CenteredBox>
<ActivityIndicator /> {phase == "loading" || true ? (
) : ( <ActivityIndicator />
<Typography ) : (
color="text.muted" <Typography
sx={{ textAlign: "center" }} color="text.muted"
> sx={{ textAlign: "center" }}
{pt("No more suggestions for now")} >
</Typography> {pt("No more suggestions for now")}
) </Typography>
)}
</CenteredBox>
) : ( ) : (
<ul> <ul>
{suggestions.map((suggestion) => ( {suggestions.map((suggestion) => (
@ -344,7 +347,7 @@ const SuggestionsDialog: React.FC<SuggestionsDialogProps> = ({
</ul> </ul>
)} )}
</DialogContent> </DialogContent>
<DialogActions> <DialogActions sx={{ "&&": { pt: "12px" } }}>
<FocusVisibleButton <FocusVisibleButton
fullWidth fullWidth
color="secondary" color="secondary"

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

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