MyFavMirrors/moonfire-nvr
1
0
Fork 0
mirror of https://github.com/scottlamb/moonfire-nvr.git synced 2025-02-13 14:48:09 -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

25
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,6 +275,7 @@ 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>
<ThemeProvider theme={swappedTheme}>
<StaticDatePicker <StaticDatePicker
displayStaticWrapperAs="desktop" displayStaticWrapperAs="desktop"
value={startDate} value={startDate}
@ -273,8 +289,11 @@ const TimerangeSelector = ({
onChange={(d: Date | null) => { onChange={(d: Date | null) => {
updateDays({ op: "set-start-day", newStartDate: d }); 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,6 +328,7 @@ const TimerangeSelector = ({
/> />
</RadioGroup> </RadioGroup>
<Collapse in={days.endType === "other-day"}> <Collapse in={days.endType === "other-day"}>
<ThemeProvider theme={swappedTheme}>
<StaticDatePicker <StaticDatePicker
displayStaticWrapperAs="desktop" displayStaticWrapperAs="desktop"
value={endDate} value={endDate}
@ -326,6 +346,7 @@ const TimerangeSelector = ({
<TextField {...params} variant="outlined" /> <TextField {...params} variant="outlined" />
)} )}
/> />
</ThemeProvider>
</Collapse> </Collapse>
<MyTimePicker <MyTimePicker
value={endTime} value={endTime}