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

fix section root styling, parentItem will be the home item now (#56266)

Browse Source
This commit is contained in:
Ashley Harrison 2022-10-04 11:17:12 +01:00 committed by GitHub
parent 26d64a778e
commit ab09f2783c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/app/core/components/PageNew/SectionNavItem.tsx
View File

@ -4,6 +4,7 @@ import React from 'react';
import { GrafanaTheme2, NavModelItem } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { useStyles2, Icon } from '@grafana/ui';
import { HOME_NAV_ID } from 'app/core/reducers/navModel';
export interface Props {
item: NavModelItem;
@ -13,18 +14,18 @@ export function SectionNavItem({ item }: Props) {
const styles = useStyles2(getStyles);
const children = item.children?.filter((x) => !x.hideFromTabs);
const isRoot = item.parentItem == null;
const isSectionRoot = item.parentItem?.id === HOME_NAV_ID;
const hasActiveChild = Boolean(children?.length && children.find((x) => x.active));
// If first root child is a section skip the bottom margin (as sections have top margin already)
const noRootMargin = isRoot && Boolean(item.children![0].children?.length);
const noRootMargin = isSectionRoot && Boolean(item.children![0].children?.length);
const linkClass = cx({
[styles.link]: true,
[styles.activeStyle]: item.active,
[styles.isSection]: Boolean(children?.length),
[styles.hasActiveChild]: hasActiveChild,
[styles.isRoot]: isRoot,
[styles.isSectionRoot]: isSectionRoot,
[styles.noRootMargin]: noRootMargin,
});
@ -37,8 +38,8 @@ export function SectionNavItem({ item }: Props) {
role="tab"
aria-selected={item.active}
>
{isRoot && item.icon && <Icon name={item.icon} />}
{isRoot && item.img && <img className={styles.sectionImg} src={item.img} alt={`logo of ${item.text}`} />}
{isSectionRoot && item.icon && <Icon name={item.icon} />}
{isSectionRoot && item.img && <img className={styles.sectionImg} src={item.img} alt={`logo of ${item.text}`} />}
{item.text}
{item.tabSuffix && <item.tabSuffix className={styles.suffix} />}
</a>
@ -90,7 +91,7 @@ const getStyles = (theme: GrafanaTheme2) => {
sectionImg: css({
height: 18,
}),
isRoot: css({
isSectionRoot: css({
color: theme.colors.text.primary,
fontSize: theme.typography.h4.fontSize,
marginTop: 0,