MyFavMirrors/moonfire-nvr
1
0
Fork 0
mirror of https://github.com/scottlamb/moonfire-nvr.git synced 2025-07-29 10:11:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

improve time range selector usability

Browse Source 
* hide the end day selector away when it's not in use.
  It was confusing, especially since it seemed to have
  a purely black circle over the selected date when disabled.
* add a "Time" label to the time selectors. On desktop,
  this isn't entirely necessary because they have clock icons
  and "hh:mm:ss" annotations. But on mobile, they were entirely blank,
  so it was unclear what they were for.
This commit is contained in:
Scott Lamb 2021-03-16 13:22:36 -07:00
parent 7522b37de7
commit 1cb6a19a65
1 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,6 +16,7 @@ import FormLabel from "@material-ui/core/FormLabel";
import Radio from "@material-ui/core/Radio"; import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup"; import RadioGroup from "@material-ui/core/RadioGroup";
import TimePicker, { TimePickerProps } from "@material-ui/lab/TimePicker"; import TimePicker, { TimePickerProps } from "@material-ui/lab/TimePicker";
import Collapse from "@material-ui/core/Collapse";
interface Props { interface Props {
selectedStreams: Set<Stream>; selectedStreams: Set<Stream>;
@ -28,6 +29,7 @@ const MyTimePicker = (
props: Pick<TimePickerProps, "value" | "onChange" | "disabled"> props: Pick<TimePickerProps, "value" | "onChange" | "disabled">
) => ( ) => (
<TimePicker <TimePicker
label="Time"
views={["hours", "minutes", "seconds"]} views={["hours", "minutes", "seconds"]}
renderInput={(params) => <TextField size="small" {...params} />} renderInput={(params) => <TextField size="small" {...params} />}
inputFormat="HH:mm:ss" inputFormat="HH:mm:ss"
@ -307,21 +309,25 @@ const TimerangeSelector = ({
label="Other day" label="Other day"
/> />
</RadioGroup> </RadioGroup>
<StaticDatePicker <Collapse in={days.endType === "other-day"}>
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" />
)}
/>
</Collapse>
<MyTimePicker <MyTimePicker
value={endTime} value={endTime}
onChange={(newValue) => { onChange={(newValue) => {