diff --git a/packages/grafana-data/src/types/icon.ts b/packages/grafana-data/src/types/icon.ts index 74f9c258a33..0cf35d13ccd 100644 --- a/packages/grafana-data/src/types/icon.ts +++ b/packages/grafana-data/src/types/icon.ts @@ -20,6 +20,7 @@ export const availableIconsIndex = { 'arrow-left': true, 'arrow-random': true, 'arrow-right': true, + 'arrow-to-right': true, 'arrow-up': true, 'arrows-h': true, 'arrows-v': true, diff --git a/public/app/core/components/PageNew/SectionNav.tsx b/public/app/core/components/PageNew/SectionNav.tsx index d44fd9171ec..f2777bb029d 100644 --- a/public/app/core/components/PageNew/SectionNav.tsx +++ b/public/app/core/components/PageNew/SectionNav.tsx @@ -21,7 +21,7 @@ export function SectionNav({ model }: Props) { } return ( - <> +
- - + +
); } @@ -65,6 +71,14 @@ function useSectionNavState() { const getStyles = (theme: GrafanaTheme2) => { return { + navContainer: css({ + display: 'flex', + flexDirection: 'column', + + [theme.breakpoints.up('md')]: { + flexDirection: 'row', + }, + }), nav: css({ display: 'flex', flexDirection: 'column', @@ -96,16 +110,28 @@ const getStyles = (theme: GrafanaTheme2) => { }, }), collapseIcon: css({ - border: `1px solid ${theme.colors.border.weak}`, - left: '50%', - transform: 'translate(-50%, 50%) rotate(90deg)', + 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')]: { - transform: 'translateX(50%)', - top: theme.spacing(8), - left: theme.spacing(1), - right: theme.spacing(-1), + 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, }, }), }; diff --git a/public/app/core/components/PageNew/SectionNavToggle.tsx b/public/app/core/components/PageNew/SectionNavToggle.tsx index 1e859335129..e220cf9ad01 100644 --- a/public/app/core/components/PageNew/SectionNavToggle.tsx +++ b/public/app/core/components/PageNew/SectionNavToggle.tsx @@ -3,7 +3,7 @@ import classnames from 'classnames'; import React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { IconButton, useTheme2 } from '@grafana/ui'; +import { Button, useTheme2 } from '@grafana/ui'; export interface Props { className?: string; @@ -16,12 +16,16 @@ export const SectionNavToggle = ({ className, isExpanded, onClick }: Props) => { const styles = getStyles(theme); return ( - ); @@ -31,10 +35,11 @@ SectionNavToggle.displayName = 'SectionNavToggle'; const getStyles = (theme: GrafanaTheme2) => ({ icon: css({ - backgroundColor: theme.colors.background.secondary, - border: `1px solid ${theme.colors.border.weak}`, - borderRadius: '50%', + color: theme.colors.text.secondary, marginRight: 0, zIndex: 1, }), + iconExpanded: css({ + rotate: '180deg', + }), });