MyFavMirrors/moonfire-nvr
1
0
Fork 0
mirror of https://github.com/scottlamb/moonfire-nvr.git synced 2025-02-09 12:48:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

use secondary colors in date pickers

Browse Source
This commit is contained in:
Scott Lamb 2021-03-16 21:57:55 -07:00
parent e272075941
commit d273a99f83
1 changed files with 54 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
ui/src/List/TimerangeSelector.tsx
View File

@ -9,7 +9,11 @@ import { zonedTimeToUtc } from "date-fns-tz";
import { addDays, addMilliseconds, differenceInMilliseconds } from "date-fns"; import { addDays, addMilliseconds, differenceInMilliseconds } from "date-fns";
import startOfDay from "date-fns/startOfDay"; import startOfDay from "date-fns/startOfDay";
import Card from "@material-ui/core/Card"; import Card from "@material-ui/core/Card";
import { useTheme } from "@material-ui/core/styles"; import {
ThemeProvider,
createMuiTheme,
useTheme,
} from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel"; import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormLabel from "@material-ui/core/FormLabel"; import FormLabel from "@material-ui/core/FormLabel";
@ -213,6 +217,17 @@ const TimerangeSelector = ({
setRange90k, setRange90k,
}: Props) => { }: Props) => {
const theme = useTheme(); const theme = useTheme();
// StaticDatePicker doesn't have an obvious way to use the secondary theme
// colors, so make a new theme with swapped colors.
const swappedTheme = createMuiTheme({
...theme,
palette: {
...theme.palette,
primary: theme.palette.secondary,
secondary: theme.palette.primary,
},
});
const [days, updateDays] = React.useReducer(daysStateReducer, { const [days, updateDays] = React.useReducer(daysStateReducer, {
allowed: null, allowed: null,
rangeMillis: null, rangeMillis: null,
@ -260,21 +275,25 @@ const TimerangeSelector = ({
<Card sx={{ padding: theme.spacing(1) }}> <Card sx={{ padding: theme.spacing(1) }}>
<div> <div>
<FormLabel component="legend">From</FormLabel> <FormLabel component="legend">From</FormLabel>
<StaticDatePicker <ThemeProvider theme={swappedTheme}>
displayStaticWrapperAs="desktop" <StaticDatePicker
value={startDate} displayStaticWrapperAs="desktop"
shouldDisableDate={shouldDisableDate} value={startDate}
maxDate={ shouldDisableDate={shouldDisableDate}
days.allowed === null ? today : new Date(days.allowed.maxMillis) maxDate={
} days.allowed === null ? today : new Date(days.allowed.maxMillis)
minDate={ }
days.allowed === null ? today : new Date(days.allowed.minMillis) minDate={
} days.allowed === null ? today : new Date(days.allowed.minMillis)
onChange={(d: Date | null) => { }
updateDays({ op: "set-start-day", newStartDate: d }); onChange={(d: Date | null) => {
}} updateDays({ op: "set-start-day", newStartDate: d });
renderInput={(params) => <TextField {...params} variant="outlined" />} }}
/> renderInput={(params) => (
<TextField {...params} variant="outlined" />
)}
/>
</ThemeProvider>
<MyTimePicker <MyTimePicker
value={startTime} value={startTime}
onChange={(newValue) => { onChange={(newValue) => {
@ -309,23 +328,25 @@ const TimerangeSelector = ({
/> />
</RadioGroup> </RadioGroup>
<Collapse in={days.endType === "other-day"}> <Collapse in={days.endType === "other-day"}>
<StaticDatePicker <ThemeProvider theme={swappedTheme}>
displayStaticWrapperAs="desktop" <StaticDatePicker
value={endDate} displayStaticWrapperAs="desktop"
shouldDisableDate={(d: Date | null) => value={endDate}
days.endType !== "other-day" || shouldDisableDate(d) shouldDisableDate={(d: Date | null) =>
} days.endType !== "other-day" || shouldDisableDate(d)
maxDate={ }
startDate === null ? today : new Date(days.allowed!.maxMillis) maxDate={
} startDate === null ? today : new Date(days.allowed!.maxMillis)
minDate={startDate === null ? today : startDate} }
onChange={(d: Date | null) => { minDate={startDate === null ? today : startDate}
updateDays({ op: "set-end-day", newEndDate: d! }); onChange={(d: Date | null) => {
}} updateDays({ op: "set-end-day", newEndDate: d! });
renderInput={(params) => ( }}
<TextField {...params} variant="outlined" /> renderInput={(params) => (
)} <TextField {...params} variant="outlined" />
/> )}
/>
</ThemeProvider>
</Collapse> </Collapse>
<MyTimePicker <MyTimePicker
value={endTime} value={endTime}