diff options
| -rw-r--r-- | modern/src/DevicesList.js | 14 | ||||
| -rw-r--r-- | modern/src/MainPage.js | 31 |
2 files changed, 27 insertions, 18 deletions
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js index 6f0b7639..b06f7f76 100644 --- a/modern/src/DevicesList.js +++ b/modern/src/DevicesList.js @@ -28,6 +28,12 @@ const useStyles = makeStyles((theme) => ({ height: '25px', filter: 'brightness(0) invert(1)', }, + listItem: { + backgroundColor: 'white', + '&:hover': { + backgroundColor: 'white', + }, + }, batteryText: { fontSize: '0.75rem', fontWeight: 'normal', @@ -44,7 +50,7 @@ const useStyles = makeStyles((theme) => ({ }, })); -const getOnlineStatus = (status) => { +const getStatusColor = (status) => { switch (status) { case 'online': return 'green'; @@ -77,13 +83,13 @@ const DeviceRow = ({ data, index, style }) => { return ( <div style={style}> <Fragment key={index}> - <ListItem button key={item.id} onClick={() => dispatch(devicesActions.select(item))}> + <ListItem button key={item.id} className={classes.listItem} onClick={() => dispatch(devicesActions.select(item))}> <ListItemAvatar> <Avatar> <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} alt="" /> </Avatar> </ListItemAvatar> - <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getOnlineStatus(item.status)] }} /> + <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getStatusColor(item.status)] }} /> <ListItemSecondaryAction> {position && ( <Grid container direction="row" alignItems="center" alignContent="center" spacing={1}> @@ -145,7 +151,7 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => { }; const DevicesList = () => ( - <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" /> + <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" disableAdd /> ); export default DevicesList; diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index e41cc338..d5447e55 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -65,6 +65,10 @@ const useStyles = makeStyles((theme) => ({ }, deviceList: { height: '100%', + backgroundColor: 'transparent', + [theme.breakpoints.down('md')]: { + backgroundColor: 'white', + }, }, collapsed: { transform: `translateX(-${360 + 16}px)`, @@ -112,8 +116,6 @@ const useStyles = makeStyles((theme) => ({ menuButton: { display: 'flex', flexDirection: 'column', - }, - iconText: { fontSize: '0.75rem', fontWeight: 'normal', color: '#222222', @@ -128,7 +130,8 @@ const MainPage = () => { const [deviceName, setDeviceName] = useState(); const [collapsed, setCollapsed] = useState(false); - const matchesMD = useMediaQuery(theme.breakpoints.down('md')); + const isTablet = useMediaQuery(theme.breakpoints.down('md')); + const isPhone = useMediaQuery(theme.breakpoints.down('xs')); const handleClose = () => { setCollapsed(!collapsed); @@ -148,23 +151,23 @@ const MainPage = () => { && ( <Button variant="contained" - color={matchesMD ? 'secondary' : 'primary'} + color={isPhone ? 'secondary' : 'primary'} classes={{ containedPrimary: classes.deviceButtonBackground }} className={classes.deviceButton} onClick={handleClose} startIcon={<ListIcon />} disableElevation > - {!matchesMD ? t('deviceTitle') : ''} + {!isPhone ? t('deviceTitle') : ''} </Button> )} <div className={`${classes.listContainer} ${collapsed ? classes.collapsed : classes.uncollapsed}`}> - <Grid container direction="column" spacing={matchesMD ? 0 : 2} style={{ height: '100%' }}> + <Grid container direction="column" spacing={isTablet ? 0 : 2} style={{ height: '100%' }}> <Grid item> <Paper className={classes.paper}> <Toolbar className={classes.toolbar} disableGutters> <Grid container direction="row" alignItems="center" spacing={2}> - {matchesMD && ( + {isTablet && ( <Grid item> <IconButton onClick={handleClose}> <ArrowBackIcon /> @@ -188,7 +191,7 @@ const MainPage = () => { <AddIcon /> </IconButton> </Grid> - {!matchesMD && ( + {!isTablet && ( <Grid item> <IconButton onClick={handleClose}> <CloseIcon /> @@ -200,9 +203,9 @@ const MainPage = () => { </Paper> </Grid> <Grid item xs> - <Paper className={`${classes.deviceList} ${classes.paper}`}> + <div className={classes.deviceList}> <DevicesList /> - </Paper> + </div> </Grid> </Grid> </div> @@ -213,25 +216,25 @@ const MainPage = () => { <Grid item> <IconButton classes={{ label: classes.menuButton }}> <ReplayIcon /> - <span className={classes.iconText}>{t('reportReplay')}</span> + {t('reportReplay')} </IconButton> </Grid> <Grid item> <IconButton classes={{ label: classes.menuButton }}> <DescriptionIcon /> - <span className={classes.iconText}>{t('reportTitle')}</span> + {t('reportTitle')} </IconButton> </Grid> <Grid item> <IconButton classes={{ label: classes.menuButton }}> <ShuffleIcon /> - <span className={classes.iconText}>Options</span> + Options </IconButton> </Grid> <Grid item> <IconButton classes={{ label: classes.menuButton }}> <PersonIcon /> - <span className={classes.iconText}>{t('settingsUser')}</span> + {t('settingsUser')} </IconButton> </Grid> </Grid> |