diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index b1e935d40ff..8978f936740 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/packages/grafana-e2e-selectors/src/selectors/components.ts @@ -37,9 +37,9 @@ export const Components = { }, Panels: { Panel: { - title: (title: string) => `Panel header title item ${title}`, + title: (title: string) => `Panel header ${title}`, headerItems: (item: string) => `Panel header item ${item}`, - containerByTitle: (title: string) => `Panel container title ${title}`, + containerByTitle: (title: string) => `${title} panel`, headerCornerInfo: (mode: string) => `Panel header ${mode}`, }, Visualization: { @@ -157,13 +157,13 @@ export const Components = { }, PageToolbar: { container: () => '.page-toolbar', - item: (tooltip: string) => `Page toolbar button ${tooltip}`, + item: (tooltip: string) => `${tooltip}`, }, QueryEditorToolbarItem: { button: (title: string) => `QueryEditor toolbar item button ${title}`, }, BackButton: { - backArrow: 'Go Back button', + backArrow: 'Go Back', }, OptionsGroup: { group: (title?: string) => (title ? `Options group ${title}` : 'Options group'), diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx index e112353718d..3e3177d645f 100644 --- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx +++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx @@ -63,24 +63,28 @@ export const PageToolbar: FC = React.memo( /> )} - {parent && parentHref && ( - <> - - {parent} - - {titleHref && ( - - / - - )} - - )} - {titleHref && ( - - {title} - - )} - {!titleHref &&
{title}
} + {leftItems?.map((child, index) => (
{child} @@ -147,6 +151,14 @@ const getStyles = (theme: GrafanaTheme2) => { min-width: 0; overflow: hidden; `, + navElement: css` + display: flex; + `, + h1Styles: css` + margin: 0; + line-height: inherit; + display: flex; + `, parentIcon: css` margin-left: ${theme.spacing(0.5)}; `, diff --git a/public/app/AppWrapper.tsx b/public/app/AppWrapper.tsx index 182c0e4c99e..b4a79094bba 100644 --- a/public/app/AppWrapper.tsx +++ b/public/app/AppWrapper.tsx @@ -97,7 +97,7 @@ export class AppWrapper extends React.Component -
+
( ))} -
+
diff --git a/public/app/core/components/sidemenu/SideMenu.tsx b/public/app/core/components/sidemenu/SideMenu.tsx index 1de7d82ceb0..026c9e150e7 100644 --- a/public/app/core/components/sidemenu/SideMenu.tsx +++ b/public/app/core/components/sidemenu/SideMenu.tsx @@ -24,7 +24,7 @@ export const SideMenu: FC = React.memo(() => { } return ( -
+
-
+ ); }); diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx index 7d2b540e082..f4e1d48c0d3 100644 --- a/public/app/features/dashboard/components/DashNav/DashNav.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx @@ -114,9 +114,10 @@ class DashNav extends PureComponent { } if (canStar) { + let desc = isStarred ? 'Unmark as favorite' : 'Mark as favorite'; buttons.push( { } if (canShare) { + let desc = 'Share dashboard or panel'; buttons.push( {({ showModal, hideModal }) => ( { diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index 13de5e89011..4a9eb748d96 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.tsx @@ -317,7 +317,7 @@ export class UnthemedDashboardPage extends PureComponent { return (
{kioskMode !== KioskMode.Full && ( -
+
{ kioskMode={kioskMode} hideTimePicker={dashboard.timepicker.hidden} /> -
+ )} @@ -343,9 +343,9 @@ export class UnthemedDashboardPage extends PureComponent {
{initError && } {!editPanel && kioskMode === KioskMode.Off && ( -
+
-
+ )} { }); return ( -
+
{ return this.renderPanel(width, height); }} -
+ ); } } diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx index 775c1033971..46aa74332a5 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react'; -import { cx } from '@emotion/css'; -import { DataLink, PanelData } from '@grafana/data'; -import { Icon } from '@grafana/ui'; +import { cx, css } from '@emotion/css'; +import { DataLink, GrafanaTheme2, PanelData } from '@grafana/data'; +import { Icon, useStyles2 } from '@grafana/ui'; import { selectors } from '@grafana/e2e-selectors'; import PanelHeaderCorner from './PanelHeaderCorner'; @@ -30,6 +30,7 @@ export const PanelHeader: FC = ({ panel, error, isViewing, isEditing, dat const onCancelQuery = () => panel.getQueryRunner().cancelQuery(); const title = panel.getDisplayTitle(); const className = cx('panel-header', !(isViewing || isEditing) ? 'grid-drag-handle' : ''); + const styles = useStyles2(panelStyles); return ( <> @@ -57,7 +58,7 @@ export const PanelHeader: FC = ({ panel, error, isViewing, isEditing, dat size="sm" /> ) : null} - {title} +

{title}

{data.request && data.request.timeInfo && ( @@ -73,3 +74,25 @@ export const PanelHeader: FC = ({ panel, error, isViewing, isEditing, dat ); }; + +const panelStyles = (theme: GrafanaTheme2) => { + return { + titleText: css` + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: calc(100% - 38px); + cursor: pointer; + font-weight: ${theme.typography.fontWeightMedium}; + font-size: ${theme.typography.body.fontSize}; + margin: 0; + + &:hover { + color: ${theme.colors.text.primary}; + } + .panel-has-alert & { + max-width: calc(100% - 54px); + } + `, + }; +}; diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx index 38741292e10..509dd0e0c1e 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx @@ -33,9 +33,9 @@ export const PanelHeaderMenuTrigger: FC = ({ children, ...divProps }) => ); return ( -
+
{children({ panelMenuOpen, closeMenu: () => setPanelMenuOpen(false) })} -
+ ); }; diff --git a/public/sass/components/_panel_header.scss b/public/sass/components/_panel_header.scss index e404abbdd07..daed63795b0 100644 --- a/public/sass/components/_panel_header.scss +++ b/public/sass/components/_panel_header.scss @@ -37,22 +37,6 @@ $panel-header-no-title-zindex: 1; align-items: center; } -.panel-title-text { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - max-width: calc(100% - 38px); - cursor: pointer; - font-weight: $font-weight-semi-bold; - - &:hover { - color: $link-hover-color; - } - .panel-has-alert & { - max-width: calc(100% - 54px); - } -} - .panel-menu-container { width: 0px; height: 19px;