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 * @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(

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

@ -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;

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

@ -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`

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

@ -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;