IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-12 08:35:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

SectionNav: Simplify section toggle styling (#63653)

Browse Source
This commit is contained in:
Torkel Ödegaard 2023-02-23 17:03:00 +01:00 committed by GitHub
parent 0c36b247af
commit 2023203045
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
public/app/core/components/PageNew/SectionNav.tsx
View File

@ -33,13 +33,7 @@ export function SectionNav({ model }: Props) {
</div>
</CustomScrollbar>
</nav>
<SectionNavToggle
className={cx(styles.collapseIcon, {
[styles.collapseIconExpanded]: isExpanded,
})}
isExpanded={Boolean(isExpanded)}
onClick={onToggleSectionNav}
/>
<SectionNavToggle isExpanded={isExpanded} onClick={onToggleSectionNav} />
</div>
);
}
@ -109,30 +103,5 @@ const getStyles = (theme: GrafanaTheme2) => {
padding: theme.spacing(4.5, 1, 2, 2),
},
}),
collapseIcon: css({
alignSelf: 'center',
margin: theme.spacing(1, 0),
position: 'relative',
top: theme.spacing(0),
transform: 'rotate(90deg)',
transition: theme.transitions.create('opacity'),
[theme.breakpoints.up('md')]: {
alignSelf: 'flex-start',
left: 0,
margin: theme.spacing(0, 0, 0, 1),
top: theme.spacing(2),
transform: 'none',
},
'div:hover > &, &:focus': {
opacity: 1,
},
}),
collapseIconExpanded: css({
[theme.breakpoints.up('md')]: {
opacity: 0,
},
}),
};
};

31
public/app/core/components/PageNew/SectionNavToggle.tsx
View File

@ -6,12 +6,11 @@ import { GrafanaTheme2 } from '@grafana/data';
import { Button, useTheme2 } from '@grafana/ui';
export interface Props {
className?: string;
isExpanded: boolean;
isExpanded?: boolean;
onClick: () => void;
}
export const SectionNavToggle = ({ className, isExpanded, onClick }: Props) => {
export const SectionNavToggle = ({ isExpanded, onClick }: Props) => {
const theme = useTheme2();
const styles = getStyles(theme);
@ -20,7 +19,7 @@ export const SectionNavToggle = ({ className, isExpanded, onClick }: Props) => {
title={'Toggle section navigation'}
aria-label={isExpanded ? 'Close section navigation' : 'Open section navigation'}
icon="arrow-to-right"
className={classnames(className, styles.icon, {
className={classnames(styles.icon, {
[styles.iconExpanded]: isExpanded,
})}
variant="secondary"
@ -35,11 +34,33 @@ SectionNavToggle.displayName = 'SectionNavToggle';
const getStyles = (theme: GrafanaTheme2) => ({
icon: css({
alignSelf: 'center',
margin: theme.spacing(1, 0),
top: theme.spacing(0),
transform: 'rotate(90deg)',
transition: theme.transitions.create('opacity'),
color: theme.colors.text.secondary,
marginRight: 0,
zIndex: 1,
[theme.breakpoints.up('md')]: {
alignSelf: 'flex-start',
position: 'relative',
left: 0,
margin: theme.spacing(0, 0, 0, 1),
top: theme.spacing(2),
transform: 'none',
},
'div:hover > &, &:focus': {
opacity: 1,
},
}),
iconExpanded: css({
rotate: '180deg',
[theme.breakpoints.up('md')]: {
opacity: 0,
margin: 0,
},
}),
});