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

Explore: Fix height on horizontal drawer and query inspector (#47832)

Browse Source 
* Move tab height and horizontal drawer height to themable variables so they can be referred to. Add a default height to tabbed container so it can set an explicit height. Add overflow: scroll to inspector content

* Use height variable that changes on resize

* Use css to set height
This commit is contained in:
Kristina 2022-04-25 07:48:55 -05:00 committed by GitHub
parent 9829195829
commit b30d9f2732
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/grafana-data/src/themes/createComponents.ts
View File

@ -39,6 +39,12 @@ export interface ThemeComponents {
sidemenu: { sidemenu: {
width: number; width: number;
}; };
menuTabs: {
height: number;
};
horizontalDrawer: {
defaultHeight: number;
};
} }
export function createComponents(colors: ThemeColors, shadows: ThemeShadows): ThemeComponents { export function createComponents(colors: ThemeColors, shadows: ThemeShadows): ThemeComponents {
@ -82,5 +88,11 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
sidemenu: { sidemenu: {
width: 48, width: 48,
}, },
menuTabs: {
height: 41,
},
horizontalDrawer: {
defaultHeight: 400,
},
}; };
} }

2
packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx
View File

@ -28,7 +28,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
tabContent: css` tabContent: css`
padding: ${theme.spacing(2)}; padding: ${theme.spacing(2)};
background-color: ${theme.colors.background.primary}; background-color: ${theme.colors.background.primary};
height: 100%; height: calc(100% - ${theme.components.menuTabs.height}px);
`, `,
close: css` close: css`
position: absolute; position: absolute;

2
packages/grafana-ui/src/components/Tabs/TabsBar.tsx
View File

@ -23,7 +23,7 @@ const getTabsBarStyles = stylesFactory((theme: GrafanaTheme2, hideBorder = false
tabs: css` tabs: css`
position: relative; position: relative;
display: flex; display: flex;
height: 41px; height: ${theme.components.menuTabs.height}px;
`, `,
}; };
}); });

8
public/app/features/explore/ExploreDrawer.tsx
View File

@ -9,9 +9,9 @@ import { stylesFactory, useTheme2 } from '@grafana/ui';
// Types // Types
const drawerSlide = keyframes` const drawerSlide = (theme: GrafanaTheme2) => keyframes`
0% { 0% {
transform: translateY(400px); transform: translateY(${theme.components.horizontalDrawer.defaultHeight}px);
} }
100% { 100% {
@ -32,7 +32,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
`, `,
drawerActive: css` drawerActive: css`
opacity: 1; opacity: 1;
animation: 0.5s ease-out ${drawerSlide}; animation: 0.5s ease-out ${drawerSlide(theme)};
`, `,
rzHandle: css` rzHandle: css`
background: ${theme.colors.secondary.main}; background: ${theme.colors.secondary.main};
@ -66,7 +66,7 @@ export function ExploreDrawer(props: Props) {
return ( return (
<Resizable <Resizable
className={cx(styles.container, styles.drawerActive)} className={cx(styles.container, styles.drawerActive)}
defaultSize={{ width: drawerWidth, height: '400px' }} defaultSize={{ width: drawerWidth, height: `${theme.components.horizontalDrawer.defaultHeight}px` }}
handleClasses={{ top: styles.rzHandle }} handleClasses={{ top: styles.rzHandle }}
enable={{ enable={{
top: true, top: true,

2
public/app/features/explore/ExploreQueryInspector.tsx
View File

@ -73,7 +73,7 @@ export function ExploreQueryInspector(props: Props) {
tabs.push(errorTab); tabs.push(errorTab);
} }
return ( return (
<ExploreDrawer width={width} onResize={() => {}}> <ExploreDrawer width={width}>
<TabbedContainer tabs={tabs} onClose={onClose} closeIconTooltip="Close query inspector" /> <TabbedContainer tabs={tabs} onClose={onClose} closeIconTooltip="Close query inspector" />
</ExploreDrawer> </ExploreDrawer>
); );

4
public/app/features/explore/RichHistory/RichHistoryContainer.tsx
View File

@ -1,6 +1,7 @@
// Libraries // Libraries
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { connect, ConnectedProps } from 'react-redux'; import { connect, ConnectedProps } from 'react-redux';
import { useTheme2 } from '@grafana/ui';
// Types // Types
import { ExploreItemState, StoreState } from 'app/types'; import { ExploreItemState, StoreState } from 'app/types';
@ -54,7 +55,8 @@ interface OwnProps {
export type Props = ConnectedProps<typeof connector> & OwnProps; export type Props = ConnectedProps<typeof connector> & OwnProps;
export function RichHistoryContainer(props: Props) { export function RichHistoryContainer(props: Props) {
const [height, setHeight] = useState(400); const theme = useTheme2();
const [height, setHeight] = useState(theme.components.horizontalDrawer.defaultHeight);
const { const {
richHistory, richHistory,

1
public/app/features/inspector/styles.ts
View File

@ -26,6 +26,7 @@ export const getPanelInspectorStyles = stylesFactory(() => {
content: css` content: css`
flex-grow: 1; flex-grow: 1;
height: 100%; height: 100%;
overflow: scroll;
`, `,
editor: css` editor: css`
font-family: monospace; font-family: monospace;