From 731eb8170dd34a9252d9c27906aa395248526f3b Mon Sep 17 00:00:00 2001
From: Scott Lamb <slamb@slamb.org>
Date: Tue, 16 Mar 2021 16:15:03 -0700
Subject: [PATCH] use menu button to show/hide selectors

Once I have more than one area of the UI (e.g., adding config, live
video, or a scrub bar prototype), I'll use this for a pull-down menu to
go between them, and maybe add a filter icon to do what this does. But
this works for now and most closely matches the old UI.

I tried to use a Collapse or Slide transition, but I had trouble getting
it to work on both desktop and mobile. In particular, the way I used the
flex wrap to display the selectors on the left/above doesn't seem
compatible with picking an orientation. If I pick the wrong orientation,
the list views won't fill the empty space.
---
 ui/src/App.tsx        | 10 ++++++++--
 ui/src/List/index.tsx | 30 +++++++++++++++++-------------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 64ba8ad..a424496 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
 
 import Container from "@material-ui/core/Container";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useReducer, useState } from "react";
 import * as api from "./api";
 import MoonfireMenu from "./AppMenu";
 import Login from "./Login";
@@ -19,6 +19,7 @@ type LoginState =
   | "user-requested-login";
 
 function App() {
+  const [showMenu, toggleShowMenu] = useReducer((m: boolean) => !m, true);
   const [session, setSession] = useState<Session | null>(null);
   const [cameras, setCameras] = useState<Camera[] | null>(null);
   const [timeZoneName, setTimeZoneName] = useState<string | null>(null);
@@ -96,6 +97,7 @@ function App() {
             setLoginState("user-requested-login");
           }}
           logout={logout}
+          menuClick={toggleShowMenu}
         />
       </AppBar>
       <Login
@@ -121,7 +123,11 @@ function App() {
         </Container>
       )}
       {cameras != null && cameras.length > 0 && (
-        <List cameras={cameras} timeZoneName={timeZoneName!} />
+        <List
+          cameras={cameras}
+          showMenu={showMenu}
+          timeZoneName={timeZoneName!}
+        />
       )}
     </>
   );
diff --git a/ui/src/List/index.tsx b/ui/src/List/index.tsx
index 1e6f04f..4c13384 100644
--- a/ui/src/List/index.tsx
+++ b/ui/src/List/index.tsx
@@ -2,20 +2,21 @@
 // Copyright (C) 2021 The Moonfire NVR Authors; see AUTHORS and LICENSE.txt.
 // SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
 
-import React, { useMemo, useState } from "react";
-import { Camera, Stream } from "../types";
-import * as api from "../api";
-import VideoList from "./VideoList";
-import { makeStyles, Theme } from "@material-ui/core/styles";
+import Box from "@material-ui/core/Box";
 import Modal from "@material-ui/core/Modal";
-import format from "date-fns/format";
-import utcToZonedTime from "date-fns-tz/utcToZonedTime";
+import Paper from "@material-ui/core/Paper";
+import { makeStyles, Theme } from "@material-ui/core/styles";
 import Table from "@material-ui/core/Table";
 import TableContainer from "@material-ui/core/TableContainer";
-import Paper from "@material-ui/core/Paper";
+import utcToZonedTime from "date-fns-tz/utcToZonedTime";
+import format from "date-fns/format";
+import React, { useMemo, useState } from "react";
+import * as api from "../api";
+import { Camera, Stream } from "../types";
+import DisplaySelector from "./DisplaySelector";
 import StreamMultiSelector from "./StreamMultiSelector";
 import TimerangeSelector from "./TimerangeSelector";
-import DisplaySelector from "./DisplaySelector";
+import VideoList from "./VideoList";
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
@@ -62,11 +63,11 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 interface Props {
   timeZoneName: string;
-
   cameras: Camera[];
+  showMenu: boolean;
 }
 
-const Main = ({ cameras, timeZoneName }: Props) => {
+const Main = ({ cameras, timeZoneName, showMenu }: Props) => {
   const classes = useStyles();
 
   /**
@@ -123,7 +124,10 @@ const Main = ({ cameras, timeZoneName }: Props) => {
   );
   return (
     <div className={classes.root}>
-      <div className={classes.selectors}>
+      <Box
+        className={classes.selectors}
+        sx={{ display: showMenu ? "block" : "none" }}
+      >
         <StreamMultiSelector
           cameras={cameras}
           selected={selectedStreams}
@@ -143,7 +147,7 @@ const Main = ({ cameras, timeZoneName }: Props) => {
           timestampTrack={timestampTrack}
           setTimestampTrack={setTimestampTrack}
         />
-      </div>
+      </Box>
       {videoLists.length > 0 && recordingsTable}
       {activeRecording != null && (
         <Modal open onClose={closeModal}>