aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
authorJamie Guthrie <jamie.guthrie@gmail.com>2023-08-16 18:58:52 +0200
committerJamie Guthrie <jamie.guthrie@gmail.com>2023-08-16 18:58:52 +0200
commit62ae7d516525bba2c2d053832ece7d613be86dc9 (patch)
tree0981f89ddc1386e1021a77b2e933e176423fe995 /modern/src
parent348b8ea777ed7695f50db430fbff6a1c59938c54 (diff)
downloadtrackermap-web-62ae7d516525bba2c2d053832ece7d613be86dc9.tar.gz
trackermap-web-62ae7d516525bba2c2d053832ece7d613be86dc9.tar.bz2
trackermap-web-62ae7d516525bba2c2d053832ece7d613be86dc9.zip
Add tooltips
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/other/GeofencesList.js4
-rw-r--r--modern/src/other/GeofencesPage.js5
-rw-r--r--modern/src/resources/l10n/en.json3
-rw-r--r--modern/src/settings/CalendarsPage.js2
-rw-r--r--modern/src/settings/CommandsPage.js2
-rw-r--r--modern/src/settings/ComputedAttributesPage.js2
-rw-r--r--modern/src/settings/DevicesPage.js2
-rw-r--r--modern/src/settings/DriversPage.js2
-rw-r--r--modern/src/settings/GroupsPage.js7
-rw-r--r--modern/src/settings/MaintenancesPage.js2
-rw-r--r--modern/src/settings/NotificationsPage.js2
-rw-r--r--modern/src/settings/UsersPage.js3
-rw-r--r--modern/src/settings/components/CollectionActions.js27
13 files changed, 45 insertions, 18 deletions
diff --git a/modern/src/other/GeofencesList.js b/modern/src/other/GeofencesList.js
index d26eff09..a7858ce5 100644
--- a/modern/src/other/GeofencesList.js
+++ b/modern/src/other/GeofencesList.js
@@ -8,6 +8,7 @@ import {
import { geofencesActions } from '../store';
import CollectionActions from '../settings/components/CollectionActions';
import { useCatchCallback } from '../reactHelper';
+import { useTranslation } from '../common/components/LocalizationProvider';
const useStyles = makeStyles(() => ({
list: {
@@ -24,6 +25,7 @@ const useStyles = makeStyles(() => ({
const GeofencesList = ({ onGeofenceSelected }) => {
const classes = useStyles();
const dispatch = useDispatch();
+ const t = useTranslation();
const items = useSelector((state) => state.geofences.items);
@@ -42,7 +44,7 @@ const GeofencesList = ({ onGeofenceSelected }) => {
<Fragment key={item.id}>
<ListItemButton key={item.id} onClick={() => onGeofenceSelected(item.id)}>
<ListItemText primary={item.name} />
- <CollectionActions itemId={item.id} editPath="/settings/geofence" endpoint="geofences" setTimestamp={refreshGeofences} />
+ <CollectionActions itemId={item.id} editPath="/settings/geofence" endpoint="geofences" collectionTitle={t('sharedGeofence')} setTimestamp={refreshGeofences} />
</ListItemButton>
{index < list.length - 1 ? <Divider /> : null}
</Fragment>
diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js
index 6ce7ae8e..cbbf3d40 100644
--- a/modern/src/other/GeofencesPage.js
+++ b/modern/src/other/GeofencesPage.js
@@ -3,6 +3,7 @@ import { useDispatch } from 'react-redux';
import {
Divider, Typography, IconButton, useMediaQuery, Toolbar,
} from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
import makeStyles from '@mui/styles/makeStyles';
import { useTheme } from '@mui/material/styles';
import Drawer from '@mui/material/Drawer';
@@ -117,7 +118,9 @@ const GeofencesPage = () => {
<label htmlFor="upload-gpx">
<input accept=".gpx" id="upload-gpx" type="file" className={classes.fileInput} onChange={handleFile} />
<IconButton edge="end" component="span" onClick={() => {}}>
- <UploadFileIcon />
+ <Tooltip title={t('sharedUploadGeofence')} enterDelay={500} enterNextDelay={500}>
+ <UploadFileIcon />
+ </Tooltip>
</IconButton>
</label>
</Toolbar>
diff --git a/modern/src/resources/l10n/en.json b/modern/src/resources/l10n/en.json
index d30cad7e..384e31e3 100644
--- a/modern/src/resources/l10n/en.json
+++ b/modern/src/resources/l10n/en.json
@@ -8,6 +8,8 @@
"sharedEdit": "Edit",
"sharedRemove": "Remove",
"sharedRemoveConfirm": "Remove item?",
+ "sharedPublish": "Publish",
+ "sharedLink": "Link",
"sharedNoData": "No data",
"sharedYes": "Yes",
"sharedNo": "No",
@@ -35,6 +37,7 @@
"sharedGeofence": "Geofence",
"sharedGeofences": "Geofences",
"sharedCreateGeofence": "Create Geofence",
+ "sharedUploadGeofence": "Upload Geofence",
"sharedNotifications": "Notifications",
"sharedNotification": "Notification",
"sharedAttributes": "Attributes",
diff --git a/modern/src/settings/CalendarsPage.js b/modern/src/settings/CalendarsPage.js
index de27a451..e0b957e4 100644
--- a/modern/src/settings/CalendarsPage.js
+++ b/modern/src/settings/CalendarsPage.js
@@ -50,7 +50,7 @@ const CalendarsPage = () => {
<TableRow key={item.id}>
<TableCell>{item.name}</TableCell>
<TableCell className={classes.columnAction} padding="none">
- <CollectionActions itemId={item.id} editPath="/settings/calendar" endpoint="calendars" setTimestamp={setTimestamp} />
+ <CollectionActions itemId={item.id} editPath="/settings/calendar" endpoint="calendars" collectionTitle={t('sharedCalendar')} setTimestamp={setTimestamp} />
</TableCell>
</TableRow>
)) : (<TableShimmer columns={2} endAction />)}
diff --git a/modern/src/settings/CommandsPage.js b/modern/src/settings/CommandsPage.js
index 1b893831..7a330874 100644
--- a/modern/src/settings/CommandsPage.js
+++ b/modern/src/settings/CommandsPage.js
@@ -59,7 +59,7 @@ const CommandsPage = () => {
<TableCell>{formatBoolean(item.textChannel, t)}</TableCell>
{!limitCommands && (
<TableCell className={classes.columnAction} padding="none">
- <CollectionActions itemId={item.id} editPath="/settings/command" endpoint="commands" setTimestamp={setTimestamp} />
+ <CollectionActions itemId={item.id} editPath="/settings/command" endpoint="commands" collectionTitle={t('sharedSavedCommand')} setTimestamp={setTimestamp} />
</TableCell>
)}
</TableRow>
diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js
index 6d098547..d252bc4d 100644
--- a/modern/src/settings/ComputedAttributesPage.js
+++ b/modern/src/settings/ComputedAttributesPage.js
@@ -59,7 +59,7 @@ const ComputedAttributesPage = () => {
<TableCell>{item.type}</TableCell>
{administrator && (
<TableCell className={classes.columnAction} padding="none">
- <CollectionActions itemId={item.id} editPath="/settings/attribute" endpoint="attributes/computed" setTimestamp={setTimestamp} />
+ <CollectionActions itemId={item.id} editPath="/settings/attribute" endpoint="attributes/computed" collectionTitle={t('sharedComputedAttribute')} setTimestamp={setTimestamp} />
</TableCell>
)}
</TableRow>
diff --git a/modern/src/settings/DevicesPage.js b/modern/src/settings/DevicesPage.js
index 5ef5aae5..6a285429 100644
--- a/modern/src/settings/DevicesPage.js
+++ b/modern/src/settings/DevicesPage.js
@@ -51,6 +51,7 @@ const DevicesPage = () => {
const actionConnections = {
key: 'connections',
title: t('sharedConnections'),
+ tooltip: t('sharedLink').concat(' ').concat(t('reportDevice')),
icon: <LinkIcon fontSize="small" />,
handler: (deviceId) => navigate(`/settings/device/${deviceId}/connections`),
};
@@ -86,6 +87,7 @@ const DevicesPage = () => {
itemId={item.id}
editPath="/settings/device"
endpoint="devices"
+ collectionTitle={t('reportDevice')}
setTimestamp={setTimestamp}
customActions={[actionConnections]}
readonly={deviceReadonly}
diff --git a/modern/src/settings/DriversPage.js b/modern/src/settings/DriversPage.js
index 72834860..dcd3f9fb 100644
--- a/modern/src/settings/DriversPage.js
+++ b/modern/src/settings/DriversPage.js
@@ -52,7 +52,7 @@ const DriversPage = () => {
<TableCell>{item.name}</TableCell>
<TableCell>{item.uniqueId}</TableCell>
<TableCell className={classes.columnAction} padding="none">
- <CollectionActions itemId={item.id} editPath="/settings/driver" endpoint="drivers" setTimestamp={setTimestamp} />
+ <CollectionActions itemId={item.id} editPath="/settings/driver" endpoint="drivers" collectionTitle={t('sharedDriver')} setTimestamp={setTimestamp} />
</TableCell>
</TableRow>
)) : (<TableShimmer columns={3} endAction />)}
diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js
index baba7f72..e009b06b 100644
--- a/modern/src/settings/GroupsPage.js
+++ b/modern/src/settings/GroupsPage.js
@@ -45,6 +45,11 @@ const GroupsPage = () => {
const actionCommand = {
key: 'command',
title: t('deviceCommand'),
+ tooltip: t('commandSend')
+ .concat(' ')
+ .concat(t('reportGroup'))
+ .concat(' ')
+ .concat(t('commandTitle')),
icon: <PublishIcon fontSize="small" />,
handler: (groupId) => navigate(`/settings/group/${groupId}/command`),
};
@@ -52,6 +57,7 @@ const GroupsPage = () => {
const actionConnections = {
key: 'connections',
title: t('sharedConnections'),
+ tooltip: t('sharedLink').concat(' ').concat(t('reportGroup')),
icon: <LinkIcon fontSize="small" />,
handler: (groupId) => navigate(`/settings/group/${groupId}/connections`),
};
@@ -75,6 +81,7 @@ const GroupsPage = () => {
itemId={item.id}
editPath="/settings/group"
endpoint="groups"
+ collectionTitle={t('reportGroup')}
setTimestamp={setTimestamp}
customActions={limitCommands ? [actionConnections] : [actionConnections, actionCommand]}
/>
diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js
index 2a66590c..4776deb6 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -79,7 +79,7 @@ const MaintenacesPage = () => {
<TableCell>{convertAttribute(item.type, item.start)}</TableCell>
<TableCell>{convertAttribute(item.type, item.period)}</TableCell>
<TableCell className={classes.columnAction} padding="none">
- <CollectionActions itemId={item.id} editPath="/settings/maintenance" endpoint="maintenance" setTimestamp={setTimestamp} />
+ <CollectionActions itemId={item.id} editPath="/settings/maintenance" endpoint="maintenance" collectionTitle={t('sharedMaintenance')} setTimestamp={setTimestamp} />
</TableCell>
</TableRow>
)) : (<TableShimmer columns={5} endAction />)}
diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js
index f1e70a85..7d6197c0 100644
--- a/modern/src/settings/NotificationsPage.js
+++ b/modern/src/settings/NotificationsPage.js
@@ -69,7 +69,7 @@ const NotificationsPage = () => {
<TableCell>{formatList('alarm', item.attributes.alarms)}</TableCell>
<TableCell>{formatList('notificator', item.notificators)}</TableCell>
<TableCell className={classes.columnAction} padding="none">
- <CollectionActions itemId={item.id} editPath="/settings/notification" endpoint="notifications" setTimestamp={setTimestamp} />
+ <CollectionActions itemId={item.id} editPath="/settings/notification" endpoint="notifications" collectionTitle={t('sharedNotification')} setTimestamp={setTimestamp} />
</TableCell>
</TableRow>
)) : (<TableShimmer columns={5} endAction />)}
diff --git a/modern/src/settings/UsersPage.js b/modern/src/settings/UsersPage.js
index d04f2a2b..b4176763 100644
--- a/modern/src/settings/UsersPage.js
+++ b/modern/src/settings/UsersPage.js
@@ -44,6 +44,7 @@ const UsersPage = () => {
const actionLogin = {
key: 'login',
title: t('loginLogin'),
+ tooltip: t('settingsUser').concat(' ').concat(t('loginTitle')),
icon: <LoginIcon fontSize="small" />,
handler: handleLogin,
};
@@ -51,6 +52,7 @@ const UsersPage = () => {
const actionConnections = {
key: 'connections',
title: t('sharedConnections'),
+ tooltip: t('sharedLink').concat(' ').concat(t('settingsUser')),
icon: <LinkIcon fontSize="small" />,
handler: (userId) => navigate(`/settings/user/${userId}/connections`),
};
@@ -96,6 +98,7 @@ const UsersPage = () => {
itemId={item.id}
editPath="/settings/user"
endpoint="users"
+ collectionTitle={t('settingsUser')}
setTimestamp={setTimestamp}
customActions={manager ? [actionLogin, actionConnections] : [actionConnections]}
/>
diff --git a/modern/src/settings/components/CollectionActions.js b/modern/src/settings/components/CollectionActions.js
index 177295b1..bf8eb257 100644
--- a/modern/src/settings/components/CollectionActions.js
+++ b/modern/src/settings/components/CollectionActions.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
import {
IconButton, Menu, MenuItem, useMediaQuery, useTheme,
} from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
@@ -17,7 +18,7 @@ const useStyles = makeStyles(() => ({
}));
const CollectionActions = ({
- itemId, editPath, endpoint, setTimestamp, customActions, readonly,
+ itemId, editPath, endpoint, collectionTitle, setTimestamp, customActions, readonly,
}) => {
const theme = useTheme();
const classes = useStyles();
@@ -73,18 +74,24 @@ const CollectionActions = ({
) : (
<div className={classes.row}>
{customActions && customActions.map((action) => (
- <IconButton size="small" onClick={() => handleCustom(action)} key={action.key}>
- {action.icon}
- </IconButton>
+ <Tooltip title={action.tooltip} enterDelay={500} enterNextDelay={500}>
+ <IconButton size="small" onClick={() => handleCustom(action)} key={action.key}>
+ {action.icon}
+ </IconButton>
+ </Tooltip>
))}
{!readonly && (
<>
- <IconButton size="small" onClick={handleEdit}>
- <EditIcon fontSize="small" />
- </IconButton>
- <IconButton size="small" onClick={handleRemove}>
- <DeleteIcon fontSize="small" />
- </IconButton>
+ <Tooltip title={t('sharedEdit').concat(' ').concat(collectionTitle || '')} enterDelay={500} enterNextDelay={500}>
+ <IconButton size="small" onClick={handleEdit}>
+ <EditIcon fontSize="small" />
+ </IconButton>
+ </Tooltip>
+ <Tooltip title={t('sharedRemove').concat(' ').concat(collectionTitle || '')} enterDelay={500} enterNextDelay={500}>
+ <IconButton size="small" onClick={handleRemove}>
+ <DeleteIcon fontSize="small" />
+ </IconButton>
+ </Tooltip>
</>
)}
</div>