feat(ui): Refactor, redesign and rearrange controls a bit

Hypfer · May 27, 2024 · 138f0d9 · 138f0d9
1 parent 97818ac
commit 138f0d9
Show file tree

Hide file tree

Showing 8 changed files with 209 additions and 226 deletions.
diff --git a/frontend/src/controls/Attachments.tsx b/frontend/src/controls/Attachments.tsx
@@ -2,9 +2,10 @@ import {
     RobotAttributeClass,
     useRobotAttributeQuery,
 } from "../api";
-import {Box, Grid, Paper, Typography, ToggleButton, ToggleButtonGroup} from "@mui/material";
+import {Grid, Typography, ToggleButton, ToggleButtonGroup} from "@mui/material";
 import React from "react";
-import LoadingFade from "../components/LoadingFade";
+import ControlsCard from "./ControlsCard";
+import {Extension} from "@mui/icons-material";
 
 const Attachments = (): React.ReactElement | null => {
     const {
@@ -31,44 +32,32 @@ const Attachments = (): React.ReactElement | null => {
         }
 
         return (
-            <ToggleButtonGroup size="small" fullWidth>
-                {attachments.map(({ type, attached }) => {
-                    return (
-                        <ToggleButton disabled selected={attached} key={type} value={type} fullWidth>
-                            {type}
-                        </ToggleButton>
-                    );
-                })}
-            </ToggleButtonGroup>
+            <Grid container direction="row" alignItems="center" pt={1}>
+                <Grid item sx={{flexGrow: 1}}>
+                    <ToggleButtonGroup size="small" fullWidth>
+                        {attachments.map(({ type, attached }) => {
+                            return (
+                                <ToggleButton disabled selected={attached} key={type} value={type} fullWidth>
+                                    {type}
+                                </ToggleButton>
+                            );
+                        })}
+                    </ToggleButtonGroup>
+                </Grid>
+            </Grid>
         );
     }, [attachments, isAttachmentError]);
 
     return (
-        <Grid item>
-            <Paper>
-                <Grid container direction="column">
-                    <Box px={2} pt={1}>
-                        <Grid item container alignItems="center" spacing={1}>
-                            <Grid item>
-                                <Typography variant="subtitle1">
-                                    Attachments
-                                </Typography>
-                            </Grid>
-                            <Grid item>
-                                <LoadingFade
-                                    in={isAttachmentPending}
-                                    transitionDelay={isAttachmentPending ? "500ms" : "0ms"}
-                                    size={20}
-                                />
-                            </Grid>
-                        </Grid>
-                        <Grid container direction="row" sx={{paddingBottom: "8px", paddingTop: "8px", maxHeight: "4em"}}>
-                            {attachmentDetails}
-                        </Grid>
-                    </Box>
-                </Grid>
-            </Paper>
-        </Grid>
+        <ControlsCard
+            icon={Extension}
+            title="Attachments"
+            isLoading={isAttachmentPending}
+        >
+            <Grid container direction="row" sx={{maxHeight: "4em"}}>
+                {attachmentDetails}
+            </Grid>
+        </ControlsCard>
     );
 };
 

diff --git a/frontend/src/controls/BasicControls.tsx b/frontend/src/controls/BasicControls.tsx
@@ -5,6 +5,7 @@ import {
     DialogContentText,
     Grid,
     Paper,
+    Skeleton,
     Typography,
 } from "@mui/material";
 import {
@@ -21,7 +22,6 @@ import {
     SvgIconComponent,
 } from "@mui/icons-material";
 import React from "react";
-import LoadingFade from "../components/LoadingFade";
 import ConfirmationDialog from "../components/ConfirmationDialog";
 import {usePendingMapAction} from "../map/Map";
 
@@ -62,7 +62,7 @@ const BasicControls = (): React.ReactElement => {
             <Grid item>
                 <Paper>
                     <Box p={1}>
-                        <LoadingFade/>
+                        <Skeleton height="4rem" />
                     </Box>
                 </Paper>
             </Grid>
@@ -114,7 +114,7 @@ const BasicControls = (): React.ReactElement => {
         <>
             <Grid item>
                 <Paper>
-                    <Box p={1}>
+                    <Box p={1.5}>
                         <Grid item container direction="column">
                             <Grid item>
                                 <ButtonGroup

diff --git a/frontend/src/controls/ControlsBody.tsx b/frontend/src/controls/ControlsBody.tsx
@@ -41,7 +41,7 @@ const ControlsBody = (): React.ReactElement => {
 
 
     return (
-        <Grid container spacing={2} direction="column" sx={{userSelect: "none"}}>
+        <Grid container spacing={1.5} direction="column" sx={{userSelect: "none"}}>
             {basicControls && <BasicControls />}
 
             <RobotStatus />

diff --git a/frontend/src/controls/ControlsCard.tsx b/frontend/src/controls/ControlsCard.tsx
@@ -0,0 +1,40 @@
+import {Box, Grid, Paper, Skeleton, SvgIconProps, Typography} from "@mui/material";
+import React, {ReactNode} from "react";
+
+
+interface ControlsCardProps {
+    icon: React.ComponentType<SvgIconProps>;
+    title: string;
+    children: ReactNode;
+    isLoading?: boolean
+}
+
+const ControlsCard: React.FC<ControlsCardProps> = ({ icon: Icon, title, children, isLoading }) => (
+    <Grid item>
+        <Paper>
+            <Grid container direction="column">
+                <Box px={1.5} py={1.5}>
+                    <Grid item container alignItems="center" spacing={1}>
+                        <Grid item><Icon fontSize="small" /></Grid>
+                        <Grid item style={{paddingTop: 0}}>
+                            <Typography variant="subtitle1">
+                                {title}
+                            </Typography>
+                        </Grid>
+                    </Grid>
+                    <Grid item>
+                        {
+                            isLoading ? (
+                                <Skeleton height="4rem" />
+                            ) : (
+                                children
+                            )
+                        }
+                    </Grid>
+                </Box>
+            </Grid>
+        </Paper>
+    </Grid>
+);
+
+export default ControlsCard;
diff --git a/frontend/src/controls/CurrentStatistics.tsx b/frontend/src/controls/CurrentStatistics.tsx
@@ -2,8 +2,8 @@ import {useCurrentStatisticsQuery} from "../api";
 import {Box, CircularProgress, Grid, Paper, Typography} from "@mui/material";
 import {Equalizer as StatisticsIcon} from "@mui/icons-material";
 import React from "react";
-import LoadingFade from "../components/LoadingFade";
 import {getFriendlyStatName, getHumanReadableStatValue} from "../utils";
+import ControlsCard from "./ControlsCard";
 
 const CurrentStatistics = (): React.ReactElement => {
     const {
@@ -50,32 +50,11 @@ const CurrentStatistics = (): React.ReactElement => {
     ]);
 
     return (
-        <Grid item>
-            <Paper>
-                <Grid container direction="column">
-                    <Box px={2} pt={1}>
-                        <Grid item container alignItems="center" spacing={1}>
-                            <Grid item><StatisticsIcon/></Grid>
-                            <Grid item>
-                                <Typography variant="subtitle1">
-                                    Current Statistics
-                                </Typography>
-                            </Grid>
-                            <Grid item>
-                                <LoadingFade
-                                    in={statisticsPending}
-                                    transitionDelay={statisticsPending ? "500ms" : "0ms"}
-                                    size={20}
-                                />
-                            </Grid>
-                        </Grid>
-                        <Grid container direction="row" sx={{paddingBottom: "8px", paddingTop: "8px", maxHeight: "4em"}}>
-                            {body}
-                        </Grid>
-                    </Box>
-                </Grid>
-            </Paper>
-        </Grid>
+        <ControlsCard icon={StatisticsIcon} title="Current Statistics" isLoading={statisticsPending}>
+            <Grid container direction="row">
+                {body}
+            </Grid>
+        </ControlsCard>
     );
 };