From 7f4b04ee8a1b420b3ea588ce01cf721b94d0d042 Mon Sep 17 00:00:00 2001 From: Scott Lamb Date: Mon, 15 Apr 2024 21:46:22 -0700 Subject: [PATCH] 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 `` to because that's the container that needs the `display: "flex"`. But really, it's clearer to do this with `` anyway, so do that. * Switch from `` to ``. 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 `` seems fine for this use anyway. --- ui/src/List/DisplaySelector.tsx | 19 ++-- ui/src/List/StreamMultiSelector.tsx | 65 ++++++------ ui/src/List/TimerangeSelector.tsx | 153 ++++++++++++++-------------- 3 files changed, 116 insertions(+), 121 deletions(-) diff --git a/ui/src/List/DisplaySelector.tsx b/ui/src/List/DisplaySelector.tsx index cf63bae..88dc751 100644 --- 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 ( - - + + Max video duration @@ -101,8 +98,8 @@ const DisplaySelector = (props: Props) => { } label="Timestamp track" /> - - + + ); }; diff --git a/ui/src/List/StreamMultiSelector.tsx b/ui/src/List/StreamMultiSelector.tsx index ca2ada6..501944f 100644 --- 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 ( - - - + - - - - toggleType("main")}>main - toggleType("sub")}>sub - - - {cameraRows} - - - + }, + }} + > + + + + toggleType("main")}>main + toggleType("sub")}>sub + + + {cameraRows} + + ); }; diff --git a/ui/src/List/TimerangeSelector.tsx b/ui/src/List/TimerangeSelector.tsx index 2535e4d..b1e8f3e 100644 --- a/ui/src/List/TimerangeSelector.tsx +++ b/ui/src/List/TimerangeSelector.tsx @@ -59,7 +59,6 @@ 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"; @@ -67,7 +66,8 @@ 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; @@ -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 ( - - - - From + + + From + { + updateDays({ op: "set-start-day", newStartDate: d }); + }} + /> + { + if (newValue === null || isFinite((newValue as Date).getTime())) { + setStartTime(newValue); + } + }} + disabled={days.allowed === null} + /> + + + + To + + { + updateDays({ + op: "set-end-type", + newEndType: e.target.value as EndDayType, + }); + }} + > + } + label="Same day" + /> + } + label="Other day" + /> + + + days.endType !== "other-day" || shouldDisableDate(d) + } maxDate={ - days.allowed === null ? today : new Date(days.allowed.maxMillis) - } - minDate={ - days.allowed === null ? today : new Date(days.allowed.minMillis) + 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! }); }} /> - { - if (newValue === null || isFinite((newValue as Date).getTime())) { - setStartTime(newValue); - } - }} - disabled={days.allowed === null} - /> - - - - To - - { - updateDays({ - op: "set-end-type", - newEndType: e.target.value as EndDayType, - }); - }} - > - } - label="Same day" - /> - } - label="Other day" - /> - - - - 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! }); - }} - /> - - { - if (newValue === null || isFinite((newValue as Date).getTime())) { - setEndTime(newValue); - } - }} - disabled={days.allowed === null} - /> - - - + + { + if (newValue === null || isFinite((newValue as Date).getTime())) { + setEndTime(newValue); + } + }} + disabled={days.allowed === null} + /> + + ); };