From 6b0bd025745e278527203ab497a2b79578f7fcfe Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Thu, 2 Dec 2021 11:31:58 +0200
Subject: [PATCH] Info header info icon: add tooltip
---
src/client/components/main_layout/InfoHeader.js | 16 ++++++++++++----
src/client/translations/sampo/localeEN.json | 3 +++
2 files changed, 15 insertions(+), 4 deletions(-)
diff --git a/src/client/components/main_layout/InfoHeader.js b/src/client/components/main_layout/InfoHeader.js
index 331bf6dc..6b17b23b 100644
--- a/src/client/components/main_layout/InfoHeader.js
+++ b/src/client/components/main_layout/InfoHeader.js
@@ -9,6 +9,7 @@ import Typography from '@material-ui/core/Typography'
// import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton'
import InfoIcon from '@material-ui/icons/InfoOutlined'
+import Tooltip from '@material-ui/core/Tooltip'
import intl from 'react-intl-universal'
const useStyles = makeStyles(theme => ({
@@ -90,7 +91,12 @@ const InfoHeader = props => {
let label = ''
const data = props.instanceData
const hasData = data !== null && Object.values(data).length >= 1
- if (hasData && data.prefLabel) { label = data.prefLabel.prefLabel || data.prefLabel }
+ if (hasData && data.prefLabel) {
+ if (Array.isArray(data.prefLabel)) {
+ data.prefLabel = data.prefLabel[0]
+ }
+ label = data.prefLabel.prefLabel || data.prefLabel
+ }
return label
}
@@ -126,9 +132,11 @@ const InfoHeader = props => {
{props.pageType === 'facetResults' && intl.get(`perspectives.${props.resultClass}.label`)}
{props.pageType === 'instancePage' && intl.get(`perspectives.${props.resultClass}.instancePage.label`)}
</Typography>
- <IconButton aria-label='open instructions' className={classes.infoIconButton} onClick={handleExpandButtonOnClick}>
- <InfoIcon className={classes.infoIcon} />
- </IconButton>
+ <Tooltip title={intl.get('infoHeader.toggleInstructions')}>
+ <IconButton aria-label='toggle instructions' className={classes.infoIconButton} onClick={handleExpandButtonOnClick}>
+ <InfoIcon className={classes.infoIcon} />
+ </IconButton>
+ </Tooltip>
</div>
{props.pageType === 'instancePage' &&
<Typography className={classes.label} component='h1' variant='h6'>{generateLabel()}</Typography>}
diff --git a/src/client/translations/sampo/localeEN.json b/src/client/translations/sampo/localeEN.json
index 0355aa28..00f09af4 100644
--- a/src/client/translations/sampo/localeEN.json
+++ b/src/client/translations/sampo/localeEN.json
@@ -15,6 +15,9 @@
"selectPerspective": "Select a perspective to search and browse the knowledge graph:",
"mainPageImageLicence": "Images used under license from Shutterstock.com",
"backendErrorText": "One of the backend services is not available at the moment. Please try again later.",
+ "infoHeader": {
+ "toggleInstructions": "Click to show or hide instructions"
+ },
"topBar": {
"feedback": "feedback",
"info": {
--
GitLab