more detailed tooltip

gridsuite · Dec 14, 2023 · bd3d00c · bd3d00c
1 parent 39cbaaa
commit bd3d00c
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 7 deletions.
diff --git a/src/components/TopBar/AboutDialog.js b/src/components/TopBar/AboutDialog.js
@@ -23,9 +23,11 @@ import {
     Grid,
     Stack,
     Tooltip,
+    tooltipClasses,
     Typography,
     useMediaQuery,
     useTheme,
+    Zoom,
 } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 import {
@@ -323,10 +325,8 @@ const AboutDialog = ({
                                                         key={`module-${idx}`}
                                                         type={module.type}
                                                         name={module.name}
-                                                        version={
-                                                            module.gitTag ||
-                                                            module.version
-                                                        }
+                                                        version={module.version}
+                                                        gitTag={module.gitTag}
                                                         license={module.license}
                                                     />
                                                 ))}
@@ -380,6 +380,27 @@ const style = {
         alignSelf: 'flex-end',
         flexShrink: 0,
     },
+    tooltip: (theme) => ({
+        [`& .${tooltipClasses.tooltip}`]: {
+            border: '1px solid #dadde9',
+            boxShadow: theme.shadows[1],
+        },
+    }),
+    tooltipDetails: {
+        display: 'grid',
+        gridTemplateColumns: 'max-content auto',
+        margin: 0,
+        dt: {
+            gridColumnStart: 1,
+            '&:after': {
+                content: '" :"',
+            },
+        },
+        dd: {
+            gridColumnStart: 2,
+            paddingLeft: '0.5em',
+        },
+    },
 };
 
 const ModuleTypesIcons = {
@@ -388,7 +409,7 @@ const ModuleTypesIcons = {
     other: <QuestionMark sx={style.icons} fontSize="small" />,
 };
 
-const Module = ({ type, name, version, license }) => {
+const Module = ({ type, name, version, gitTag, license }) => {
     return (
         <Grid
             item
@@ -401,7 +422,62 @@ const Module = ({ type, name, version, license }) => {
                 },
             }}
         >
-            <Tooltip title={(name || '<?>') + ' ' + (version || '')}>
+            <Tooltip
+                TransitionComponent={Zoom}
+                enterDelay={3500}
+                enterNextDelay={350}
+                leaveDelay={200}
+                placement="bottom-start"
+                arrow
+                sx={style.tooltip}
+                title={
+                    <>
+                        <Typography variant="body1">{name || '<?>'}</Typography>
+                        <Box component="dl" sx={style.tooltipDetails}>
+                            <Typography variant="body2" component="dt">
+                                <FormattedMessage id="about-dialog/label-type" />
+                            </Typography>
+                            <Typography variant="body2" component="dd">
+                                <FormattedMessage
+                                    id={`about-dialog/module-tooltip-${
+                                        'app'.localeCompare(type, undefined, {
+                                            sensitivity: 'base',
+                                        }) === 0
+                                            ? 'app'
+                                            : 'server'.localeCompare(
+                                                  type,
+                                                  undefined,
+                                                  { sensitivity: 'base' }
+                                              ) === 0
+                                            ? 'server'
+                                            : 'other'
+                                    }`}
+                                />
+                            </Typography>
+                            {version && (
+                                <>
+                                    <Typography variant="body2" component="dt">
+                                        <FormattedMessage id="about-dialog/version" />
+                                    </Typography>
+                                    <Typography variant="body2" component="dd">
+                                        {version}
+                                    </Typography>
+                                </>
+                            )}
+                            {gitTag && (
+                                <>
+                                    <Typography variant="body2" component="dt">
+                                        <FormattedMessage id="about-dialog/git-version" />
+                                    </Typography>
+                                    <Typography variant="body2" component="dd">
+                                        {gitTag}
+                                    </Typography>
+                                </>
+                            )}
+                        </Box>
+                    </>
+                }
+            >
                 <Stack
                     direction="row"
                     justifyContent="flex-start"
@@ -419,7 +495,7 @@ const Module = ({ type, name, version, license }) => {
                         noWrap
                         sx={style.version}
                     >
-                        {version || null}
+                        {gitTag || version || null}
                     </Typography>
                 </Stack>
             </Tooltip>
@@ -430,5 +506,6 @@ Module.propTypes = {
     type: PropTypes.string,
     name: PropTypes.string,
     version: PropTypes.string,
+    gitTag: PropTypes.string,
     license: PropTypes.string,
 };
diff --git a/src/components/translations/top-bar-en.js b/src/components/translations/top-bar-en.js
@@ -25,6 +25,10 @@ const top_bar_en = {
     'about-dialog/license': 'License',
     'about-dialog/modules-section': 'Modules details',
     'about-dialog/git-version': 'Tag',
+    'about-dialog/label-type': 'Type',
+    'about-dialog/module-tooltip-app': 'application',
+    'about-dialog/module-tooltip-server': 'server',
+    'about-dialog/module-tooltip-other': 'other',
 };
 
 export default top_bar_en;
diff --git a/src/components/translations/top-bar-fr.js b/src/components/translations/top-bar-fr.js
@@ -25,6 +25,10 @@ const top_bar_fr = {
     'about-dialog/license': 'Licence',
     'about-dialog/modules-section': 'Détails des modules',
     'about-dialog/git-version': 'Tag',
+    'about-dialog/label-type': 'Type',
+    'about-dialog/module-tooltip-app': 'application',
+    'about-dialog/module-tooltip-server': 'serveur',
+    'about-dialog/module-tooltip-other': 'autre',
 };
 
 export default top_bar_fr;