From 52421e5f09687d4ae57386a69f9ffc69c011f9bb Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Thu, 20 Oct 2022 22:40:45 -0700
Subject: Update main screen

---
 modern/src/main/MainPage.js    | 138 ++++++++++++++++-------------------------
 modern/src/main/MainToolbar.js |  16 +++--
 2 files changed, 63 insertions(+), 91 deletions(-)

(limited to 'modern/src/main')

diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index 14e6ebf8..2713c81e 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -1,17 +1,13 @@
 import React, {
-  useState, useEffect, useCallback,
+  useState, useCallback, useEffect,
 } from 'react';
-import {
-  Paper, Button,
-} from '@mui/material';
+import { Paper } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import ListIcon from '@mui/icons-material/ViewList';
 import { useDispatch, useSelector } from 'react-redux';
 import DevicesList from './DevicesList';
 import BottomMenu from '../common/components/BottomMenu';
-import { useTranslation } from '../common/components/LocalizationProvider';
 import StatusCard from '../common/components/StatusCard';
 import { devicesActions } from '../store';
 import usePersistedState from '../common/util/usePersistedState';
@@ -23,68 +19,40 @@ import MainMap from './MainMap';
 const useStyles = makeStyles((theme) => ({
   root: {
     height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
   },
   sidebar: {
     display: 'flex',
     flexDirection: 'column',
-    position: 'fixed',
-    left: 0,
-    top: 0,
-    zIndex: 3,
-    margin: theme.spacing(1.5),
-    width: theme.dimensions.drawerWidthDesktop,
-    bottom: theme.dimensions.bottomBarHeight,
-    transition: 'transform .5s ease',
-    backgroundColor: 'white',
+    [theme.breakpoints.up('md')]: {
+      position: 'fixed',
+      left: 0,
+      top: 0,
+      height: `calc(100% - ${theme.spacing(3)})`,
+      width: theme.dimensions.drawerWidthDesktop,
+      margin: theme.spacing(1.5),
+      zIndex: 3,
+    },
     [theme.breakpoints.down('md')]: {
+      height: '100%',
       width: '100%',
-      margin: 0,
     },
   },
-  sidebarCollapsed: {
-    transform: `translateX(-${theme.dimensions.drawerWidthDesktop})`,
-    marginLeft: 0,
-    [theme.breakpoints.down('md')]: {
-      transform: 'translateX(-100vw)',
-    },
+  header: {
+    zIndex: 6,
   },
-  toolbar: {
-    zIndex: 1,
+  footer: {
+    zIndex: 5,
   },
-  deviceList: {
+  middle: {
     flex: 1,
+    display: 'grid',
   },
-  sidebarToggle: {
-    position: 'fixed',
-    left: theme.spacing(1.5),
-    top: theme.spacing(3),
-    borderRadius: '0px',
-    minWidth: 0,
-    [theme.breakpoints.down('md')]: {
-      left: 0,
-    },
-  },
-  sidebarToggleText: {
-    marginLeft: theme.spacing(1),
-    [theme.breakpoints.only('xs')]: {
-      display: 'none',
-    },
-  },
-  sidebarToggleBg: {
-    backgroundColor: 'white',
-    color: 'rgba(0, 0, 0, 0.6)',
-    '&:hover': {
-      backgroundColor: 'white',
-    },
+  contentMap: {
+    gridArea: '1 / 1',
   },
-  bottomMenu: {
-    position: 'fixed',
-    left: theme.spacing(1.5),
-    bottom: theme.spacing(1.5),
+  contentList: {
+    gridArea: '1 / 1',
     zIndex: 4,
-    width: theme.dimensions.drawerWidthDesktop,
   },
 }));
 
@@ -92,10 +60,8 @@ const MainPage = () => {
   const classes = useStyles();
   const dispatch = useDispatch();
   const theme = useTheme();
-  const t = useTranslation();
 
   const desktop = useMediaQuery(theme.breakpoints.up('md'));
-  const phone = useMediaQuery(theme.breakpoints.down('sm'));
 
   const [mapOnSelect] = usePersistedState('mapOnSelect', false);
 
@@ -114,13 +80,11 @@ const MainPage = () => {
   const [filterSort, setFilterSort] = usePersistedState('filterSort', '');
   const [filterMap, setFilterMap] = usePersistedState('filterMap', false);
 
-  const [devicesOpen, setDevicesOpen] = useState(false);
+  const [devicesOpen, setDevicesOpen] = useState(desktop);
   const [eventsOpen, setEventsOpen] = useState(false);
 
   const onEventsClick = useCallback(() => setEventsOpen(true), [setEventsOpen]);
 
-  useEffect(() => setDevicesOpen(desktop), [desktop]);
-
   useEffect(() => {
     if (!desktop && mapOnSelect && selectedDeviceId) {
       setDevicesOpen(false);
@@ -131,25 +95,18 @@ const MainPage = () => {
 
   return (
     <div className={classes.root}>
-      <MainMap
-        filteredPositions={filteredPositions}
-        selectedPosition={selectedPosition}
-        onEventsClick={onEventsClick}
-      />
-      <Button
-        variant="contained"
-        color={phone ? 'secondary' : 'primary'}
-        classes={{ containedPrimary: classes.sidebarToggleBg }}
-        className={classes.sidebarToggle}
-        onClick={() => setDevicesOpen(!devicesOpen)}
-        disableElevation
-      >
-        <ListIcon />
-        <div className={classes.sidebarToggleText}>{t('deviceTitle')}</div>
-      </Button>
-      <Paper square elevation={3} className={`${classes.sidebar} ${!devicesOpen && classes.sidebarCollapsed}`}>
-        <Paper square elevation={3} className={classes.toolbar}>
+      {desktop && (
+        <MainMap
+          filteredPositions={filteredPositions}
+          selectedPosition={selectedPosition}
+          onEventsClick={onEventsClick}
+        />
+      )}
+      <div className={classes.sidebar}>
+        <Paper square elevation={3} className={classes.header}>
           <MainToolbar
+            devicesOpen={devicesOpen}
+            setDevicesOpen={setDevicesOpen}
             filter={filter}
             setFilter={setFilter}
             filterSort={filterSort}
@@ -158,15 +115,26 @@ const MainPage = () => {
             setFilterMap={setFilterMap}
           />
         </Paper>
-        <div className={classes.deviceList}>
-          <DevicesList devices={filteredDevices} />
+        <div className={classes.middle}>
+          {!desktop && (
+            <div className={classes.contentMap}>
+              <MainMap
+                filteredPositions={filteredPositions}
+                selectedPosition={selectedPosition}
+                onEventsClick={onEventsClick}
+              />
+            </div>
+          )}
+          <Paper square className={classes.contentList} style={devicesOpen ? {} : { visibility: 'hidden' }}>
+            <DevicesList devices={filteredDevices} />
+          </Paper>
         </div>
-      </Paper>
-      {desktop && (
-        <div className={classes.bottomMenu}>
-          <BottomMenu />
-        </div>
-      )}
+        {desktop && (
+          <div className={classes.footer}>
+            <BottomMenu />
+          </div>
+        )}
+      </div>
       <EventsDrawer open={eventsOpen} onClose={() => setEventsOpen(false)} />
       {selectedDeviceId && (
         <StatusCard
diff --git a/modern/src/main/MainToolbar.js b/modern/src/main/MainToolbar.js
index 67a8a731..015e86ba 100644
--- a/modern/src/main/MainToolbar.js
+++ b/modern/src/main/MainToolbar.js
@@ -5,6 +5,8 @@ import {
   Toolbar, IconButton, OutlinedInput, InputAdornment, Popover, FormControl, InputLabel, Select, MenuItem, FormGroup, FormControlLabel, Checkbox, Badge,
 } from '@mui/material';
 import { makeStyles } from '@mui/styles';
+import MapIcon from '@mui/icons-material/Map';
+import ViewListIcon from '@mui/icons-material/ViewList';
 import AddIcon from '@mui/icons-material/Add';
 import TuneIcon from '@mui/icons-material/Tune';
 import { useTranslation } from '../common/components/LocalizationProvider';
@@ -13,10 +15,7 @@ import { useDeviceReadonly } from '../common/util/permissions';
 const useStyles = makeStyles((theme) => ({
   toolbar: {
     display: 'flex',
-    padding: theme.spacing(0, 1),
-    '& > *': {
-      margin: theme.spacing(0, 1),
-    },
+    gap: theme.spacing(1),
   },
   filterPanel: {
     display: 'flex',
@@ -28,6 +27,8 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const MainToolbar = ({
+  devicesOpen,
+  setDevicesOpen,
   filter,
   setFilter,
   filterSort,
@@ -50,7 +51,10 @@ const MainToolbar = ({
   const deviceStatusCount = (status) => Object.values(devices).filter((d) => d.status === status).length;
 
   return (
-    <Toolbar className={classes.toolbar} disableGutters>
+    <Toolbar className={classes.toolbar}>
+      <IconButton edge="start" onClick={() => setDevicesOpen(!devicesOpen)}>
+        {devicesOpen ? <MapIcon /> : <ViewListIcon />}
+      </IconButton>
       <OutlinedInput
         ref={filterRef}
         placeholder={t('sharedSearchDevices')}
@@ -125,7 +129,7 @@ const MainToolbar = ({
           </FormGroup>
         </div>
       </Popover>
-      <IconButton onClick={() => navigate('/settings/device')} disabled={deviceReadonly}>
+      <IconButton edge="end" onClick={() => navigate('/settings/device')} disabled={deviceReadonly}>
         <AddIcon />
       </IconButton>
     </Toolbar>
-- 
cgit v1.2.3