diff options
| -rw-r--r-- | modern/src/DeviceList.js | 21 | ||||
| -rw-r--r-- | modern/src/MainToolbar.js | 4 |
2 files changed, 22 insertions, 3 deletions
diff --git a/modern/src/DeviceList.js b/modern/src/DeviceList.js index 64f95a27..b047826f 100644 --- a/modern/src/DeviceList.js +++ b/modern/src/DeviceList.js @@ -1,5 +1,6 @@ import React, { Fragment, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; +import { makeStyles } from '@material-ui/core/styles'; import { useHistory } from 'react-router-dom'; import Avatar from '@material-ui/core/Avatar'; import Divider from '@material-ui/core/Divider'; @@ -13,16 +14,31 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemText from '@material-ui/core/ListItemText'; import LocationOnIcon from '@material-ui/icons/LocationOn'; import MoreVertIcon from '@material-ui/icons/MoreVert'; +import Fab from '@material-ui/core/Fab'; +import AddIcon from '@material-ui/icons/Add'; import { devicesActions } from './store'; import t from './common/localization'; import RemoveDialog from './RemoveDialog'; +const useStyles = makeStyles(theme => ({ + list: { + maxHeight: '100%', + overflow: 'auto', + }, + fab: { + position: 'absolute', + bottom: theme.spacing(2), + right: theme.spacing(2), + }, +})); + const DeviceList = () => { const [menuAnchorEl, setMenuAnchorEl] = useState(null); const [removeDialogOpen, setRemoveDialogOpen] = useState(false); const devices = useSelector(state => Object.values(state.devices.items)); const dispatch = useDispatch(); + const classes = useStyles(); const history = useHistory(); const handleMenuClick = (event) => { @@ -45,7 +61,7 @@ const DeviceList = () => { return ( <> - <List> + <List className={classes.list}> {devices.map((device, index, list) => ( <Fragment key={device.id}> <ListItem button key={device.id} onClick={() => dispatch(devicesActions.select(device))}> @@ -66,6 +82,9 @@ const DeviceList = () => { )) } </List> + <Fab size="medium" color="primary" className={classes.fab}> + <AddIcon /> + </Fab> <Menu id="device-menu" anchorEl={menuAnchorEl} keepMounted open={Boolean(menuAnchorEl)} onClose={handleMenuClose}> <MenuItem onClick={handleMenuEdit}>{t('sharedEdit')}</MenuItem> <MenuItem onClick={handleMenuRemove}>{t('sharedRemove')}</MenuItem> diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index 2368a82d..f77868df 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -34,7 +34,7 @@ const useStyles = makeStyles(theme => ({ menuButton: { marginLeft: -12, marginRight: 20, - } + }, })); const MainToolbar = () => { @@ -90,7 +90,7 @@ const MainToolbar = () => { <List subheader={<ListSubheader> {t('reportTitle')} </ListSubheader>}> - <ListItem button onClick={() => { history.push('/reports/route') }}> + <ListItem button disabled onClick={() => { history.push('/reports/route') }}> <ListItemIcon> <BarChartIcon /> </ListItemIcon> |