diff --git a/public/app/features/explore-map/ExploreMapPage.tsx b/public/app/features/explore-map/ExploreMapPage.tsx index 0ec6a03eaa8..6339a2a423c 100644 --- a/public/app/features/explore-map/ExploreMapPage.tsx +++ b/public/app/features/explore-map/ExploreMapPage.tsx @@ -10,6 +10,7 @@ import { useNavModel } from 'app/core/hooks/useNavModel'; import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; import { ExploreMapCanvas } from './components/ExploreMapCanvas'; +import { ExploreMapFloatingToolbar } from './components/ExploreMapFloatingToolbar'; import { ExploreMapToolbar } from './components/ExploreMapToolbar'; import { TransformProvider } from './context/TransformContext'; import { useCanvasPersistence } from './hooks/useCanvasPersistence'; @@ -38,6 +39,7 @@ export default function ExploreMapPage(props: GrafanaRouteComponentProps) { + diff --git a/public/app/features/explore-map/components/ExploreMapFloatingToolbar.tsx b/public/app/features/explore-map/components/ExploreMapFloatingToolbar.tsx new file mode 100644 index 00000000000..14992bb5794 --- /dev/null +++ b/public/app/features/explore-map/components/ExploreMapFloatingToolbar.tsx @@ -0,0 +1,53 @@ +import { css } from '@emotion/css'; +import { useCallback } from 'react'; + +import { GrafanaTheme2 } from '@grafana/data'; +import { Trans } from '@grafana/i18n'; +import { Button, useStyles2 } from '@grafana/ui'; +import { useDispatch } from 'app/types/store'; + +import { addPanel } from '../state/exploreMapSlice'; + +export function ExploreMapFloatingToolbar() { + const styles = useStyles2(getStyles); + const dispatch = useDispatch(); + + const handleAddPanel = useCallback(() => { + dispatch( + addPanel({ + viewportSize: { + width: window.innerWidth, + height: window.innerHeight, + }, + }) + ); + }, [dispatch]); + + return ( +
+ +
+ ); +} + +const getStyles = (theme: GrafanaTheme2) => { + return { + floatingToolbar: css({ + position: 'fixed', + bottom: theme.spacing(3), + left: '50%', + transform: 'translateX(-50%)', + display: 'flex', + alignItems: 'center', + gap: theme.spacing(1), + padding: theme.spacing(1, 2), + backgroundColor: theme.colors.background.primary, + border: `1px solid ${theme.colors.border.weak}`, + borderRadius: theme.shape.radius.default, + boxShadow: theme.shadows.z3, + zIndex: 1000, + }), + }; +}; diff --git a/public/app/features/explore-map/components/ExploreMapToolbar.tsx b/public/app/features/explore-map/components/ExploreMapToolbar.tsx index 842b1ae8a1d..68eb3f4e07b 100644 --- a/public/app/features/explore-map/components/ExploreMapToolbar.tsx +++ b/public/app/features/explore-map/components/ExploreMapToolbar.tsx @@ -3,12 +3,12 @@ import { useCallback, useState } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { t, Trans } from '@grafana/i18n'; -import { Button, ButtonGroup, ConfirmModal, ToolbarButton, useStyles2 } from '@grafana/ui'; +import { ButtonGroup, ConfirmModal, ToolbarButton, useStyles2 } from '@grafana/ui'; import { useDispatch, useSelector } from 'app/types/store'; import { useTransformContext } from '../context/TransformContext'; import { useCanvasPersistence } from '../hooks/useCanvasPersistence'; -import { addPanel, resetCanvas } from '../state/exploreMapSlice'; +import { resetCanvas } from '../state/exploreMapSlice'; export function ExploreMapToolbar() { const styles = useStyles2(getStyles); @@ -20,15 +20,6 @@ export function ExploreMapToolbar() { const panelCount = useSelector((state) => Object.keys(state.exploreMap.panels).length); const viewport = useSelector((state) => state.exploreMap.viewport); - const handleAddPanel = useCallback(() => { - dispatch(addPanel({ - viewportSize: { - width: window.innerWidth, - height: window.innerHeight - } - })); - }, [dispatch]); - const handleResetCanvas = useCallback(() => { setShowResetConfirm(true); }, []); @@ -75,9 +66,6 @@ export function ExploreMapToolbar() { <>
- {{ count: panelCount }} panels