IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-14 01:23:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Table: Improve data link text style (#60811)

Browse Source 
Table: Change data link text style
This commit is contained in:
Torkel Ödegaard 2023-01-10 07:48:53 +01:00 committed by GitHub
parent a1609230f8
commit a277d504a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,7 +27,6 @@ export const DefaultCell: FC<TableCellProps> = (props) => {
const showFilters = field.config.filterable;
const showActions = (showFilters && cell.value !== undefined) || inspectEnabled;
const cellStyle = getCellStyle(tableStyles, field, displayValue, inspectEnabled);
const hasLinks = Boolean(getCellLinks(field, row)?.length);
return (
@ -38,7 +37,7 @@ export const DefaultCell: FC<TableCellProps> = (props) => {
<DataLinksContextMenu links={() => getCellLinks(field, row) || []}>
{(api) => {
return (
<div onClick={api.openMenu} className={cx(tableStyles.cellLink, api.targetClassName)}>
<div onClick={api.openMenu} className={getLinkStyle(tableStyles, field, api.targetClassName)}>
{value}
</div>
);
@ -85,3 +84,11 @@ function getCellStyle(
return disableOverflowOnHover ? tableStyles.cellContainerNoOverflow : tableStyles.cellContainer;
}
function getLinkStyle(tableStyles: TableStyles, field: Field, targetClassName: string | undefined) {
if (field.config.custom?.displayMode === TableCellDisplayMode.Auto) {
return cx(tableStyles.cellLink, targetClassName);
}
return cx(tableStyles.cellLinkForColoredCell, targetClassName);
}

14
packages/grafana-ui/src/components/Table/styles.ts
View File

@ -16,6 +16,7 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
const cellActionsOverflow: CSSObject = {
margin: theme.spacing(0, -0.5, 0, 0.5),
};
const cellActionsNoOverflow: CSSObject = {
position: 'absolute',
top: 0,
@ -168,6 +169,19 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
text-overflow: ellipsis;
user-select: text;
white-space: nowrap;
color: ${theme.colors.text.link};
font-weight: ${theme.typography.fontWeightMedium};
&:hover {
text-decoration: underline;
}
`,
cellLinkForColoredCell: css`
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
user-select: text;
white-space: nowrap;
font-weight: ${theme.typography.fontWeightMedium};
text-decoration: underline;
`,
imageCellLink: css`