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

Tabs: Hide Tabs on Page header on small screens (#21489)

Browse Source 
* Adding className to hide tabs on small screens

* update snapshot

* Readd border on pageheader

* update snap
This commit is contained in:
Peter Holmberg 2020-01-15 12:54:35 +01:00 committed by Torkel Ödegaard
parent 54c9b11ae8
commit 16ded9fe6e
3 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/grafana-ui/src/components/Tabs/TabsBar.tsx
View File

@ -1,20 +1,25 @@
import React, { FC, ReactNode } from 'react';
import { stylesFactory, useTheme } from '../../themes';
import { GrafanaTheme } from '@grafana/data';
import { css } from 'emotion';
import { css, cx } from 'emotion';
export interface Props {
/** Children should be a single <Tab /> or an array of <Tab /> */
children: ReactNode;
className?: string;
/** For hiding the bottom border (on PageHeader for example) */
hideBorder?: boolean;
}
const getTabsBarStyles = stylesFactory((theme: GrafanaTheme) => {
const getTabsBarStyles = stylesFactory((theme: GrafanaTheme, hideBorder = false) => {
const colors = theme.colors;
return {
tabsWrapper: css`
border-bottom: 1px solid ${colors.pageHeaderBorder};
`,
tabsWrapper:
!hideBorder &&
css`
border-bottom: 1px solid ${colors.pageHeaderBorder};
`,
tabs: css`
position: relative;
top: 1px;
@ -23,12 +28,12 @@ const getTabsBarStyles = stylesFactory((theme: GrafanaTheme) => {
};
});
export const TabsBar: FC<Props> = ({ children }) => {
export const TabsBar: FC<Props> = ({ children, className, hideBorder }) => {
const theme = useTheme();
const tabsStyles = getTabsBarStyles(theme);
const tabsStyles = getTabsBarStyles(theme, hideBorder);
return (
<div className={tabsStyles.tabsWrapper}>
<div className={cx(tabsStyles.tabsWrapper, className)}>
<ul className={tabsStyles.tabs}>{children}</ul>
</div>
);

2
public/app/core/components/PageHeader/PageHeader.tsx
View File

@ -57,7 +57,7 @@ const Navigation = ({ main }: { main: NavModelItem }) => {
return (
<nav>
<SelectNav customCss="page-header__select-nav" main={main} />
<TabsBar>
<TabsBar className="page-header__tabs" hideBorder={true}>
{main.children.map((child, index) => {
return (
<Tab

2
public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap
View File

@ -94,7 +94,7 @@ exports[`ServerStats Should render table with stats 1`] = `
</select>
</div>
<div
className="css-yuafq3"
className="page-header__tabs"
>
<ul
className="css-13jkosq"