list ui selector layout fixes

* The `DisplaySelector` wasn't getting the correct flex layout. Before this was done by a manual style on a `Paper` element. That broke when adding the inner `<CardContent>` to because that's the container that needs the `display: "flex"`. But really, it's clearer to do this with `<FormGroup>` anyway, so do that. * Switch from `<Card><CardContent>` to `<Paper sx={{ padding: ... }}>`. The card content has extra padding (16 px in general, 24 at the bottom of the last element to fit with an action). I'm not quite sure the best way to remove it, and the simpler `<Paper>` seems fine for this use anyway.
scottlamb · Apr 16, 2024 · 7f4b04e · 7f4b04e
1 parent 9ede361
commit 7f4b04e
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 121 deletions.
diff --git a/ui/src/List/DisplaySelector.tsx b/ui/src/List/DisplaySelector.tsx
@@ -2,14 +2,15 @@
 // Copyright (C) 2021 The Moonfire NVR Authors; see AUTHORS and LICENSE.txt.
 // SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
 
-import Card from "@mui/material/Card";
 import Checkbox from "@mui/material/Checkbox";
 import InputLabel from "@mui/material/InputLabel";
 import FormControl from "@mui/material/FormControl";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import FormControlLabel from "@mui/material/FormControlLabel";
-import CardContent from "@mui/material/CardContent/CardContent";
+import FormGroup from "@mui/material/FormGroup";
+import Paper from "@mui/material/Paper";
+import { useTheme } from "@mui/material/styles";
 
 interface Props {
   split90k?: number;
@@ -33,14 +34,10 @@ export const DEFAULT_DURATION = DURATIONS[0][1];
  * Returns a card for setting options relating to how videos are displayed.
  */
 const DisplaySelector = (props: Props) => {
+  const theme = useTheme();
   return (
-    <Card
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      <CardContent>
+    <Paper style={{ padding: theme.spacing(1) }}>
+      <FormGroup>
         <FormControl fullWidth variant="outlined">
           <InputLabel id="split90k-label" shrink>
             Max video duration
@@ -101,8 +98,8 @@ const DisplaySelector = (props: Props) => {
           }
           label="Timestamp track"
         />
-      </CardContent>
-    </Card>
+      </FormGroup>
+    </Paper>
   );
 };
 

diff --git a/ui/src/List/StreamMultiSelector.tsx b/ui/src/List/StreamMultiSelector.tsx
@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
 
 import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
 import { Camera, Stream, StreamType } from "../types";
 import Checkbox from "@mui/material/Checkbox";
 import { ToplevelResponse } from "../api";
-import CardContent from "@mui/material/CardContent/CardContent";
+import Paper from "@mui/material/Paper";
+import { useTheme } from "@mui/material/styles";
 
 interface Props {
   toplevel: ToplevelResponse;
@@ -17,6 +17,7 @@ interface Props {
 
 /** Returns a table which allows selecting zero or more streams. */
 const StreamMultiSelector = ({ toplevel, selected, setSelected }: Props) => {
+  const theme = useTheme();
   const setStream = (s: Stream, checked: boolean) => {
     const updated = new Set(selected);
     if (checked) {
@@ -90,39 +91,37 @@ const StreamMultiSelector = ({ toplevel, selected, setSelected }: Props) => {
     );
   });
   return (
-    <Card>
-      <CardContent>
-        <Box
-          component="table"
-          sx={{
-            fontSize: "0.9rem",
-            "& td:first-of-type": {
-              paddingRight: "3px",
-            },
-            "& td:not(:first-of-type)": {
-              textAlign: "center",
-            },
+    <Paper sx={{ padding: theme.spacing(1) }}>
+      <Box
+        component="table"
+        sx={{
+          fontSize: "0.9rem",
+          "& td:first-of-type": {
+            paddingRight: "3px",
+          },
+          "& td:not(:first-of-type)": {
+            textAlign: "center",
+          },
+          "& .MuiCheckbox-root": {
+            padding: "3px",
+          },
+          "@media (pointer: fine)": {
             "& .MuiCheckbox-root": {
-              padding: "3px",
-            },
-            "@media (pointer: fine)": {
-              "& .MuiCheckbox-root": {
-                padding: "0px",
-              },
+              padding: "0px",
             },
-          }}
-        >
-          <thead>
-            <tr>
-              <td />
-              <td onClick={() => toggleType("main")}>main</td>
-              <td onClick={() => toggleType("sub")}>sub</td>
-            </tr>
-          </thead>
-          <tbody>{cameraRows}</tbody>
-        </Box>
-      </CardContent>
-    </Card>
+          },
+        }}
+      >
+        <thead>
+          <tr>
+            <td />
+            <td onClick={() => toggleType("main")}>main</td>
+            <td onClick={() => toggleType("sub")}>sub</td>
+          </tr>
+        </thead>
+        <tbody>{cameraRows}</tbody>
+      </Box>
+    </Paper>
   );
 };
 

diff --git a/ui/src/List/TimerangeSelector.tsx b/ui/src/List/TimerangeSelector.tsx
@@ -59,15 +59,15 @@ import React, { useEffect } from "react";
 import { zonedTimeToUtc } from "date-fns-tz";
 import { addDays, addMilliseconds, differenceInMilliseconds } from "date-fns";
 import startOfDay from "date-fns/startOfDay";
-import Card from "@mui/material/Card";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormLabel from "@mui/material/FormLabel";
 import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
 import { TimePicker, TimePickerProps } from "@mui/x-date-pickers/TimePicker";
 import Collapse from "@mui/material/Collapse";
 import Box from "@mui/material/Box";
-import CardContent from "@mui/material/CardContent/CardContent";
+import Paper from "@mui/material/Paper";
+import { useTheme } from "@mui/material/styles";
 
 interface Props {
   selectedStreams: Set<Stream>;
@@ -326,6 +326,7 @@ const TimerangeSelector = ({
   timeZoneName,
   setRange90k,
 }: Props) => {
+  const theme = useTheme();
   const [days, updateDays] = React.useReducer(daysStateReducer, {
     allowed: null,
     rangeMillis: null,
@@ -370,88 +371,86 @@ const TimerangeSelector = ({
     endDate = new Date(days.rangeMillis[1]);
   }
   return (
-    <Card>
-      <CardContent>
-        <Box>
-          <FormLabel component="legend">From</FormLabel>
+    <Paper sx={{ padding: theme.spacing(1) }}>
+      <Box>
+        <FormLabel component="legend">From</FormLabel>
+        <SmallStaticDatePicker
+          displayStaticWrapperAs="desktop"
+          value={startDate}
+          disabled={days.allowed === null}
+          shouldDisableDate={shouldDisableDate}
+          maxDate={
+            days.allowed === null ? today : new Date(days.allowed.maxMillis)
+          }
+          minDate={
+            days.allowed === null ? today : new Date(days.allowed.minMillis)
+          }
+          onChange={(d: Date | null) => {
+            updateDays({ op: "set-start-day", newStartDate: d });
+          }}
+        />
+        <MyTimePicker
+          value={startTime}
+          onChange={(newValue) => {
+            if (newValue === null || isFinite((newValue as Date).getTime())) {
+              setStartTime(newValue);
+            }
+          }}
+          disabled={days.allowed === null}
+        />
+      </Box>
+      <Box>
+        <FormLabel sx={{ mt: 1 }} component="legend">
+          To
+        </FormLabel>
+        <RadioGroup
+          row
+          value={days.endType}
+          onChange={(e) => {
+            updateDays({
+              op: "set-end-type",
+              newEndType: e.target.value as EndDayType,
+            });
+          }}
+        >
+          <FormControlLabel
+            value="same-day"
+            control={<Radio size="small" color="secondary" />}
+            label="Same day"
+          />
+          <FormControlLabel
+            value="other-day"
+            control={<Radio size="small" color="secondary" />}
+            label="Other day"
+          />
+        </RadioGroup>
+        <Collapse in={days.endType === "other-day"}>
           <SmallStaticDatePicker
             displayStaticWrapperAs="desktop"
-            value={startDate}
-            disabled={days.allowed === null}
-            shouldDisableDate={shouldDisableDate}
-            maxDate={
-              days.allowed === null ? today : new Date(days.allowed.maxMillis)
+            value={endDate}
+            shouldDisableDate={(d: Date | null) =>
+              days.endType !== "other-day" || shouldDisableDate(d)
             }
-            minDate={
-              days.allowed === null ? today : new Date(days.allowed.minMillis)
+            maxDate={
+              startDate === null ? today : new Date(days.allowed!.maxMillis)
             }
+            minDate={startDate === null ? today : startDate}
             onChange={(d: Date | null) => {
-              updateDays({ op: "set-start-day", newStartDate: d });
+              updateDays({ op: "set-end-day", newEndDate: d! });
             }}
           />
-          <MyTimePicker
-            value={startTime}
-            onChange={(newValue) => {
-              if (newValue === null || isFinite((newValue as Date).getTime())) {
-                setStartTime(newValue);
-              }
-            }}
-            disabled={days.allowed === null}
-          />
-        </Box>
-        <Box>
-          <FormLabel sx={{ mt: 1 }} component="legend">
-            To
-          </FormLabel>
-          <RadioGroup
-            row
-            value={days.endType}
-            onChange={(e) => {
-              updateDays({
-                op: "set-end-type",
-                newEndType: e.target.value as EndDayType,
-              });
-            }}
-          >
-            <FormControlLabel
-              value="same-day"
-              control={<Radio size="small" color="secondary" />}
-              label="Same day"
-            />
-            <FormControlLabel
-              value="other-day"
-              control={<Radio size="small" color="secondary" />}
-              label="Other day"
-            />
-          </RadioGroup>
-          <Collapse in={days.endType === "other-day"}>
-            <SmallStaticDatePicker
-              displayStaticWrapperAs="desktop"
-              value={endDate}
-              shouldDisableDate={(d: Date | null) =>
-                days.endType !== "other-day" || shouldDisableDate(d)
-              }
-              maxDate={
-                startDate === null ? today : new Date(days.allowed!.maxMillis)
-              }
-              minDate={startDate === null ? today : startDate}
-              onChange={(d: Date | null) => {
-                updateDays({ op: "set-end-day", newEndDate: d! });
-              }}
-            />
-          </Collapse>
-          <MyTimePicker
-            value={endTime}
-            onChange={(newValue) => {
-              if (newValue === null || isFinite((newValue as Date).getTime())) {
-                setEndTime(newValue);
-              }
-            }}
-            disabled={days.allowed === null}
-          />
-        </Box>
-      </CardContent>
-    </Card>
+        </Collapse>
+        <MyTimePicker
+          value={endTime}
+          onChange={(newValue) => {
+            if (newValue === null || isFinite((newValue as Date).getTime())) {
+              setEndTime(newValue);
+            }
+          }}
+          disabled={days.allowed === null}
+        />
+      </Box>
+    </Paper>
   );
 };