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