From 62ae7d516525bba2c2d053832ece7d613be86dc9 Mon Sep 17 00:00:00 2001 From: Jamie Guthrie Date: Wed, 16 Aug 2023 18:58:52 +0200 Subject: Add tooltips --- modern/src/other/GeofencesList.js | 4 +++- modern/src/other/GeofencesPage.js | 5 +++- modern/src/resources/l10n/en.json | 3 +++ modern/src/settings/CalendarsPage.js | 2 +- modern/src/settings/CommandsPage.js | 2 +- modern/src/settings/ComputedAttributesPage.js | 2 +- modern/src/settings/DevicesPage.js | 2 ++ modern/src/settings/DriversPage.js | 2 +- modern/src/settings/GroupsPage.js | 7 ++++++ modern/src/settings/MaintenancesPage.js | 2 +- modern/src/settings/NotificationsPage.js | 2 +- modern/src/settings/UsersPage.js | 3 +++ .../src/settings/components/CollectionActions.js | 27 ++++++++++++++-------- 13 files changed, 45 insertions(+), 18 deletions(-) (limited to 'modern/src') 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 }) => { onGeofenceSelected(item.id)}> - + {index < list.length - 1 ? : null} 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 = () => { 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 = () => { {item.name} - + )) : ()} 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 = () => { {formatBoolean(item.textChannel, t)} {!limitCommands && ( - + )} 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 = () => { {item.type} {administrator && ( - + )} 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: , 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 = () => { {item.name} {item.uniqueId} - + )) : ()} 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: , 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: , 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 = () => { {convertAttribute(item.type, item.start)} {convertAttribute(item.type, item.period)} - + )) : ()} 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 = () => { {formatList('alarm', item.attributes.alarms)} {formatList('notificator', item.notificators)} - + )) : ()} 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: , handler: handleLogin, }; @@ -51,6 +52,7 @@ const UsersPage = () => { const actionConnections = { key: 'connections', title: t('sharedConnections'), + tooltip: t('sharedLink').concat(' ').concat(t('settingsUser')), icon: , 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 = ({ ) : (
{customActions && customActions.map((action) => ( - handleCustom(action)} key={action.key}> - {action.icon} - + + handleCustom(action)} key={action.key}> + {action.icon} + + ))} {!readonly && ( <> - - - - - - + + + + + + + + + + )}
-- cgit v1.2.3