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 React, { FC, ReactNode } from 'react';
import { stylesFactory, useTheme } from '../../themes'; import { stylesFactory, useTheme } from '../../themes';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme } from '@grafana/data';
import { css } from 'emotion'; import { css, cx } from 'emotion';
export interface Props { export interface Props {
/** Children should be a single <Tab /> or an array of <Tab /> */ /** Children should be a single <Tab /> or an array of <Tab /> */
children: ReactNode; 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; const colors = theme.colors;
return { return {
tabsWrapper: css` tabsWrapper:
border-bottom: 1px solid ${colors.pageHeaderBorder}; !hideBorder &&
`, css`
border-bottom: 1px solid ${colors.pageHeaderBorder};
`,
tabs: css` tabs: css`
position: relative; position: relative;
top: 1px; 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 theme = useTheme();
const tabsStyles = getTabsBarStyles(theme); const tabsStyles = getTabsBarStyles(theme, hideBorder);
return ( return (
<div className={tabsStyles.tabsWrapper}> <div className={cx(tabsStyles.tabsWrapper, className)}>
<ul className={tabsStyles.tabs}>{children}</ul> <ul className={tabsStyles.tabs}>{children}</ul>
</div> </div>
); );

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

@ -57,7 +57,7 @@ const Navigation = ({ main }: { main: NavModelItem }) => {
return ( return (
<nav> <nav>
<SelectNav customCss="page-header__select-nav" main={main} /> <SelectNav customCss="page-header__select-nav" main={main} />
<TabsBar> <TabsBar className="page-header__tabs" hideBorder={true}>
{main.children.map((child, index) => { {main.children.map((child, index) => {
return ( return (
<Tab <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> </select>
</div> </div>
<div <div
className="css-yuafq3" className="page-header__tabs"
> >
<ul <ul
className="css-13jkosq" className="css-13jkosq"