aboutsummaryrefslogtreecommitdiff
path: root/modern/src/main
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/main')
-rw-r--r--modern/src/main/DevicesList.js34
-rw-r--r--modern/src/main/MainPage.js38
-rw-r--r--modern/src/main/StatusCard.js62
3 files changed, 87 insertions, 47 deletions
diff --git a/modern/src/main/DevicesList.js b/modern/src/main/DevicesList.js
index b80eaf8b..06b75715 100644
--- a/modern/src/main/DevicesList.js
+++ b/modern/src/main/DevicesList.js
@@ -1,24 +1,24 @@
import React, { useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
-import { makeStyles } from '@material-ui/core/styles';
-import { IconButton, Tooltip } from '@material-ui/core';
-import Avatar from '@material-ui/core/Avatar';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemAvatar from '@material-ui/core/ListItemAvatar';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import ListItemText from '@material-ui/core/ListItemText';
+import makeStyles from '@mui/styles/makeStyles';
+import { IconButton, Tooltip } from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
+import ListItemText from '@mui/material/ListItemText';
import { FixedSizeList } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
-import BatteryFullIcon from '@material-ui/icons/BatteryFull';
-import BatteryChargingFullIcon from '@material-ui/icons/BatteryChargingFull';
-import Battery60Icon from '@material-ui/icons/Battery60';
-import BatteryCharging60Icon from '@material-ui/icons/BatteryCharging60';
-import Battery20Icon from '@material-ui/icons/Battery20';
-import BatteryCharging20Icon from '@material-ui/icons/BatteryCharging20';
-import FlashOnIcon from '@material-ui/icons/FlashOn';
-import FlashOffIcon from '@material-ui/icons/FlashOff';
-import ErrorIcon from '@material-ui/icons/Error';
+import BatteryFullIcon from '@mui/icons-material/BatteryFull';
+import BatteryChargingFullIcon from '@mui/icons-material/BatteryChargingFull';
+import Battery60Icon from '@mui/icons-material/Battery60';
+import BatteryCharging60Icon from '@mui/icons-material/BatteryCharging60';
+import Battery20Icon from '@mui/icons-material/Battery20';
+import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
+import FlashOnIcon from '@mui/icons-material/FlashOn';
+import FlashOffIcon from '@mui/icons-material/FlashOff';
+import ErrorIcon from '@mui/icons-material/Error';
import { devicesActions } from '../store';
import { useEffectAsync } from '../reactHelper';
diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index 346919e2..0b3be6d2 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -1,15 +1,17 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import {
- makeStyles, Paper, Toolbar, TextField, IconButton, Button,
-} from '@material-ui/core';
+ Paper, Toolbar, TextField, IconButton, Button,
+} from '@mui/material';
-import { useTheme } from '@material-ui/core/styles';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import AddIcon from '@material-ui/icons/Add';
-import CloseIcon from '@material-ui/icons/Close';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import ListIcon from '@material-ui/icons/ViewList';
+import makeStyles from '@mui/styles/makeStyles';
+
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import AddIcon from '@mui/icons-material/Add';
+import CloseIcon from '@mui/icons-material/Close';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ListIcon from '@mui/icons-material/ViewList';
import { useDispatch, useSelector } from 'react-redux';
import DevicesList from './DevicesList';
@@ -46,7 +48,7 @@ const useStyles = makeStyles((theme) => ({
bottom: theme.dimensions.bottomBarHeight,
transition: 'transform .5s ease',
backgroundColor: 'white',
- [theme.breakpoints.down('sm')]: {
+ [theme.breakpoints.down('md')]: {
width: '100%',
margin: 0,
},
@@ -54,7 +56,7 @@ const useStyles = makeStyles((theme) => ({
sidebarCollapsed: {
transform: `translateX(-${theme.dimensions.drawerWidthDesktop})`,
marginLeft: 0,
- [theme.breakpoints.down('sm')]: {
+ [theme.breakpoints.down('md')]: {
transform: 'translateX(-100vw)',
},
},
@@ -75,7 +77,7 @@ const useStyles = makeStyles((theme) => ({
left: `calc(50% + ${theme.dimensions.drawerWidthDesktop} / 2)`,
bottom: theme.spacing(3),
},
- [theme.breakpoints.down('sm')]: {
+ [theme.breakpoints.down('md')]: {
left: '50%',
bottom: theme.spacing(3) + theme.dimensions.bottomBarHeight,
},
@@ -87,7 +89,7 @@ const useStyles = makeStyles((theme) => ({
top: theme.spacing(3),
borderRadius: '0px',
minWidth: 0,
- [theme.breakpoints.down('sm')]: {
+ [theme.breakpoints.down('md')]: {
left: 0,
},
},
@@ -122,7 +124,7 @@ const MainPage = () => {
const deviceReadonly = useDeviceReadonly();
const desktop = useMediaQuery(theme.breakpoints.up('md'));
- const phone = useMediaQuery(theme.breakpoints.down('xs'));
+ const phone = useMediaQuery(theme.breakpoints.down('sm'));
const [mapLiveRoutes] = usePersistedState('mapLiveRoutes', false);
@@ -165,7 +167,7 @@ const MainPage = () => {
<Paper square elevation={3}>
<Toolbar className={classes.toolbar} disableGutters>
{!desktop && (
- <IconButton onClick={handleClose}>
+ <IconButton size="large" onClick={handleClose}>
<ArrowBackIcon />
</IconButton>
)}
@@ -178,11 +180,15 @@ const MainPage = () => {
placeholder={t('sharedSearchDevices')}
variant="filled"
/>
- <IconButton onClick={() => navigate('/settings/device')} disabled={deviceReadonly}>
+ <IconButton
+ size="large"
+ onClick={() => navigate('/settings/device')}
+ disabled={deviceReadonly}
+ >
<AddIcon />
</IconButton>
{desktop && (
- <IconButton onClick={handleClose}>
+ <IconButton size="large" onClick={handleClose}>
<CloseIcon />
</IconButton>
)}
diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js
index 92db8047..37e4a1d1 100644
--- a/modern/src/main/StatusCard.js
+++ b/modern/src/main/StatusCard.js
@@ -2,14 +2,26 @@ import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import {
- makeStyles, Card, CardContent, Typography, CardActions, CardHeader, IconButton, Avatar, Table, TableBody, TableRow, TableCell, TableContainer,
-} from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
-import PostAddIcon from '@material-ui/icons/PostAdd';
-import ReplayIcon from '@material-ui/icons/Replay';
-import PublishIcon from '@material-ui/icons/Publish';
-import EditIcon from '@material-ui/icons/Edit';
-import DeleteIcon from '@material-ui/icons/Delete';
+ Card,
+ CardContent,
+ Typography,
+ CardActions,
+ CardHeader,
+ IconButton,
+ Avatar,
+ Table,
+ TableBody,
+ TableRow,
+ TableCell,
+ TableContainer,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import CloseIcon from '@mui/icons-material/Close';
+import PostAddIcon from '@mui/icons-material/PostAdd';
+import ReplayIcon from '@mui/icons-material/Replay';
+import PublishIcon from '@mui/icons-material/Publish';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
import { useTranslation } from '../common/components/LocalizationProvider';
import { formatStatus } from '../common/util/formatter';
@@ -103,7 +115,7 @@ const StatusCard = ({ deviceId, onClose }) => {
</Avatar>
)}
action={(
- <IconButton onClick={onClose}>
+ <IconButton size="large" onClick={onClose}>
<CloseIcon />
</IconButton>
)}
@@ -134,19 +146,41 @@ const StatusCard = ({ deviceId, onClose }) => {
</CardContent>
)}
<CardActions classes={{ root: classes.actions }} disableSpacing>
- <IconButton onClick={() => navigate(`/position/${position.id}`)} disabled={!position} color="secondary">
+ <IconButton
+ color="secondary"
+ size="large"
+ onClick={() => navigate(`/position/${position.id}`)}
+ disabled={!position}
+ >
<PostAddIcon />
</IconButton>
- <IconButton onClick={() => navigate('/replay')} disabled={!position}>
+ <IconButton
+ size="large"
+ onClick={() => navigate('/replay')}
+ disabled={!position}
+ >
<ReplayIcon />
</IconButton>
- <IconButton onClick={() => navigate(`/settings/command-send/${deviceId}`)} disabled={readonly}>
+ <IconButton
+ size="large"
+ onClick={() => navigate(`/settings/command-send/${deviceId}`)}
+ disabled={readonly}
+ >
<PublishIcon />
</IconButton>
- <IconButton onClick={() => navigate(`/settings/device/${deviceId}`)} disabled={deviceReadonly}>
+ <IconButton
+ size="large"
+ onClick={() => navigate(`/settings/device/${deviceId}`)}
+ disabled={deviceReadonly}
+ >
<EditIcon />
</IconButton>
- <IconButton onClick={() => setRemoving(true)} disabled={deviceReadonly} className={classes.negative}>
+ <IconButton
+ size="large"
+ onClick={() => setRemoving(true)}
+ disabled={deviceReadonly}
+ className={classes.negative}
+ >
<DeleteIcon />
</IconButton>
</CardActions>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 19:05:40 +0000