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

Search: Add primary background for global search container (#49473)

Browse Source 
* Search: Add primarhy background for global search container

* Fix spacing for ActionRow

* Fixing ts issue
This commit is contained in:
Torkel Ödegaard 2022-05-24 15:58:44 +02:00 committed by GitHub
parent c043a2f83a
commit 20f8b8625a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/features/search/components/ActionRow.tsx
View File

@ -1,9 +1,9 @@
import { css } from '@emotion/css';
import React, { FC, ChangeEvent, FormEvent } from 'react';
import { GrafanaTheme, SelectableValue } from '@grafana/data';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { config } from '@grafana/runtime';
import { HorizontalGroup, RadioButtonGroup, stylesFactory, useTheme, Checkbox, InlineSwitch } from '@grafana/ui';
import { HorizontalGroup, RadioButtonGroup, Checkbox, InlineSwitch, useStyles2 } from '@grafana/ui';
import { SortPicker } from 'app/core/components/Select/SortPicker';
import { TagFilter } from 'app/core/components/TagFilter/TagFilter';
import { SearchSrv } from 'app/core/services/search_srv';
@ -40,8 +40,7 @@ export const ActionRow: FC<Props> = ({
hideLayout,
showPreviews,
}) => {
const theme = useTheme();
const styles = getStyles(theme);
const styles = useStyles2(getStyles);
const previewsEnabled = config.featureToggles.dashboardPreviews;
return (
@ -78,21 +77,21 @@ export const ActionRow: FC<Props> = ({
ActionRow.displayName = 'ActionRow';
const getStyles = stylesFactory((theme: GrafanaTheme) => {
export const getStyles = (theme: GrafanaTheme2) => {
return {
actionRow: css`
display: none;
@media only screen and (min-width: ${theme.breakpoints.md}) {
${theme.breakpoints.up('md')} {
display: flex;
justify-content: space-between;
align-items: center;
padding: ${theme.spacing.lg} 0;
padding-bottom: ${theme.spacing(2)};
width: 100%;
}
`,
rowContainer: css`
margin-right: ${theme.spacing.md};
margin-right: ${theme.spacing(1)};
`,
checkboxWrapper: css`
label {
@ -100,4 +99,4 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
}
`,
};
});
};

7
public/app/features/search/components/DashboardSearch.tsx
View File

@ -140,11 +140,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
max-width: 1400px;
margin: 0 auto;
padding: ${theme.spacing(2)};
background: ${theme.colors.background.primary};
border: 1px solid ${theme.components.panel.borderColor};
margin-top: ${theme.spacing(4)};
height: 100%;
${theme.breakpoints.up('md')} {
padding: ${theme.spacing(4)};
padding: ${theme.spacing(3)};
}
`,
closeBtn: css`
@ -160,7 +163,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
display: flex;
flex-direction: column;
height: 100%;
padding-bottom: ${theme.spacing(3)};
padding: ${theme.spacing(2, 0, 3, 0)};
`,
input: css`
box-sizing: border-box;

4
public/app/features/search/page/components/ActionRow.tsx
View File

@ -104,11 +104,11 @@ export const getStyles = (theme: GrafanaTheme2) => {
actionRow: css`
display: none;
@media only screen and (min-width: ${theme.v1.breakpoints.md}) {
${theme.breakpoints.up('md')} {
display: flex;
justify-content: space-between;
align-items: center;
padding: ${theme.v1.spacing.lg} 0;
padding-bottom: ${theme.spacing(2)};
width: 100%;
}
`,