diff options
author | Anton Tananaev <anton@traccar.org> | 2022-05-24 19:09:22 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-05-24 19:09:22 -0700 |
commit | bfa87a014b8c5594fc171567f6149883848db4cd (patch) | |
tree | 557e7e2a446f6154ca3b81ca25d390d8a5c6ff52 /modern | |
parent | 933295fea082d1bd32f5c9dee8550bed07eff0d4 (diff) | |
download | trackermap-web-bfa87a014b8c5594fc171567f6149883848db4cd.tar.gz trackermap-web-bfa87a014b8c5594fc171567f6149883848db4cd.tar.bz2 trackermap-web-bfa87a014b8c5594fc171567f6149883848db4cd.zip |
Better action column
Diffstat (limited to 'modern')
-rw-r--r-- | modern/src/settings/GroupsPage.js | 2 | ||||
-rw-r--r-- | modern/src/settings/components/CollectionActions.js | 44 |
2 files changed, 37 insertions, 9 deletions
diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js index ebaa3b5e..7526563b 100644 --- a/modern/src/settings/GroupsPage.js +++ b/modern/src/settings/GroupsPage.js @@ -12,7 +12,7 @@ import CollectionActions from './components/CollectionActions'; const useStyles = makeStyles((theme) => ({ columnAction: { - width: theme.spacing(1), + width: '1%', padding: theme.spacing(0, 1), }, })); diff --git a/modern/src/settings/components/CollectionActions.js b/modern/src/settings/components/CollectionActions.js index c5e14949..e69553bd 100644 --- a/modern/src/settings/components/CollectionActions.js +++ b/modern/src/settings/components/CollectionActions.js @@ -1,16 +1,31 @@ import React, { useState } from 'react'; -import { IconButton, Menu, MenuItem } from '@mui/material'; +import { + IconButton, Menu, MenuItem, useMediaQuery, useTheme, +} from '@mui/material'; import MoreVertIcon from '@mui/icons-material/MoreVert'; +import EditIcon from '@mui/icons-material/Edit'; +import DeleteIcon from '@mui/icons-material/Delete'; import { useNavigate } from 'react-router-dom'; +import { makeStyles } from '@mui/styles'; import RemoveDialog from '../../common/components/RemoveDialog'; import { useTranslation } from '../../common/components/LocalizationProvider'; +const useStyles = makeStyles(() => ({ + row: { + display: 'flex', + }, +})); + const CollectionActions = ({ itemId, editPath, endpoint, setTimestamp, }) => { + const theme = useTheme(); + const classes = useStyles(); const navigate = useNavigate(); const t = useTranslation(); + const phone = useMediaQuery(theme.breakpoints.down('sm')); + const [menuAnchorEl, setMenuAnchorEl] = useState(null); const [removing, setRemoving] = useState(false); @@ -33,13 +48,26 @@ const CollectionActions = ({ return ( <> - <IconButton size="small" onClick={(event) => setMenuAnchorEl(event.currentTarget)}> - <MoreVertIcon /> - </IconButton> - <Menu open={!!menuAnchorEl} anchorEl={menuAnchorEl} onClose={() => setMenuAnchorEl(null)}> - <MenuItem onClick={handleEdit}>{t('sharedEdit')}</MenuItem> - <MenuItem onClick={handleRemove}>{t('sharedRemove')}</MenuItem> - </Menu> + {phone ? ( + <> + <IconButton size="small" onClick={(event) => setMenuAnchorEl(event.currentTarget)}> + <MoreVertIcon fontSize="small" /> + </IconButton> + <Menu open={!!menuAnchorEl} anchorEl={menuAnchorEl} onClose={() => setMenuAnchorEl(null)}> + <MenuItem onClick={handleEdit}>{t('sharedEdit')}</MenuItem> + <MenuItem onClick={handleRemove}>{t('sharedRemove')}</MenuItem> + </Menu> + </> + ) : ( + <div className={classes.row}> + <IconButton size="small" onClick={handleEdit}> + <EditIcon fontSize="small" /> + </IconButton> + <IconButton size="small" onClick={handleRemove}> + <DeleteIcon fontSize="small" /> + </IconButton> + </div> + )} <RemoveDialog style={{ transform: 'none' }} open={removing} endpoint={endpoint} itemId={itemId} onResult={handleRemoveResult} /> </> ); |