diff options
author | Anton Tananaev <anton@traccar.org> | 2022-05-24 10:05:55 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-05-24 10:05:55 -0700 |
commit | 804993dcfb55e536baffa160672f17b1d5224d5b (patch) | |
tree | ee90bb63965bb4b1cc7e9821871226b6e0841970 | |
parent | c7d24540bd0f03e4175335a597d44cc48dbb8e42 (diff) | |
download | trackermap-web-804993dcfb55e536baffa160672f17b1d5224d5b.tar.gz trackermap-web-804993dcfb55e536baffa160672f17b1d5224d5b.tar.bz2 trackermap-web-804993dcfb55e536baffa160672f17b1d5224d5b.zip |
Fix attributes editing
-rw-r--r-- | modern/src/settings/components/AddAttributeDialog.js | 28 | ||||
-rw-r--r-- | modern/src/settings/components/EditAttributesView.js | 4 |
2 files changed, 21 insertions, 11 deletions
diff --git a/modern/src/settings/components/AddAttributeDialog.js b/modern/src/settings/components/AddAttributeDialog.js index de5d22b7..86ff64ea 100644 --- a/modern/src/settings/components/AddAttributeDialog.js +++ b/modern/src/settings/components/AddAttributeDialog.js @@ -1,13 +1,24 @@ import React, { useState } from 'react'; import { - Button, Dialog, DialogActions, DialogContent, FormControl, InputLabel, MenuItem, Select, TextField, - Autocomplete, + Button, Dialog, DialogActions, DialogContent, FormControl, InputLabel, MenuItem, Select, TextField, Autocomplete, } from '@mui/material'; import { createFilterOptions } from '@mui/material/useAutocomplete'; +import { makeStyles } from '@mui/styles'; import { useTranslation } from '../../common/components/LocalizationProvider'; +const useStyles = makeStyles((theme) => ({ + details: { + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(2), + paddingBottom: theme.spacing(1), + paddingTop: theme.spacing(3), + }, +})); + const AddAttributeDialog = ({ open, onResult, definitions }) => { + const classes = useStyles(); const t = useTranslation(); const filter = createFilterOptions({ @@ -25,7 +36,7 @@ const AddAttributeDialog = ({ open, onResult, definitions }) => { return ( <Dialog open={open} fullWidth maxWidth="xs"> - <DialogContent> + <DialogContent className={classes.details}> <Autocomplete onChange={(_, option) => { setKey(option && typeof option === 'object' ? option.key : option); @@ -45,14 +56,17 @@ const AddAttributeDialog = ({ open, onResult, definitions }) => { }} options={options} getOptionLabel={(option) => (option && typeof option === 'object' ? option.name : option)} - renderOption={(option) => option.name} - freeSolo + renderOption={(props, option) => ( + <li {...props}> + {option.name} + </li> + )} renderInput={(params) => ( - <TextField {...params} label={t('sharedAttribute')} margin="normal" /> + <TextField {...params} label={t('sharedAttribute')} /> )} + freeSolo /> <FormControl - margin="normal" fullWidth disabled={key in definitions} > diff --git a/modern/src/settings/components/EditAttributesView.js b/modern/src/settings/components/EditAttributesView.js index 14577e71..6b7ab5ac 100644 --- a/modern/src/settings/components/EditAttributesView.js +++ b/modern/src/settings/components/EditAttributesView.js @@ -22,9 +22,6 @@ import { } from '../../common/util/converter'; const useStyles = makeStyles((theme) => ({ - addButton: { - marginTop: theme.spacing(2), - }, removeButton: { marginRight: theme.spacing(1.5), }, @@ -195,7 +192,6 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => { color="primary" onClick={() => setAddDialogShown(true)} startIcon={<AddIcon />} - className={classes.addButton} > {t('sharedAdd')} </Button> |