MyFavMirrors/moonfire-nvr
1
0
Fork 0
mirror of https://github.com/scottlamb/moonfire-nvr.git synced 2024-12-26 07:05:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

Revert "use secondary colors in date pickers"

Browse Source 
This reverts commit d273a99f83.
This accidentally increased the density by making my global CSS
overrides ineffective. I'm struggling to achieve both, and I'd rather
have my desired sizing.
This commit is contained in:
Scott Lamb 2021-03-17 11:10:39 -07:00
parent 76ef6e58b8
commit 85da157cf4
1 changed files with 33 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,11 +9,7 @@ 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 { import { useTheme } from "@material-ui/core/styles";
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";
@ -217,17 +213,6 @@ 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,
@ -275,25 +260,21 @@ 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} shouldDisableDate={shouldDisableDate}
shouldDisableDate={shouldDisableDate} maxDate={
maxDate={ days.allowed === null ? today : new Date(days.allowed.maxMillis)
days.allowed === null ? today : new Date(days.allowed.maxMillis) }
} minDate={
minDate={ days.allowed === null ? today : new Date(days.allowed.minMillis)
days.allowed === null ? today : new Date(days.allowed.minMillis) }
} 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) => {
@ -328,25 +309,23 @@ 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} shouldDisableDate={(d: Date | null) =>
shouldDisableDate={(d: Date | null) => days.endType !== "other-day" || shouldDisableDate(d)
days.endType !== "other-day" || shouldDisableDate(d) }
} maxDate={
maxDate={ startDate === null ? today : new Date(days.allowed!.maxMillis)
startDate === null ? today : new Date(days.allowed!.maxMillis) }
} minDate={startDate === null ? today : startDate}
minDate={startDate === null ? today : startDate} onChange={(d: Date | null) => {
onChange={(d: Date | null) => { updateDays({ op: "set-end-day", newEndDate: d! });
updateDays({ op: "set-end-day", newEndDate: d! }); }}
}} renderInput={(params) => (
renderInput={(params) => ( <TextField {...params} variant="outlined" />
<TextField {...params} variant="outlined" /> )}
)} />
/>
</ThemeProvider>
</Collapse> </Collapse>
<MyTimePicker <MyTimePicker
value={endTime} value={endTime}