PageToolbar: add bottom padding (#34602)

* fix(pagetoolbar): pad elements top and bottom to keep vertical align and wrapper padding * fix(sidemenu): prevent mobile sidemenu squashing dashboard, vertically align mobile sidemenu icon * fix(dashboardsettings): prevent subheader overlap * fix(pagetoolbar): center align all toolbar elements vertically * refactor(pagetoolbar): combine vertical paddings to bring back original padding values * refactor: update padding values for components that use PageToolbar * fix(playlists): update Empty cta link route to prevent 404 * test(dashboard): update snapshot
2025-02-09 23:16:16 -06:00 · 2021-05-26 10:49:39 +02:00 · 2021-05-26 10:49:39 +02:00 · ad3b0b2272
commit ad3b0b2272
parent 987bffe482
10 changed files with 61 additions and 85 deletions
--- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
+++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
@ -54,45 +54,42 @@ export const PageToolbar: FC<Props> = React.memo(

    return (
      <div className={mainStyle}>
-        <div className={styles.toolbarLeft}>
-          {pageIcon && !onGoBack && (
-            <div className={styles.pageIcon}>
-              <Icon name={pageIcon} size="lg" />
-            </div>
-          )}
-          {onGoBack && (
-            <div className={styles.goBackButton}>
-              <IconButton
-                name="arrow-left"
-                tooltip="Go back (Esc)"
-                tooltipPlacement="bottom"
-                size="xxl"
-                surface="dashboard"
-                aria-label={selectors.components.BackButton.backArrow}
-                onClick={onGoBack}
-              />
-            </div>
-          )}
-          <div className={styles.titleWrapper}>
-            {parent && onClickParent && (
-              <button onClick={onClickParent} className={cx(styles.titleLink, styles.parentLink)}>
-                {parent} <span className={styles.parentIcon}>/</span>
-              </button>
-            )}
-            {onClickTitle && (
-              <button onClick={onClickTitle} className={styles.titleLink}>
-                {title}
-              </button>
-            )}
-            {!onClickTitle && <div className={styles.titleText}>{title}</div>}
+        {pageIcon && !onGoBack && (
+          <div className={styles.pageIcon}>
+            <Icon name={pageIcon} size="lg" />
          </div>
-          {leftItems?.map((child, index) => (
-            <div className={styles.leftActionItem} key={index}>
-              {child}
-            </div>
-          ))}
-        </div>
-        <div className={styles.spacer}></div>
+        )}
+        {onGoBack && (
+          <div className={styles.pageIcon}>
+            <IconButton
+              name="arrow-left"
+              tooltip="Go back (Esc)"
+              tooltipPlacement="bottom"
+              size="xxl"
+              surface="dashboard"
+              aria-label={selectors.components.BackButton.backArrow}
+              onClick={onGoBack}
+            />
+          </div>
+        )}
+        {parent && onClickParent && (
+          <button onClick={onClickParent} className={cx(styles.titleText, styles.parentLink)}>
+            {parent} <span className={styles.parentIcon}>/</span>
+          </button>
+        )}
+        {onClickTitle && (
+          <button onClick={onClickTitle} className={styles.titleText}>
+            {title}
+          </button>
+        )}
+        {!onClickTitle && <div className={styles.titleText}>{title}</div>}
+        {leftItems?.map((child, index) => (
+          <div className={styles.leftActionItem} key={index}>
+            {child}
+          </div>
+        ))}
+
+        <div className={styles.spacer} />
        {React.Children.toArray(children)
          .filter(Boolean)
          .map((child, index) => {
@ -114,7 +111,7 @@ const getStyles = (theme: GrafanaTheme2) => {

  const titleStyles = `
      font-size: ${typography.size.lg};
-      padding-left: ${spacing(1)};
+      padding: ${spacing(0.5, 1, 0.5, 1)};
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
@ -131,71 +128,51 @@ const getStyles = (theme: GrafanaTheme2) => {

  return {
    toolbar: css`
-      display: flex;
+      align-items: center;
      background: ${theme.colors.background.canvas};
-      justify-content: flex-end;
-      flex-wrap: wrap;
-      padding: ${theme.spacing(1, 2, 0, 2)};
-    `,
-    toolbarLeft: css`
      display: flex;
-      flex-grow: 1;
-      min-width: 0;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      padding: ${theme.spacing(1.5, 2)};
    `,
    spacer: css`
      flex-grow: 1;
    `,
    pageIcon: css`
-      padding-top: ${spacing(1)};
-      align-items: center;
      display: none;
-
      @media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} {
        display: flex;
+        align-items: center;
      }
    `,
    titleWrapper: css`
      display: flex;
      align-items: center;
-      padding-top: ${spacing(1)};
-      padding-right: ${spacing(1)};
      min-width: 0;
      overflow: hidden;
    `,
-    goBackButton: css`
-      position: relative;
-      top: 8px;
-    `,
    parentIcon: css`
-      margin-left: 4px;
+      margin-left: ${theme.spacing(0.5)};
    `,
    titleText: css`
      ${titleStyles};
    `,
-    titleLink: css`
-      ${titleStyles};
-    `,
    parentLink: css`
      display: none;
-
+      padding-right: 0;
      @media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} {
-        display: inline-block;
+        display: unset;
      }
    `,
    actionWrapper: css`
-      padding-left: ${spacing(1)};
-      padding-top: ${spacing(1)};
+      padding: ${spacing(0.5, 0, 0.5, 1)};
    `,
    leftActionItem: css`
      display: none;
-      height: 40px;
-      position: relative;
-      top: 5px;
-      align-items: center;
-      padding-left: ${spacing(0.5)};
-
      @media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} {
+        align-items: center;
        display: flex;
+        padding-left: ${spacing(0.5)};
      }
    `,
  };
--- a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
@ -151,7 +151,7 @@ const getStyles = (theme: GrafanaTheme2) => {
      background: ${theme.colors.background.primary};
      border: 1px solid ${theme.colors.border.weak};
      border-radius: ${theme.shape.borderRadius()};
-      margin: ${theme.spacing(2)};
+      margin: ${theme.spacing(0, 2, 2)};
      overflow: hidden;
      flex: 1;
    `,
--- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
@ -185,7 +185,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
    display: flex;
  `,
  settingsWrapper: css`
-    margin: ${theme.spacing(2)};
+    margin: ${theme.spacing(0, 2, 2)};
    display: flex;
    flex-grow: 1;
  `,
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx
@ -67,7 +67,7 @@ const getStyles = (theme: GrafanaTheme) => {
      display: flex;
      flex: 1 1 0;
      flex-direction: column;
-      padding: ${theme.spacing.md} 0 0 0;
+      padding: 0;
    `,
    optionsWrapper: css`
      flex-grow: 1;
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
@ -526,7 +526,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
    `,
    panelToolbar: css`
      display: flex;
-      padding: ${paneSpacing} 0 ${paneSpacing} ${paneSpacing};
+      padding: 0 0 ${paneSpacing} ${paneSpacing};
      justify-content: space-between;
      flex-wrap: wrap;
    `,
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@ -289,7 +289,8 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
  render() {
    const { dashboard, isInitSlow, initError, isPanelEditorOpen, queryParams, theme } = this.props;
    const { editPanel, viewPanel, scrollTop, updateScrollTop } = this.state;
-    const styles = getStyles(theme);
+    const kioskMode = getKioskMode(queryParams.kiosk);
+    const styles = getStyles(theme, kioskMode);

    if (!dashboard) {
      if (isInitSlow) {
@ -302,7 +303,6 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
    // Only trigger render when the scroll has moved by 25
    const approximateScrollTop = Math.round(scrollTop / 25) * 25;
    const inspectPanel = this.getInspectPanel();
-    const kioskMode = getKioskMode(queryParams.kiosk);

    return (
      <div className={styles.dashboardContainer}>
@ -372,7 +372,8 @@ const mapDispatchToProps = {
 /*
 * Styles
 */
-export const getStyles = stylesFactory((theme: GrafanaTheme2) => {
+export const getStyles = stylesFactory((theme: GrafanaTheme2, kioskMode) => {
+  const contentPadding = kioskMode !== KioskMode.Full ? theme.spacing(0, 2, 2) : theme.spacing(2);
  return {
    dashboardContainer: css`
      position: absolute;
@ -391,7 +392,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2) => {
      display: flex;
    `,
    dashboardContent: css`
-      padding: ${theme.spacing(2)};
+      padding: ${contentPadding};
      flex-basis: 100%;
      flex-grow: 1;
    `,
--- a/public/app/features/dashboard/containers/snapshots/DashboardPage.test.tsx.snap
+++ b/public/app/features/dashboard/containers/snapshots/DashboardPage.test.tsx.snap
@ -128,7 +128,7 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
      updateAfterMountMs={500}
    >
      <div
-        className="css-50qyg5"
+        className="css-1xodasp"
      >
        <div
          aria-label="Dashboard submenu"
@ -507,7 +507,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
      updateAfterMountMs={500}
    >
      <div
-        className="css-50qyg5"
+        className="css-1xodasp"
      >
        <div
          aria-label="Dashboard submenu"
--- a/public/app/features/playlist/PlaylistPage.tsx
+++ b/public/app/features/playlist/PlaylistPage.tsx
@ -32,7 +32,7 @@ export const PlaylistPage: FC<Props> = ({ navModel }) => {
    <EmptyListCTA
      title="There are no playlists created yet"
      buttonIcon="plus"
-      buttonLink="playlists/create"
+      buttonLink="playlists/new"
      buttonTitle="Create Playlist"
      proTip="You can use playlists to cycle dashboards on TVs without user control"
      proTipLink="http://docs.grafana.org/reference/playlist/"
--- a/public/sass/components/_dashboard_settings.scss
+++ b/public/sass/components/_dashboard_settings.scss
@ -49,8 +49,6 @@
 .dashboard-settings__subheader {
  color: $text-muted;
  font-style: italic;
-  position: relative;
-  top: -$space-lg;
 }

 .dashboard-settings__nav-item {
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@ -207,7 +207,7 @@ li.sidemenu-org-switcher {
      background: $side-menu-bg-mobile;
      height: auto;
      box-shadow: $side-menu-shadow;
-      position: relative;
+      position: absolute;
      z-index: $zindex-sidemenu;
    }

@ -233,7 +233,7 @@ li.sidemenu-org-switcher {
    }

    .sidemenu__logo_small_breakpoint {
-      padding: 13px;
+      padding: 16px 13px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;