mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Search: minor UI fixes (#35335)
* 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:
parent
6a39fc9ae1
commit
2cc172db1a
@ -33,16 +33,7 @@ export interface CardInterface extends FC<Props> {
|
|||||||
*
|
*
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
export const Card: CardInterface = ({
|
export const Card: CardInterface = ({ heading, description, disabled, href, onClick, children, ...htmlProps }) => {
|
||||||
heading,
|
|
||||||
description,
|
|
||||||
disabled,
|
|
||||||
href,
|
|
||||||
onClick,
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
...htmlProps
|
|
||||||
}) => {
|
|
||||||
const theme = useTheme2();
|
const theme = useTheme2();
|
||||||
const styles = getCardStyles(theme);
|
const styles = getCardStyles(theme);
|
||||||
const [tags, figure, meta, actions, secondaryActions] = ['Tags', 'Figure', 'Meta', 'Actions', 'SecondaryActions'].map(
|
const [tags, figure, meta, actions, secondaryActions] = ['Tags', 'Figure', 'Meta', 'Actions', 'SecondaryActions'].map(
|
||||||
|
@ -148,12 +148,15 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
|||||||
return {
|
return {
|
||||||
container: css`
|
container: css`
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
`,
|
`,
|
||||||
results: css`
|
results: css`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1;
|
flex: 1 1 0;
|
||||||
margin-top: ${theme.spacing.xl};
|
height: 100%;
|
||||||
|
padding-top: ${theme.spacing.lg};
|
||||||
`,
|
`,
|
||||||
spinner: css`
|
spinner: css`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
import React, { FC, useCallback } from 'react';
|
import React, { FC, useCallback } from 'react';
|
||||||
import { css } from '@emotion/css';
|
import { css } from '@emotion/css';
|
||||||
import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
|
import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
|
||||||
import { TagList, Card, useStyles, Icon, IconName } from '@grafana/ui';
|
import { TagList, Card, Icon, IconName, useStyles2 } from '@grafana/ui';
|
||||||
import { GrafanaTheme } from '@grafana/data';
|
import { GrafanaTheme2 } from '@grafana/data';
|
||||||
import { DashboardSectionItem, OnToggleChecked } from '../types';
|
import { DashboardSectionItem, OnToggleChecked } from '../types';
|
||||||
import { SearchCheckbox } from './SearchCheckbox';
|
import { SearchCheckbox } from './SearchCheckbox';
|
||||||
import { SEARCH_ITEM_HEIGHT, SEARCH_ITEM_MARGIN } from '../constants';
|
import { SEARCH_ITEM_HEIGHT } from '../constants';
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
item: DashboardSectionItem;
|
item: DashboardSectionItem;
|
||||||
@ -26,7 +26,7 @@ const getIconFromMeta = (meta = ''): IconName => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const SearchItem: FC<Props> = ({ item, editable, onToggleChecked, onTagSelected }) => {
|
export const SearchItem: FC<Props> = ({ item, editable, onToggleChecked, onTagSelected }) => {
|
||||||
const styles = useStyles(getStyles);
|
const styles = useStyles2(getStyles);
|
||||||
const tagSelected = useCallback(
|
const tagSelected = useCallback(
|
||||||
(tag: string, event: React.MouseEvent<HTMLElement>) => {
|
(tag: string, event: React.MouseEvent<HTMLElement>) => {
|
||||||
onTagSelected(tag);
|
onTagSelected(tag);
|
||||||
@ -75,23 +75,22 @@ export const SearchItem: FC<Props> = ({ item, editable, onToggleChecked, onTagSe
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme) => {
|
const getStyles = (theme: GrafanaTheme2) => {
|
||||||
return {
|
return {
|
||||||
container: css`
|
container: css`
|
||||||
margin-bottom: ${SEARCH_ITEM_MARGIN}px;
|
margin-bottom: ${theme.spacing(0.75)};
|
||||||
|
|
||||||
a {
|
a {
|
||||||
padding: ${theme.spacing.sm} ${theme.spacing.md};
|
padding: ${theme.spacing(1)} ${theme.spacing(2)};
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
metaContainer: css`
|
metaContainer: css`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-right: ${theme.spacing.sm};
|
margin-right: ${theme.spacing(1)};
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
margin-right: ${theme.spacing.xs};
|
margin-right: ${theme.spacing(0.5)};
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
checkbox: css`
|
checkbox: css`
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
export const NO_ID_SECTIONS = ['Recent', 'Starred'];
|
export const NO_ID_SECTIONS = ['Recent', 'Starred'];
|
||||||
// Height of the search result item
|
// Height of the search result item
|
||||||
export const SEARCH_ITEM_HEIGHT = 58;
|
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 DEFAULT_SORT = { label: 'A\u2013Z', value: 'alpha-asc' };
|
||||||
export const SECTION_STORAGE_KEY = 'search.sections';
|
export const SECTION_STORAGE_KEY = 'search.sections';
|
||||||
export const GENERAL_FOLDER_ID = 0;
|
export const GENERAL_FOLDER_ID = 0;
|
||||||
|
Loading…
Reference in New Issue
Block a user