IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: show img as backup if icon doesn't exist (#87247)

Browse Source 
show img as backup if icon doesn't exist
This commit is contained in:
Ashley Harrison 2024-05-02 16:24:06 +01:00 committed by GitHub
parent bc9010a95b
commit 8afaea8a56
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/app/core/components/AppChrome/MegaMenu/MegaMenuItem.tsx
View File

@ -4,7 +4,7 @@ import { useLocation } from 'react-router-dom';
import { useLocalStorage } from 'react-use';
import { GrafanaTheme2, NavModelItem, toIconName } from '@grafana/data';
import { useStyles2, Text, IconButton, Icon } from '@grafana/ui';
import { useStyles2, Text, IconButton, Icon, Stack } from '@grafana/ui';
import { useGrafana } from 'app/core/context/GrafanaContext';
import { Indent } from '../../Indent/Indent';
@ -59,11 +59,23 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
return null;
}
let iconElement: React.JSX.Element | null = null;
if (link.icon) {
iconElement = <Icon className={styles.icon} name={toIconName(link.icon) ?? 'link'} size="lg" />;
} else if (link.img) {
iconElement = (
<Stack width={3} justifyContent="center">
<img className={styles.img} src={link.img} alt="" />
</Stack>
);
}
return (
<li ref={item} className={styles.listItem}>
<div
className={cx(styles.menuItem, {
[styles.menuItemWithIcon]: Boolean(level === 0 && link.icon),
[styles.menuItemWithIcon]: Boolean(level === 0 && iconElement),
})}
>
{level !== 0 && <Indent level={level === MAX_DEPTH ? level - 1 : level} spacing={3} />}
@ -93,14 +105,10 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
<div
className={cx(styles.labelWrapper, {
[styles.hasActiveChild]: hasActiveChild,
[styles.labelWrapperWithIcon]: Boolean(level === 0 && link.icon),
[styles.labelWrapperWithIcon]: Boolean(level === 0 && iconElement),
})}
>
{level === 0 && link.icon && (
<FeatureHighlightWrapper>
<Icon className={styles.icon} name={toIconName(link.icon) ?? 'link'} size="lg" />
</FeatureHighlightWrapper>
)}
{level === 0 && iconElement && <FeatureHighlightWrapper>{iconElement}</FeatureHighlightWrapper>}
<Text truncate>{link.text}</Text>
</div>
</MegaMenuItemText>
@ -135,6 +143,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
icon: css({
width: theme.spacing(3),
}),
img: css({
height: theme.spacing(2),
width: theme.spacing(2),
}),
listItem: css({
flex: 1,
maxWidth: '100%',