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: Remove some redundant css and tidy up reverse logic (#43403)

Browse Source 
* Remove some redundant css and tidy up reverse logic

* Fix alignment of subtitle

* Remove navbar-dropdown class
This commit is contained in:
Ashley Harrison 2021-12-21 16:15:03 +00:00 committed by GitHub
parent 2945c3a276
commit 39f787cbef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/core/components/NavBar/NavBarItem.tsx
View File

@ -35,7 +35,7 @@ const NavBarItem = ({
.filter((item) => !item.hideFromMenu)
.map((i) => ({ ...i, menuItemType: NavMenuItemType.Item }));
const adjustHeightForBorder = filteredItems.length === 0;
const styles = getStyles(theme, adjustHeightForBorder, isActive, reverseMenuDirection);
const styles = getStyles(theme, adjustHeightForBorder, isActive);
const section: NavModelItem = {
...link,
children: filteredItems,
@ -115,12 +115,7 @@ const NavBarItem = ({
export default NavBarItem;
const getStyles = (
theme: GrafanaTheme2,
adjustHeightForBorder: boolean,
isActive?: boolean,
reverseMenuDirection?: boolean
) => ({
const getStyles = (theme: GrafanaTheme2, adjustHeightForBorder: boolean, isActive?: boolean) => ({
...getNavBarItemWithoutMenuStyles(theme, isActive),
header: css`
color: ${theme.colors.text.primary};
@ -134,12 +129,4 @@ const getStyles = (
item: css`
color: ${theme.colors.text.primary};
`,
subtitle: css`
border-${reverseMenuDirection ? 'bottom' : 'top'}: 1px solid ${theme.colors.border.weak};
color: ${theme.colors.text.secondary};
font-size: ${theme.typography.bodySmall.fontSize};
font-weight: ${theme.typography.bodySmall.fontWeight};
padding: ${theme.spacing(1)} ${theme.spacing(2)} ${theme.spacing(1)};
white-space: nowrap;
`,
});

54
public/app/core/components/NavBar/NavBarItemMenu.tsx
View File

@ -25,7 +25,7 @@ export function NavBarItemMenu(props: NavBarItemMenuProps): ReactElement | null
};
const { menuHasFocus, menuProps: contextMenuProps = {} } = contextProps;
const theme = useTheme2();
const styles = getStyles(theme, adjustHeightForBorder, reverseMenuDirection);
const styles = getStyles(theme, reverseMenuDirection);
const state = useTreeState<NavModelItem>({ ...rest, disabledKeys });
const ref = useRef(null);
const { menuProps } = useMenu(completeProps, { ...state }, ref);
@ -54,38 +54,26 @@ export function NavBarItemMenu(props: NavBarItemMenuProps): ReactElement | null
<NavBarItemMenuItem key={section.key} item={section} state={state} onNavigate={onNavigate} />
);
const subTitleComponent = (
<li key={menuSubTitle} className={styles.menuItem}>
<div className={styles.subtitle}>{menuSubTitle}</div>
const itemComponents = items.map((item) => (
<NavBarItemMenuItem key={getNavModelItemKey(item.value)} item={item} state={state} onNavigate={onNavigate} />
));
const subTitleComponent = menuSubTitle && (
<li key={menuSubTitle} className={styles.subtitle}>
{menuSubTitle}
</li>
);
const menu = [sectionComponent, itemComponents, subTitleComponent];
return (
<ul
className={`${styles.menu} navbar-dropdown`}
ref={ref}
{...mergeProps(menuProps, contextMenuProps)}
tabIndex={menuHasFocus ? 0 : -1}
>
{!reverseMenuDirection ? sectionComponent : null}
{menuSubTitle && reverseMenuDirection ? subTitleComponent : null}
{items.map((item, index) => {
return (
<NavBarItemMenuItem key={getNavModelItemKey(item.value)} item={item} state={state} onNavigate={onNavigate} />
);
})}
{reverseMenuDirection ? sectionComponent : null}
{menuSubTitle && !reverseMenuDirection ? subTitleComponent : null}
<ul className={styles.menu} ref={ref} {...mergeProps(menuProps, contextMenuProps)} tabIndex={menuHasFocus ? 0 : -1}>
{reverseMenuDirection ? menu.reverse() : menu}
</ul>
);
}
function getStyles(
theme: GrafanaTheme2,
adjustHeightForBorder: boolean,
reverseDirection?: boolean,
isFocused?: boolean
) {
function getStyles(theme: GrafanaTheme2, reverseDirection?: boolean) {
return {
menu: css`
background-color: ${theme.colors.background.primary};
@ -103,26 +91,14 @@ function getStyles(
z-index: ${theme.zIndex.sidemenu};
list-style: none;
`,
menuItem: css`
background-color: ${isFocused ? theme.colors.action.hover : 'transparent'};
color: ${isFocused ? 'white' : theme.colors.text.primary};
&:focus-visible {
background-color: ${theme.colors.action.hover};
box-shadow: none;
color: ${theme.colors.text.primary};
outline: 2px solid ${theme.colors.primary.main};
// Need to add condition, header is 0, otherwise -2
outline-offset: -0px;
transition: none;
}
`,
subtitle: css`
background-color: transparent;
border-${reverseDirection ? 'bottom' : 'top'}: 1px solid ${theme.colors.border.weak};
color: ${theme.colors.text.secondary};
font-size: ${theme.typography.bodySmall.fontSize};
font-weight: ${theme.typography.bodySmall.fontWeight};
padding: ${theme.spacing(1)} ${theme.spacing(2)} ${theme.spacing(1)};
text-align: left;
white-space: nowrap;
`,
};

2
public/app/core/components/NavBar/NavBarItemMenuItem.tsx
View File

@ -72,7 +72,7 @@ function getStyles(theme: GrafanaTheme2, isFocused: boolean, isSection: boolean)
return {
menuItem: css`
background-color: ${backgroundColor};
color: ${isFocused ? 'white' : theme.colors.text.primary};
color: ${theme.colors.text.primary};
&:focus-visible {
background-color: ${theme.colors.action.hover};

16
public/app/core/components/NavBar/NavBarItemMenuTrigger.tsx
View File

@ -164,22 +164,6 @@ export function NavBarItemMenuTrigger(props: NavBarItemMenuTriggerProps): ReactE
}
const getStyles = (theme: GrafanaTheme2, isActive?: boolean) => ({
container: css`
position: relative;
color: ${isActive ? theme.colors.text.primary : theme.colors.text.secondary};
list-style: none;
&:hover {
background-color: ${theme.colors.action.hover};
color: ${theme.colors.text.primary};
// TODO don't use a hardcoded class here, use isVisible in NavBarDropdown
.navbar-dropdown {
opacity: 1;
visibility: visible;
}
}
`,
element: css`
background-color: transparent;
border: none;