MyFavMirrors/moonfire-nvr
1
0
Fork 0
mirror of https://github.com/scottlamb/moonfire-nvr.git synced 2025-02-04 10:26:01 -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 startOfDay from "date-fns/startOfDay";
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 FormControlLabel from "@material-ui/core/FormControlLabel";
import FormLabel from "@material-ui/core/FormLabel";
@ -213,6 +217,17 @@ const TimerangeSelector = ({
setRange90k,
}: Props) => {
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, {
allowed: null,
rangeMillis: null,
@ -260,21 +275,25 @@ const TimerangeSelector = ({
<Card sx={{ padding: theme.spacing(1) }}>
<div>
<FormLabel component="legend">From</FormLabel>
<StaticDatePicker
displayStaticWrapperAs="desktop"
value={startDate}
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 });
}}
renderInput={(params) => <TextField {...params} variant="outlined" />}
/>
<ThemeProvider theme={swappedTheme}>
<StaticDatePicker
displayStaticWrapperAs="desktop"
value={startDate}
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 });
}}
renderInput={(params) => (
<TextField {...params} variant="outlined" />
)}
/>
</ThemeProvider>
<MyTimePicker
value={startTime}
onChange={(newValue) => {
@ -309,23 +328,25 @@ const TimerangeSelector = ({
/>
</RadioGroup>
<Collapse in={days.endType === "other-day"}>
<StaticDatePicker
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! });
}}
renderInput={(params) => (
<TextField {...params} variant="outlined" />
)}
/>
<ThemeProvider theme={swappedTheme}>
<StaticDatePicker
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! });
}}
renderInput={(params) => (
<TextField {...params} variant="outlined" />
)}
/>
</ThemeProvider>
</Collapse>
<MyTimePicker
value={endTime}