Skip to content

Commit

Permalink
Unify settings styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@tananaev
tananaev committed Feb 24, 2024
1 parent 460cd9a commit 89a40e4
Show file tree
Hide file tree
Showing 21 changed files with 63 additions and 306 deletions.
25 changes: 2 additions & 23 deletions modern/src/settings/AccumulatorsPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,39 +10,18 @@ import {
TextField,
Button,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { useTranslation } from '../common/components/LocalizationProvider';
import PageLayout from '../common/components/PageLayout';
import SettingsMenu from './components/SettingsMenu';
import { useCatch } from '../reactHelper';
import { useAttributePreference } from '../common/util/preferences';
import { distanceFromMeters, distanceToMeters, distanceUnitString } from '../common/util/converter';

const useStyles = makeStyles((theme) => ({
container: {
marginTop: theme.spacing(2),
},
buttons: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
display: 'flex',
justifyContent: 'space-evenly',
'& > *': {
flexBasis: '33%',
},
},
details: {
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
paddingBottom: theme.spacing(3),
},
}));
import useSettingsStyles from './common/useSettingsStyles';

const AccumulatorsPage = () => {
const navigate = useNavigate();
const classes = useStyles();
const classes = useSettingsStyles();
const t = useTranslation();

const distanceUnit = useAttributePreference('distanceUnit');
Expand Down
13 changes: 2 additions & 11 deletions modern/src/settings/CalendarPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import TextField from '@mui/material/TextField';
import {
Accordion, AccordionSummary, AccordionDetails, Typography, FormControl, InputLabel, Select, MenuItem,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { DropzoneArea } from 'react-mui-dropzone';
import EditItemView from './components/EditItemView';
Expand All @@ -15,6 +14,7 @@ import SettingsMenu from './components/SettingsMenu';
import { prefixString } from '../common/util/stringUtils';
import { calendarsActions } from '../store';
import { useCatch } from '../reactHelper';
import useSettingsStyles from './common/useSettingsStyles';

const formatCalendarTime = (time) => {
const tzid = Intl.DateTimeFormat().resolvedOptions().timeZone;
Expand Down Expand Up @@ -61,17 +61,8 @@ const simpleCalendar = () => window.btoa([
'END:VCALENDAR',
].join('\n'));

const useStyles = makeStyles((theme) => ({
details: {
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
paddingBottom: theme.spacing(3),
},
}));

const CalendarPage = () => {
const classes = useStyles();
const classes = useSettingsStyles();
const dispatch = useDispatch();
const t = useTranslation();

Expand Down
25 changes: 2 additions & 23 deletions modern/src/settings/CommandDevicePage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
Container,
Button,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { useTranslation } from '../common/components/LocalizationProvider';
import BaseCommandView from './components/BaseCommandView';
Expand All @@ -17,31 +16,11 @@ import PageLayout from '../common/components/PageLayout';
import SettingsMenu from './components/SettingsMenu';
import { useCatch } from '../reactHelper';
import { useRestriction } from '../common/util/permissions';

const useStyles = makeStyles((theme) => ({
container: {
marginTop: theme.spacing(2),
},
buttons: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
display: 'flex',
justifyContent: 'space-evenly',
'& > *': {
flexBasis: '33%',
},
},
details: {
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
paddingBottom: theme.spacing(3),
},
}));
import useSettingsStyles from './common/useSettingsStyles';

const CommandDevicePage = () => {
const navigate = useNavigate();
const classes = useStyles();
const classes = useSettingsStyles();
const t = useTranslation();

const { id } = useParams();
Expand Down
25 changes: 2 additions & 23 deletions modern/src/settings/CommandGroupPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,37 +16,16 @@ import {
Checkbox,
TextField,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { useTranslation } from '../common/components/LocalizationProvider';
import PageLayout from '../common/components/PageLayout';
import SettingsMenu from './components/SettingsMenu';
import { useCatch } from '../reactHelper';

const useStyles = makeStyles((theme) => ({
container: {
marginTop: theme.spacing(2),
},
buttons: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
display: 'flex',
justifyContent: 'space-evenly',
'& > *': {
flexBasis: '33%',
},
},
details: {
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
paddingBottom: theme.spacing(3),
},
}));
import useSettingsStyles from './common/useSettingsStyles';

const CommandDevicePage = () => {
const navigate = useNavigate();
const classes = useStyles();
const classes = useSettingsStyles();
const t = useTranslation();

const { id } = useParams();
Expand Down
13 changes: 2 additions & 11 deletions modern/src/settings/CommandPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,15 @@ import React, { useState } from 'react';
import {
Accordion, AccordionSummary, AccordionDetails, Typography, TextField,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import EditItemView from './components/EditItemView';
import { useTranslation } from '../common/components/LocalizationProvider';
import BaseCommandView from './components/BaseCommandView';
import SettingsMenu from './components/SettingsMenu';

const useStyles = makeStyles((theme) => ({
details: {
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
paddingBottom: theme.spacing(3),
},
}));
import useSettingsStyles from './common/useSettingsStyles';

const CommandPage = () => {
const classes = useStyles();
const classes = useSettingsStyles();
const t = useTranslation();

const [item, setItem] = useState();
Expand Down
13 changes: 2 additions & 11 deletions modern/src/settings/ComputedAttributePage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
Button,
Snackbar,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import EditItemView from './components/EditItemView';
import { useTranslation } from '../common/components/LocalizationProvider';
Expand All @@ -23,20 +22,12 @@ import SettingsMenu from './components/SettingsMenu';
import SelectField from '../common/components/SelectField';
import { useCatch } from '../reactHelper';
import { snackBarDurationLongMs } from '../common/util/duration';
import useSettingsStyles from './common/useSettingsStyles';

const allowedProperties = ['valid', 'latitude', 'longitude', 'altitude', 'speed', 'course', 'address', 'accuracy'];

const useStyles = makeStyles((theme) => ({
details: {
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
paddingBottom: theme.spacing(3),
},
}));

const ComputedAttributePage = () => {
const classes = useStyles();
const classes = useSettingsStyles();
const t = useTranslation();

const positionAttributes = usePositionAttributes(t);
Expand Down
16 changes: 2 additions & 14 deletions modern/src/settings/DeviceConnectionsPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,17 @@ import {
Typography,
Container,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import LinkField from '../common/components/LinkField';
import { useTranslation } from '../common/components/LocalizationProvider';
import SettingsMenu from './components/SettingsMenu';
import { formatNotificationTitle } from '../common/util/formatter';
import PageLayout from '../common/components/PageLayout';
import useFeatures from '../common/util/useFeatures';

const useStyles = makeStyles((theme) => ({
container: {
marginTop: theme.spacing(2),
},
details: {
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
paddingBottom: theme.spacing(3),
},
}));
import useSettingsStyles from './common/useSettingsStyles';

const DeviceConnectionsPage = () => {
const classes = useStyles();
const classes = useSettingsStyles();
const t = useTranslation();

const { id } = useParams();
Expand Down
13 changes: 2 additions & 11 deletions modern/src/settings/DevicePage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
Checkbox,
TextField,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { DropzoneArea } from 'react-mui-dropzone';
import EditItemView from './components/EditItemView';
Expand All @@ -23,18 +22,10 @@ import SettingsMenu from './components/SettingsMenu';
import useCommonDeviceAttributes from '../common/attributes/useCommonDeviceAttributes';
import { useCatch } from '../reactHelper';
import useQuery from '../common/util/useQuery';

const useStyles = makeStyles((theme) => ({
details: {
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
paddingBottom: theme.spacing(3),
},
}));
import useSettingsStyles from './common/useSettingsStyles';

const DevicePage = () => {
const classes = useStyles();
const classes = useSettingsStyles();
const t = useTranslation();

const admin = useAdministrator();
Expand Down
13 changes: 2 additions & 11 deletions modern/src/settings/DriverPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,15 @@ import TextField from '@mui/material/TextField';
import {
Accordion, AccordionSummary, AccordionDetails, Typography,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import EditItemView from './components/EditItemView';
import EditAttributesAccordion from './components/EditAttributesAccordion';
import { useTranslation } from '../common/components/LocalizationProvider';
import SettingsMenu from './components/SettingsMenu';

const useStyles = makeStyles((theme) => ({
details: {
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
paddingBottom: theme.spacing(3),
},
}));
import useSettingsStyles from './common/useSettingsStyles';

const DriverPage = () => {
const classes = useStyles();
const classes = useSettingsStyles();
const t = useTranslation();

const [item, setItem] = useState();
Expand Down
13 changes: 2 additions & 11 deletions modern/src/settings/GeofencePage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useDispatch } from 'react-redux';
import {
Accordion, AccordionSummary, AccordionDetails, Typography, TextField,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import EditItemView from './components/EditItemView';
import EditAttributesAccordion from './components/EditAttributesAccordion';
Expand All @@ -12,18 +11,10 @@ import useGeofenceAttributes from '../common/attributes/useGeofenceAttributes';
import SettingsMenu from './components/SettingsMenu';
import SelectField from '../common/components/SelectField';
import { geofencesActions } from '../store';

const useStyles = makeStyles((theme) => ({
details: {
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
paddingBottom: theme.spacing(3),
},
}));
import useSettingsStyles from './common/useSettingsStyles';

const GeofencePage = () => {
const classes = useStyles();
const classes = useSettingsStyles();
const dispatch = useDispatch();
const t = useTranslation();

Expand Down
16 changes: 2 additions & 14 deletions modern/src/settings/GroupConnectionsPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,17 @@ import {
Typography,
Container,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import LinkField from '../common/components/LinkField';
import { useTranslation } from '../common/components/LocalizationProvider';
import SettingsMenu from './components/SettingsMenu';
import { formatNotificationTitle } from '../common/util/formatter';
import PageLayout from '../common/components/PageLayout';
import useFeatures from '../common/util/useFeatures';

const useStyles = makeStyles((theme) => ({
container: {
marginTop: theme.spacing(2),
},
details: {
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
paddingBottom: theme.spacing(3),
},
}));
import useSettingsStyles from './common/useSettingsStyles';

const GroupConnectionsPage = () => {
const classes = useStyles();
const classes = useSettingsStyles();
const t = useTranslation();

const { id } = useParams();
Expand Down
13 changes: 2 additions & 11 deletions modern/src/settings/GroupPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import TextField from '@mui/material/TextField';
import {
Accordion, AccordionSummary, AccordionDetails, Typography,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import EditItemView from './components/EditItemView';
import EditAttributesAccordion from './components/EditAttributesAccordion';
Expand All @@ -16,18 +15,10 @@ import useCommonDeviceAttributes from '../common/attributes/useCommonDeviceAttri
import useGroupAttributes from '../common/attributes/useGroupAttributes';
import { useCatch } from '../reactHelper';
import { groupsActions } from '../store';

const useStyles = makeStyles((theme) => ({
details: {
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
paddingBottom: theme.spacing(3),
},
}));
import useSettingsStyles from './common/useSettingsStyles';

const GroupPage = () => {
const classes = useStyles();
const classes = useSettingsStyles();
const dispatch = useDispatch();
const t = useTranslation();

Expand Down
Loading

0 comments on commit 89a40e4

Please sign in to comment.