Device add button

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>