mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: fixed text-alignment on hovering tableCells (#27311)
## FilterableTableCell ### added - added `display: inline-flex` and `align-items: center` to `tableCellWrapper` class - added `flex: 1` to `tableCell` class ### removed - unused imports - removed ternary if since it has no use anymore - removed `tableCellWrapper` style definition from stylesFactory
This commit is contained in:
parent
b2fe359a5e
commit
5b6e156934
@ -1,10 +1,9 @@
|
||||
import React, { FC, useCallback, useState } from 'react';
|
||||
import { TableCellProps } from 'react-table';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { css, cx } from 'emotion';
|
||||
import { css } from 'emotion';
|
||||
|
||||
import { stylesFactory, useTheme } from '../../themes';
|
||||
import { TableStyles } from './styles';
|
||||
import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, TableFilterActionCallback } from './types';
|
||||
import { Icon, Tooltip } from '..';
|
||||
import { Props, renderCell } from './TableCell';
|
||||
@ -35,15 +34,10 @@ export const FilterableTableCell: FC<FilterableTableCellProps> = ({
|
||||
[cell, field, onCellFilterAdded]
|
||||
);
|
||||
const theme = useTheme();
|
||||
const styles = getFilterableTableCellStyles(theme, tableStyles);
|
||||
const styles = getFilterableTableCellStyles(theme);
|
||||
|
||||
return (
|
||||
<div
|
||||
{...cellProps}
|
||||
className={showFilters ? styles.tableCellWrapper : tableStyles.tableCellWrapper}
|
||||
onMouseOver={onMouseOver}
|
||||
onMouseLeave={onMouseLeave}
|
||||
>
|
||||
<div {...cellProps} className={tableStyles.tableCellWrapper} onMouseOver={onMouseOver} onMouseLeave={onMouseLeave}>
|
||||
{renderCell(cell, field, tableStyles)}
|
||||
{showFilters && cell.value && (
|
||||
<div className={styles.filterWrapper}>
|
||||
@ -63,15 +57,7 @@ export const FilterableTableCell: FC<FilterableTableCellProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
const getFilterableTableCellStyles = stylesFactory((theme: GrafanaTheme, tableStyles: TableStyles) => ({
|
||||
tableCellWrapper: cx(
|
||||
tableStyles.tableCellWrapper,
|
||||
css`
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
`
|
||||
),
|
||||
const getFilterableTableCellStyles = stylesFactory((theme: GrafanaTheme) => ({
|
||||
filterWrapper: css`
|
||||
label: filterWrapper;
|
||||
display: inline-flex;
|
||||
|
@ -89,6 +89,8 @@ export const getTableStyles = stylesFactory(
|
||||
`,
|
||||
tableCellWrapper: css`
|
||||
border-right: 1px solid ${borderColor};
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
&:last-child {
|
||||
@ -107,6 +109,7 @@ export const getTableStyles = stylesFactory(
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
`,
|
||||
overflow: css`
|
||||
overflow: hidden;
|
||||
|
Loading…
Reference in New Issue
Block a user