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

Dashboard: Revert fixed header shown on mobile devices in the new panel header (#67510)

Browse Source
This commit is contained in:
Alexa V 2023-04-28 16:20:32 +02:00 committed by GitHub
parent 15363e416b
commit 07041b5b36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
View File

@ -1,6 +1,5 @@
import { css, cx } from '@emotion/css';
import React, { CSSProperties, ReactElement, ReactNode } from 'react';
import { useMedia } from 'react-use';
import { GrafanaTheme2, LoadingState } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
@ -92,13 +91,10 @@ export function PanelChrome({
const theme = useTheme2();
const styles = useStyles2(getStyles);
const pointerQuery = '(pointer: coarse)';
// detect if we are on touch devices
const isTouchDevice = useMedia(pointerQuery);
const hasHeader = !hoverHeader || isTouchDevice;
const hasHeader = !hoverHeader;
// hover menu is only shown on hover when not on touch devices
const showOnHoverClass = !isTouchDevice ? 'show-on-hover' : '';
const showOnHoverClass = 'show-on-hover';
const headerHeight = getHeaderHeight(theme, hasHeader);
const { contentStyle, innerWidth, innerHeight } = getContentStyle(padding, theme, width, headerHeight, height);
@ -162,7 +158,7 @@ export function PanelChrome({
{loadingState === LoadingState.Loading ? <LoadingBar width={width} ariaLabel="Panel loading bar" /> : null}
</div>
{hoverHeader && !isTouchDevice && (
{hoverHeader && (
<>
<HoverWidget
menu={menu}
@ -197,12 +193,7 @@ export function PanelChrome({
menu={menu}
title={title}
placement="bottom-end"
menuButtonClass={cx(
{ [styles.hiddenMenu]: !isTouchDevice },
styles.menuItem,
dragClassCancel,
showOnHoverClass
)}
menuButtonClass={cx(styles.menuItem, dragClassCancel, showOnHoverClass)}
onOpenMenu={onOpenMenu}
/>
)}