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: minor UI fixes (#35335)

Browse Source 
* Increase margin between search item so it's visible

* Fix manage dashboards height overflow

* Align folder icon

* Increase margin

* Update container height

* Fix className not being passed to CardContainer
This commit is contained in:
Alex Khomenko 2021-06-08 15:41:06 +03:00 committed by GitHub
parent 6a39fc9ae1
commit 2cc172db1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/grafana-ui/src/components/Card/Card.tsx
View File

@ -33,16 +33,7 @@ export interface CardInterface extends FC<Props> {
*
* @public
*/
export const Card: CardInterface = ({
heading,
description,
disabled,
href,
onClick,
className,
children,
...htmlProps
}) => {
export const Card: CardInterface = ({ heading, description, disabled, href, onClick, children, ...htmlProps }) => {
const theme = useTheme2();
const styles = getCardStyles(theme);
const [tags, figure, meta, actions, secondaryActions] = ['Tags', 'Figure', 'Meta', 'Actions', 'SecondaryActions'].map(

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

@ -148,12 +148,15 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
return {
container: css`
height: 100%;
display: flex;
flex-direction: column;
`,
results: css`
display: flex;
flex-direction: column;
flex: 1;
margin-top: ${theme.spacing.xl};
flex: 1 1 0;
height: 100%;
padding-top: ${theme.spacing.lg};
`,
spinner: css`
display: flex;

19
public/app/features/search/components/SearchItem.tsx
View File

@ -1,11 +1,11 @@
import React, { FC, useCallback } from 'react';
import { css } from '@emotion/css';
import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
import { TagList, Card, useStyles, Icon, IconName } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/data';
import { TagList, Card, Icon, IconName, useStyles2 } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { DashboardSectionItem, OnToggleChecked } from '../types';
import { SearchCheckbox } from './SearchCheckbox';
import { SEARCH_ITEM_HEIGHT, SEARCH_ITEM_MARGIN } from '../constants';
import { SEARCH_ITEM_HEIGHT } from '../constants';
export interface Props {
item: DashboardSectionItem;
@ -26,7 +26,7 @@ const getIconFromMeta = (meta = ''): IconName => {
};
export const SearchItem: FC<Props> = ({ item, editable, onToggleChecked, onTagSelected }) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const tagSelected = useCallback(
(tag: string, event: React.MouseEvent<HTMLElement>) => {
onTagSelected(tag);
@ -75,23 +75,22 @@ export const SearchItem: FC<Props> = ({ item, editable, onToggleChecked, onTagSe
);
};
const getStyles = (theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
container: css`
margin-bottom: ${SEARCH_ITEM_MARGIN}px;
margin-bottom: ${theme.spacing(0.75)};
a {
padding: ${theme.spacing.sm} ${theme.spacing.md};
padding: ${theme.spacing(1)} ${theme.spacing(2)};
}
`,
metaContainer: css`
display: flex;
align-items: center;
margin-right: ${theme.spacing.sm};
margin-right: ${theme.spacing(1)};
svg {
margin-right: ${theme.spacing.xs};
margin-bottom: 0;
margin-right: ${theme.spacing(0.5)};
}
`,
checkbox: css`

2
public/app/features/search/constants.ts
View File

@ -1,7 +1,7 @@
export const NO_ID_SECTIONS = ['Recent', 'Starred'];
// Height of the search result item
export const SEARCH_ITEM_HEIGHT = 58;
export const SEARCH_ITEM_MARGIN = 4;
export const SEARCH_ITEM_MARGIN = 8;
export const DEFAULT_SORT = { label: 'A\u2013Z', value: 'alpha-asc' };
export const SECTION_STORAGE_KEY = 'search.sections';
export const GENERAL_FOLDER_ID = 0;