From 1cb6a19a658b113d6ad031cdfde6acac4465fd4b Mon Sep 17 00:00:00 2001
From: Scott Lamb <slamb@slamb.org>
Date: Tue, 16 Mar 2021 13:22:36 -0700
Subject: [PATCH] improve time range selector usability

* 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.
---
 ui/src/List/TimerangeSelector.tsx | 36 ++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 15 deletions(-)

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