aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-06-21 10:37:49 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2020-06-21 10:37:49 -0700
commit0de52345ecb1bc9137a3d5df1fe753917b677314 (patch)
treec256b94e1466da9103b0d59c3212d98c0597cc18 /modern
parent505aec2ef38d52d46d2ff11e5f62f1aee0cc1417 (diff)
downloadtrackermap-web-0de52345ecb1bc9137a3d5df1fe753917b677314.tar.gz
trackermap-web-0de52345ecb1bc9137a3d5df1fe753917b677314.tar.bz2
trackermap-web-0de52345ecb1bc9137a3d5df1fe753917b677314.zip
Device add button
Diffstat (limited to 'modern')
-rw-r--r--modern/src/DeviceList.js21
-rw-r--r--modern/src/MainToolbar.js4
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>