From 85461684eb402d4df62c8b59e0a0f627bd3487c1 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Mon, 23 May 2022 07:19:30 -0700 Subject: Initial migration to MUI 5 --- modern/src/main/DevicesList.js | 34 +++++++++++------------ modern/src/main/MainPage.js | 38 +++++++++++++++----------- modern/src/main/StatusCard.js | 62 ++++++++++++++++++++++++++++++++---------- 3 files changed, 87 insertions(+), 47 deletions(-) (limited to 'modern/src/main') 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 = () => { {!desktop && ( - + )} @@ -178,11 +180,15 @@ const MainPage = () => { placeholder={t('sharedSearchDevices')} variant="filled" /> - navigate('/settings/device')} disabled={deviceReadonly}> + navigate('/settings/device')} + disabled={deviceReadonly} + > {desktop && ( - + )} 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 }) => { )} action={( - + )} @@ -134,19 +146,41 @@ const StatusCard = ({ deviceId, onClose }) => { )} - navigate(`/position/${position.id}`)} disabled={!position} color="secondary"> + navigate(`/position/${position.id}`)} + disabled={!position} + > - navigate('/replay')} disabled={!position}> + navigate('/replay')} + disabled={!position} + > - navigate(`/settings/command-send/${deviceId}`)} disabled={readonly}> + navigate(`/settings/command-send/${deviceId}`)} + disabled={readonly} + > - navigate(`/settings/device/${deviceId}`)} disabled={deviceReadonly}> + navigate(`/settings/device/${deviceId}`)} + disabled={deviceReadonly} + > - setRemoving(true)} disabled={deviceReadonly} className={classes.negative}> + setRemoving(true)} + disabled={deviceReadonly} + className={classes.negative} + > -- cgit v1.2.3