Skip to content

Commit

Permalink
refactor(ui): Migrate from deprecated Grid to Grid2
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hypfer
Hypfer committed Feb 19, 2025
1 parent 4e5dd10 commit 0fcb809
Show file tree
Hide file tree
Showing 41 changed files with 497 additions and 531 deletions.
10 changes: 5 additions & 5 deletions frontend/src/HomePage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import {Box, Divider, Grid, styled} from "@mui/material";
import {Box, Divider, Grid2, styled} from "@mui/material";
import ControlsBody from "./controls";
import {useIsMobileView} from "./hooks";
import {FullHeightGrid} from "./components/FullHeightGrid";
import LiveMapPage from "./map/LiveMapPage";
import MobileControls from "./controls/MobileControls";
import React from "react";

const ScrollableGrid = styled(Grid)({
const ScrollableGrid = styled(Grid2)({
overflow: "auto",
});

Expand Down Expand Up @@ -44,11 +44,11 @@ const HomePage = (): React.ReactElement => {

return (
<FullHeightGrid container direction="row" justifyContent="space-evenly">
<Grid item sm md lg xl>
<Grid2 size="grow">
<LiveMapPage/>
</Grid>
</Grid2>
<Divider orientation="vertical"/>
<ScrollableGrid item sm={4} md={4} lg={4} xl={3}>
<ScrollableGrid size={{sm:4, md: 4, lg: 4, xl: 3}}>
<Box m={1}>
<ControlsBody/>
</Box>
Expand Down
34 changes: 17 additions & 17 deletions frontend/src/ProvisioningPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
DialogTitle,
Divider,
FormControl,
Grid,
Grid2,
IconButton,
Input,
InputAdornment,
Expand Down Expand Up @@ -234,18 +234,18 @@ const ProvisioningPage = (): React.ReactElement => {
];

return (
<Grid container direction="row" sx={{padding: "1rem", justifyContent: "space-around"}}>
<Grid2 container direction="row" sx={{padding: "1rem", justifyContent: "space-around"}}>
{items.map(([header, body]) => {
return (
<Grid item key={header}>
<Grid2 key={header}>
<Typography variant="caption" color="textSecondary">
{header}
</Typography>
<Typography variant="body2">{body}</Typography>
</Grid>
</Grid2>
);
})}
</Grid>
</Grid2>
);
}, [robotInformation, robotInformationPending, version, versionPending]);

Expand All @@ -262,11 +262,11 @@ const ProvisioningPage = (): React.ReactElement => {
maxWidth: "600px"
}}
>
<Grid
<Grid2
container
direction="row"
>
<Grid item>
<Grid2>
<Box px={2} pt={2} pb={1}>
<Logo
style={{
Expand All @@ -275,8 +275,8 @@ const ProvisioningPage = (): React.ReactElement => {
}}
/>
</Box>
</Grid>
</Grid>
</Grid2>
</Grid2>
<Typography
variant="body1"
style={{
Expand Down Expand Up @@ -306,8 +306,8 @@ const ProvisioningPage = (): React.ReactElement => {
</>
}

<Grid item container sx={{padding: "1rem"}} direction="column">
<Grid item sx={{paddingLeft: "1rem", paddingRight: "1rem"}}>
<Grid2 container sx={{padding: "1rem"}} direction="column">
<Grid2 sx={{paddingLeft: "1rem", paddingRight: "1rem"}}>
<TextField
label="SSID/Wi-Fi name"
variant="standard"
Expand All @@ -317,9 +317,9 @@ const ProvisioningPage = (): React.ReactElement => {
setNewSSID(e.target.value);
}}
/>
</Grid>
</Grid2>

<Grid item sx={{paddingLeft: "1rem", paddingRight: "1rem"}}>
<Grid2 sx={{paddingLeft: "1rem", paddingRight: "1rem"}}>
<FormControl style={{width: "100%"}} variant="standard">
<InputLabel htmlFor="standard-adornment-password">PSK/Password</InputLabel>
<Input
Expand Down Expand Up @@ -347,9 +347,9 @@ const ProvisioningPage = (): React.ReactElement => {
setNewPSK(e.target.value);
}}/>
</FormControl>
</Grid>
</Grid2>

<Grid item sx={{marginLeft: "auto", marginTop: "0.75rem"}}>
<Grid2 sx={{marginLeft: "auto", marginTop: "0.75rem"}}>
<LoadingButton
loading={wifiConfigurationUpdating}
variant="outlined"
Expand All @@ -369,9 +369,9 @@ const ProvisioningPage = (): React.ReactElement => {
>
Apply
</LoadingButton>
</Grid>
</Grid2>

</Grid>
</Grid2>
</Paper>

<Dialog open={successDialogOpen}>
Expand Down
35 changes: 17 additions & 18 deletions frontend/src/components/DetailPageHeaderRow.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Divider, Grid, IconButton, styled, Typography} from "@mui/material";
import {Divider, Grid2, IconButton, styled, Typography} from "@mui/material";
import React, {FunctionComponent} from "react";
import {
Help as HelpIcon,
Expand Down Expand Up @@ -32,22 +32,21 @@ const DetailPageHeaderRow: FunctionComponent<DetailPageHeaderRowProps> = ({

return (
<>
<Grid item container alignItems="center" spacing={1} justifyContent="space-between">
<Grid item style={{display:"flex"}}>
<Grid item style={{paddingRight: "8px"}}>
<Grid2 container alignItems="center" spacing={1} justifyContent="space-between">
<Grid2 style={{display:"flex"}}>
<Grid2 style={{paddingRight: "8px"}}>
{icon}
</Grid>
<Grid item>
</Grid2>
<Grid2>
<Typography>{title}</Typography>
</Grid>
</Grid>
<Grid item>
<Grid container>
</Grid2>
</Grid2>
<Grid2>
<Grid2 container>
{
helpText !== undefined &&
<>
<Grid
item
<Grid2
style={{marginTop:"-0.125rem"}} //:(
>
<IconButton
Expand All @@ -58,7 +57,7 @@ const DetailPageHeaderRow: FunctionComponent<DetailPageHeaderRowProps> = ({
>
<HelpIcon/>
</IconButton>
</Grid>
</Grid2>

<HelpDialog
dialogOpen={helpDialogOpen}
Expand All @@ -72,19 +71,19 @@ const DetailPageHeaderRow: FunctionComponent<DetailPageHeaderRowProps> = ({

{
onRefreshClick !== undefined &&
<Grid item>
<Grid2>
<TopRightRefreshButton
loading={isRefreshing ?? false}
onClick={onRefreshClick}
title="Refresh"
>
<RefreshIcon/>
</TopRightRefreshButton>
</Grid>
</Grid2>
}
</Grid>
</Grid>
</Grid>
</Grid2>
</Grid2>
</Grid2>
<Divider sx={{mt: 1}}/>
</>
);
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/FullHeightGrid.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {Grid, styled} from "@mui/material";
import {Grid2, styled} from "@mui/material";

export const FullHeightGrid = styled(Grid)(({ theme }) => {
export const FullHeightGrid = styled(Grid2)(({ theme }) => {
return {
height: `calc(100% - ${theme.mixins.toolbar.minHeight}px)`,
width: "100%",
Expand Down
16 changes: 7 additions & 9 deletions frontend/src/components/InfoBox.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import {Grid, Paper} from "@mui/material";
import {Grid2, Paper} from "@mui/material";
import {Announcement} from "@mui/icons-material";

const InfoBox = (props: { boxShadow: number, style?: React.CSSProperties, children: React.ReactNode}): React.ReactElement => {
Expand All @@ -9,27 +9,25 @@ const InfoBox = (props: { boxShadow: number, style?: React.CSSProperties, childr
style={props.style}
sx={{ boxShadow: props.boxShadow }}
>
<Grid container direction="row" alignItems="center" style={{padding: "1rem"}}>
<Grid
item
<Grid2 container direction="row" alignItems="center" style={{padding: "1rem"}}>
<Grid2
style={{
marginLeft: "auto",
marginRight: "auto"
}}
>
<Announcement fontSize={"large"} color={"info"}/>
</Grid>
<Grid
item
</Grid2>
<Grid2
style={{
width: "90%",
marginLeft: "auto",
marginRight: "auto"
}}
>
{props.children}
</Grid>
</Grid>
</Grid2>
</Grid2>
</Paper>
);
};
Expand Down
27 changes: 13 additions & 14 deletions frontend/src/components/ReloadableCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Card, CardContent, Divider, Grid, IconButton, styled, Typography} from "@mui/material";
import {Card, CardContent, Divider, Grid2, IconButton, styled, Typography} from "@mui/material";
import React, {FunctionComponent} from "react";
import {Help as HelpIcon, Refresh as RefreshIcon} from "@mui/icons-material";
import {LoadingButton} from "@mui/lab";
Expand Down Expand Up @@ -41,22 +41,21 @@ const ReloadableCard: FunctionComponent<ReloadableCardProps> = ({
sx={{boxShadow: boxShadow}}
>
<CardContent>
<Grid
<Grid2
container
spacing={4}
alignItems="center"
justifyContent="space-between"
>
<Grid item>
<Grid2>
<Typography variant="h6" gutterBottom>
{title}
</Typography>
</Grid>
<Grid item>
<Grid container>
</Grid2>
<Grid2>
<Grid2 container>
{helpText && (
<Grid
item
<Grid2
style={{marginTop:"-0.125rem"}} //:(
>
<IconButton
Expand All @@ -67,18 +66,18 @@ const ReloadableCard: FunctionComponent<ReloadableCardProps> = ({
>
<HelpIcon/>
</IconButton>
</Grid>
</Grid2>
)}
{reloadButton || (onReload && (
<Grid item>
<Grid2>
<TopRightIconButton loading={loading} onClick={onReload} title="Refresh">
<RefreshIcon/>
</TopRightIconButton>
</Grid>
</Grid2>
))}
</Grid>
</Grid>
</Grid>
</Grid2>
</Grid2>
</Grid2>
{divider && <Divider sx={{mb: 1}}/>}
{children}
</CardContent>
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/components/TextInformationGrid.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
import React from "react";
import {Grid, Typography} from "@mui/material";
import {Grid2, Typography} from "@mui/material";

const TextInformationGrid: React.FunctionComponent<{ items: Array<{ header: string, body: string }> }> = ({
items
}): React.ReactElement => {
return (
<Grid
<Grid2
container
spacing={2}
style={{wordBreak: "break-all"}}
>
{items.map((item) => {
return (
<Grid item key={item.header}>
<Grid2 key={item.header}>
<Typography variant="caption" color="textSecondary">
{item.header}
</Typography>
<Typography variant="body2">{item.body}</Typography>
</Grid>
</Grid2>
);
})}
</Grid>
</Grid2>
);
};

Expand Down
16 changes: 7 additions & 9 deletions frontend/src/components/ValetudoSplash.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import {ReactComponent as SplashLogo} from "../assets/icons/valetudo_splash.svg";
import {CircularProgress, Grid} from "@mui/material";
import {CircularProgress, Grid2} from "@mui/material";
import React from "react";

const ValetudoSplash = (): React.ReactElement => {

return (
<Grid
<Grid2
container
sx={{
width: "90%",
Expand All @@ -20,23 +20,21 @@ const ValetudoSplash = (): React.ReactElement => {
alignItems="center"
justifyContent="center"
>
<Grid
item
<Grid2
>
<SplashLogo
style={{
width: "90%",
marginLeft: "5%"
}}
/>
</Grid>
<Grid
item
</Grid2>
<Grid2
sx={{marginTop: "3em"}}
>
<CircularProgress/>
</Grid>
</Grid>
</Grid2>
</Grid2>
);
};

Expand Down
Loading

0 comments on commit 0fcb809

Please sign in to comment.