diff options
Diffstat (limited to 'modern/src/main')
| -rw-r--r-- | modern/src/main/MainPage.js | 138 | ||||
| -rw-r--r-- | modern/src/main/MainToolbar.js | 16 |
2 files changed, 63 insertions, 91 deletions
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> |