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

add feature highlighting in the expanded menu (#49892)

Browse Source
This commit is contained in:
Ashley Harrison 2022-05-31 12:03:38 +01:00 committed by GitHub
parent d590012a18
commit 0089779945
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/app/core/components/NavBar/Next/NavBarMenu.tsx
View File

@ -11,6 +11,7 @@ import { reportInteraction } from '@grafana/runtime';
import { CollapsableSection, CustomScrollbar, Icon, IconButton, IconName, useStyles2, useTheme2 } from '@grafana/ui'; import { CollapsableSection, CustomScrollbar, Icon, IconButton, IconName, useStyles2, useTheme2 } from '@grafana/ui';
import { Branding } from '../../Branding/Branding'; import { Branding } from '../../Branding/Branding';
import { NavFeatureHighlight } from '../NavFeatureHighlight';
import { isMatchOrChildMatch } from '../utils'; import { isMatchOrChildMatch } from '../utils';
import { NavBarItemWithoutMenu } from './NavBarItemWithoutMenu'; import { NavBarItemWithoutMenu } from './NavBarItemWithoutMenu';
@ -255,6 +256,7 @@ function NavItem({
</CollapsibleNavItem> </CollapsibleNavItem>
); );
} else { } else {
const FeatureHighlightWrapper = link.highlightText ? NavFeatureHighlight : React.Fragment;
return ( return (
<li className={styles.flex}> <li className={styles.flex}>
<NavBarItemWithoutMenu <NavBarItemWithoutMenu
@ -270,7 +272,9 @@ function NavItem({
isActive={link === activeItem} isActive={link === activeItem}
> >
<div className={styles.itemWithoutMenuContent}> <div className={styles.itemWithoutMenuContent}>
<div className={styles.iconContainer}>{getLinkIcon(link)}</div> <div className={styles.iconContainer}>
<FeatureHighlightWrapper>{getLinkIcon(link)}</FeatureHighlightWrapper>
</div>
<span className={styles.linkText}>{link.text}</span> <span className={styles.linkText}>{link.text}</span>
</div> </div>
</NavBarItemWithoutMenu> </NavBarItemWithoutMenu>
@ -339,6 +343,7 @@ function CollapsibleNavItem({
}) { }) {
const styles = useStyles2(getCollapsibleStyles); const styles = useStyles2(getCollapsibleStyles);
const [sectionExpanded, setSectionExpanded] = useLocalStorage(`grafana.navigation.expanded[${link.text}]`, false); const [sectionExpanded, setSectionExpanded] = useLocalStorage(`grafana.navigation.expanded[${link.text}]`, false);
const FeatureHighlightWrapper = link.highlightText ? NavFeatureHighlight : React.Fragment;
return ( return (
<li className={cx(styles.menuItem, className)}> <li className={cx(styles.menuItem, className)}>
@ -354,7 +359,7 @@ function CollapsibleNavItem({
className={styles.collapsibleMenuItem} className={styles.collapsibleMenuItem}
elClassName={styles.collapsibleIcon} elClassName={styles.collapsibleIcon}
> >
{getLinkIcon(link)} <FeatureHighlightWrapper>{getLinkIcon(link)}</FeatureHighlightWrapper>
</NavBarItemWithoutMenu> </NavBarItemWithoutMenu>
<div className={styles.collapsibleSectionWrapper}> <div className={styles.collapsibleSectionWrapper}>
<CollapsableSection <CollapsableSection
@ -439,9 +444,7 @@ function getLinkIcon(link: NavModelItem) {
return <Branding.MenuLogo />; return <Branding.MenuLogo />;
} else if (link.icon) { } else if (link.icon) {
return <Icon name={link.icon as IconName} size="xl" />; return <Icon name={link.icon as IconName} size="xl" />;
} else if (link.img) {
return <img src={link.img} alt={`${link.text} logo`} height="24" width="24" style={{ borderRadius: '50%' }} />;
} else { } else {
return null; return <img src={link.img} alt={`${link.text} logo`} height="24" width="24" style={{ borderRadius: '50%' }} />;
} }
} }