IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-30 12:44:10 -06:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: use ToolbarButton in TopSearchBar for consistency (#56371)

Browse Source 
* use ToolbarButton in TopSearchBar for consistency

* Removed unnessary styles

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Ashley Harrison 2022-10-05 12:22:47 +01:00 committed by GitHub
parent 636ae8d091
commit 78a57f2064
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/app/core/components/AppChrome/News/NewsContainer.tsx
View File

@ -1,16 +1,12 @@
import React from 'react'; import React from 'react';
import { useToggle } from 'react-use'; import { useToggle } from 'react-use';
import { Drawer, Icon } from '@grafana/ui'; import { Drawer, ToolbarButton } from '@grafana/ui';
import { DEFAULT_FEED_URL } from 'app/plugins/panel/news/constants'; import { DEFAULT_FEED_URL } from 'app/plugins/panel/news/constants';
import { NewsWrapper } from './NewsWrapper'; import { NewsWrapper } from './NewsWrapper';
interface NewsContainerProps { export function NewsContainer() {
buttonCss?: string;
}
export function NewsContainer({ buttonCss }: NewsContainerProps) {
const [showNewsDrawer, onToggleShowNewsDrawer] = useToggle(false); const [showNewsDrawer, onToggleShowNewsDrawer] = useToggle(false);
const onChildClick = () => { const onChildClick = () => {
@ -19,9 +15,7 @@ export function NewsContainer({ buttonCss }: NewsContainerProps) {
return ( return (
<> <>
<button className={buttonCss} onClick={onChildClick}> <ToolbarButton onClick={onChildClick} iconOnly icon="rss" aria-label="News" />
<Icon name="rss" size="lg" />
</button>
{showNewsDrawer && ( {showNewsDrawer && (
<Drawer title="Latest from the blog" scrollableContent onClose={onToggleShowNewsDrawer}> <Drawer title="Latest from the blog" scrollableContent onClose={onToggleShowNewsDrawer}>
<NewsWrapper feedUrl={DEFAULT_FEED_URL} /> <NewsWrapper feedUrl={DEFAULT_FEED_URL} />

44
public/app/core/components/AppChrome/TopSearchBar.tsx
View File

@ -2,7 +2,7 @@ import { css } from '@emotion/css';
import React from 'react'; import React from 'react';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { Dropdown, Icon, Tooltip, useStyles2 } from '@grafana/ui'; import { Dropdown, Icon, ToolbarButton, useStyles2 } from '@grafana/ui';
import { contextSrv } from 'app/core/core'; import { contextSrv } from 'app/core/core';
import { useSelector } from 'app/types'; import { useSelector } from 'app/types';
@ -17,7 +17,6 @@ export function TopSearchBar() {
const helpNode = navIndex['help']; const helpNode = navIndex['help'];
const profileNode = navIndex['profile']; const profileNode = navIndex['profile'];
const signInNode = navIndex['signin'];
return ( return (
<div className={styles.container}> <div className={styles.container}>
@ -32,24 +31,18 @@ export function TopSearchBar() {
<div className={styles.actions}> <div className={styles.actions}>
{helpNode && ( {helpNode && (
<Dropdown overlay={() => <TopNavBarMenu node={helpNode} />}> <Dropdown overlay={() => <TopNavBarMenu node={helpNode} />}>
<button className={styles.actionItem}> <ToolbarButton iconOnly icon="question-circle" aria-label="Help" />
<Icon name="question-circle" size="lg" />
</button>
</Dropdown> </Dropdown>
)} )}
<NewsContainer buttonCss={styles.actionItem} /> <NewsContainer />
{signInNode && (
<Tooltip placement="bottom" content="Sign in">
<a className={styles.actionItem} href={signInNode.url} target={signInNode.target}>
{signInNode.icon && <Icon name={signInNode.icon} size="lg" />}
</a>
</Tooltip>
)}
{profileNode && ( {profileNode && (
<Dropdown overlay={<TopNavBarMenu node={profileNode} />}> <Dropdown overlay={<TopNavBarMenu node={profileNode} />}>
<button className={styles.actionItem}> <ToolbarButton
<img src={contextSrv.user.gravatarUrl} alt="User avatar" /> className={styles.profileButton}
</button> imgSrc={contextSrv.user.gravatarUrl}
imgAlt="User avatar"
aria-label="Profile"
/>
</Dropdown> </Dropdown>
)} )}
</div> </div>
@ -62,6 +55,7 @@ const getStyles = (theme: GrafanaTheme2) => {
container: css({ container: css({
height: TOP_BAR_LEVEL_HEIGHT, height: TOP_BAR_LEVEL_HEIGHT,
display: 'grid', display: 'grid',
gap: theme.spacing(0.5),
gridTemplateColumns: '1fr 2fr 1fr', gridTemplateColumns: '1fr 2fr 1fr',
padding: theme.spacing(0, 2), padding: theme.spacing(0, 2),
alignItems: 'center', alignItems: 'center',
@ -77,25 +71,15 @@ const getStyles = (theme: GrafanaTheme2) => {
searchInput: css({}), searchInput: css({}),
actions: css({ actions: css({
display: 'flex', display: 'flex',
gap: theme.spacing(1), gap: theme.spacing(0.5),
justifyContent: 'flex-end', justifyContent: 'flex-end',
}), }),
actionItem: css({ profileButton: css({
display: 'flex',
flexGrow: 0,
border: 'none',
boxShadow: 'none',
background: 'none',
alignItems: 'center',
color: theme.colors.text.secondary,
'&:hover': {
background: theme.colors.background.secondary,
},
img: { img: {
borderRadius: '50%', borderRadius: '50%',
width: '24px',
height: '24px', height: '24px',
marginRight: 0,
width: '24px',
}, },
}), }),
}; };