From d5a11fa77ad6a4ebda229b92f3666419c67cf516 Mon Sep 17 00:00:00 2001 From: Desmond Kyeremeh Date: Fri, 23 Jul 2021 11:31:17 +0000 Subject: Bottom nav styling --- modern/src/components/BottomNav.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'modern') diff --git a/modern/src/components/BottomNav.js b/modern/src/components/BottomNav.js index 6aad1dd..c47f0f6 100644 --- a/modern/src/components/BottomNav.js +++ b/modern/src/components/BottomNav.js @@ -27,9 +27,6 @@ const useStyles = makeStyles((theme) => ({ width: theme.dimensions.drawerWidthDesktop, }, }, - paper: { - borderRadius: '0px', - }, toolbar: { padding: theme.spacing(0, 2), display: 'flex', @@ -71,7 +68,7 @@ const BottomNav = ({ showOnDesktop }) => { return (
- + {isDesktop ? ( -- cgit v1.2.3 From e66bb788f569fc3123e22372e871759d4d420c52 Mon Sep 17 00:00:00 2001 From: Desmond Kyeremeh Date: Fri, 23 Jul 2021 13:51:48 +0000 Subject: moved stuff to selectors --- modern/src/common/selectors.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'modern') diff --git a/modern/src/common/selectors.js b/modern/src/common/selectors.js index 44a0c54..ddf9dbe 100644 --- a/modern/src/common/selectors.js +++ b/modern/src/common/selectors.js @@ -1,3 +1,7 @@ export const getIsAdmin = (state) => state.session.user?.administrator; export const getUserId = (state) => state.session.user?.id; + +export const getDevices = (state) => Object.values(state.devices.items); + +export const getItemPosition = (itemId) => (state) => state.positions.items[itemId]; -- cgit v1.2.3 From d9bd2a941c4a11c660e52db504587ba735a29add Mon Sep 17 00:00:00 2001 From: Desmond Kyeremeh Date: Fri, 23 Jul 2021 13:52:48 +0000 Subject: Fixed homepage issues --- modern/src/DevicesList.js | 76 ++++++++++++++++++++++++++--------------------- modern/src/MainPage.js | 22 ++++++++------ 2 files changed, 55 insertions(+), 43 deletions(-) (limited to 'modern') diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js index 294a9ff..79b6298 100644 --- a/modern/src/DevicesList.js +++ b/modern/src/DevicesList.js @@ -1,8 +1,7 @@ -import React, { Fragment } from 'react'; +import React, { useRef } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { makeStyles } from '@material-ui/core/styles'; import Avatar from '@material-ui/core/Avatar'; -import Divider from '@material-ui/core/Divider'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemAvatar from '@material-ui/core/ListItemAvatar'; @@ -19,11 +18,16 @@ import { devicesActions } from './store'; import EditCollectionView from './EditCollectionView'; import { useEffectAsync } from './reactHelper'; import { formatPosition } from './common/formatter'; +import { getDevices, getItemPosition } from './common/selectors'; const useStyles = makeStyles((theme) => ({ list: { maxHeight: '100%', }, + listInner: { + position: 'relative', + margin: theme.spacing(1.5, 0), + }, icon: { width: '25px', height: '25px', @@ -82,43 +86,40 @@ const DeviceRow = ({ data, index, style }) => { const { items } = data; const item = items[index]; - const position = useSelector((state) => state.positions.items[item.id]); + const position = useSelector(getItemPosition(item.id)); const showIgnition = position?.attributes.hasOwnProperty('ignition') && position.attributes.ignition; return (
- - dispatch(devicesActions.select(item))}> - - - - - - - - {position && ( - - {showIgnition && ( - - - - )} - {position.attributes.hasOwnProperty('batteryLevel') && ( - - - {formatPosition(position.attributes.batteryLevel, 'batteryLevel')} - - - - - - )} + dispatch(devicesActions.select(item))}> + + + + + + + + {position && ( + + {showIgnition && ( + + + + )} + {position.attributes.hasOwnProperty('batteryLevel') && ( + + + {formatPosition(position.attributes.batteryLevel, 'batteryLevel')} + + + + )} - - - {index < items.length - 1 ? : null} - + + )} + +
); }; @@ -126,8 +127,13 @@ const DeviceRow = ({ data, index, style }) => { const DeviceView = ({ updateTimestamp, onMenuClick }) => { const classes = useStyles(); const dispatch = useDispatch(); + const listInnerEl = useRef(null); - const items = useSelector((state) => Object.values(state.devices.items)); + const items = useSelector(getDevices); + + if (listInnerEl.current) { + listInnerEl.current.className = classes.listInner; + } useEffectAsync(async () => { const response = await fetch('/api/devices'); @@ -146,6 +152,8 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => { itemCount={items.length} itemData={{ items, onMenuClick }} itemSize={72 + 1} + overscanCount={10} + innerRef={listInnerEl} > {DeviceRow} diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index 417cdb0..e070740 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -36,10 +36,10 @@ const useStyles = makeStyles((theme) => ({ bottom: theme.spacing(8), zIndex: 1301, transition: 'transform .5s ease', + backgroundColor: 'white', [theme.breakpoints.down('md')]: { width: '100%', margin: 0, - backgroundColor: 'white', }, }, sidebarCollapsed: { @@ -50,7 +50,7 @@ const useStyles = makeStyles((theme) => ({ }, }, paper: { - borderRadius: '0px', + zIndex: 1, }, toolbar: { display: 'flex', @@ -61,8 +61,6 @@ const useStyles = makeStyles((theme) => ({ }, deviceList: { flex: 1, - overflow: 'auto', - padding: theme.spacing(1.5, 0), }, sidebarToggle: { position: 'absolute', @@ -71,7 +69,13 @@ const useStyles = makeStyles((theme) => ({ borderRadius: '0px', minWidth: 0, [theme.breakpoints.down('md')]: { - left: theme.spacing(0), + left: 0, + }, + }, + sidebarToggleText: { + marginLeft: theme.spacing(1), + [theme.breakpoints.only('xs')]: { + display: 'none', }, }, sidebarToggleBg: { @@ -121,10 +125,10 @@ const MainPage = () => { disableElevation > - {!isPhone ? t('deviceTitle') : ''} +
{t('deviceTitle')}
-
- + + {isTablet && ( @@ -154,7 +158,7 @@ const MainPage = () => {
-
+
-- cgit v1.2.3 From 8c266947493ad1b3d8f90223a4b6ee90387f0c18 Mon Sep 17 00:00:00 2001 From: Desmond Kyeremeh Date: Fri, 23 Jul 2021 13:58:07 +0000 Subject: quick fix --- modern/src/DevicesList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'modern') diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js index 79b6298..07eeac3 100644 --- a/modern/src/DevicesList.js +++ b/modern/src/DevicesList.js @@ -151,7 +151,7 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => { height={height} itemCount={items.length} itemData={{ items, onMenuClick }} - itemSize={72 + 1} + itemSize={72} overscanCount={10} innerRef={listInnerEl} > -- cgit v1.2.3 From 8f26d3171d8d0bccfbd00893498a6ed9db45adb2 Mon Sep 17 00:00:00 2001 From: Desmond Kyeremeh Date: Mon, 26 Jul 2021 11:59:59 +0000 Subject: renamed selector getItemPosition to getPosition --- modern/src/DevicesList.js | 4 ++-- modern/src/common/selectors.js | 2 +- modern/src/map/StatusView.js | 3 ++- 3 files changed, 5 insertions(+), 4 deletions(-) (limited to 'modern') diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js index 07eeac3..cbf3a0a 100644 --- a/modern/src/DevicesList.js +++ b/modern/src/DevicesList.js @@ -18,7 +18,7 @@ import { devicesActions } from './store'; import EditCollectionView from './EditCollectionView'; import { useEffectAsync } from './reactHelper'; import { formatPosition } from './common/formatter'; -import { getDevices, getItemPosition } from './common/selectors'; +import { getDevices, getPosition } from './common/selectors'; const useStyles = makeStyles((theme) => ({ list: { @@ -86,7 +86,7 @@ const DeviceRow = ({ data, index, style }) => { const { items } = data; const item = items[index]; - const position = useSelector(getItemPosition(item.id)); + const position = useSelector(getPosition(item.id)); const showIgnition = position?.attributes.hasOwnProperty('ignition') && position.attributes.ignition; return ( diff --git a/modern/src/common/selectors.js b/modern/src/common/selectors.js index ddf9dbe..0c4c02e 100644 --- a/modern/src/common/selectors.js +++ b/modern/src/common/selectors.js @@ -4,4 +4,4 @@ export const getUserId = (state) => state.session.user?.id; export const getDevices = (state) => Object.values(state.devices.items); -export const getItemPosition = (itemId) => (state) => state.positions.items[itemId]; +export const getPosition = (id) => (state) => state.positions.items[id]; diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js index 20e5b74..c0f723d 100644 --- a/modern/src/map/StatusView.js +++ b/modern/src/map/StatusView.js @@ -2,10 +2,11 @@ import React from 'react'; import { useSelector } from 'react-redux'; import t from '../common/localization'; import { formatPosition } from '../common/formatter'; +import { getPosition } from '../common/selectors'; const StatusView = ({ deviceId, onShowDetails }) => { const device = useSelector((state) => state.devices.items[deviceId]); - const position = useSelector((state) => state.positions.items[deviceId]); + const position = useSelector(getPosition(deviceId)); const handleClick = (e) => { e.preventDefault(); -- cgit v1.2.3