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

Table Panel: Update background colors to respect transparency (#85565)

Browse Source 
* Update background colors to respect alpha

* codeincarnate/fix-table-background/ lint

---------

Co-authored-by: jev forsberg <jev.forsberg@grafana.com>
This commit is contained in:
Kyle Cunningham 2024-04-04 10:55:37 -05:00 committed by GitHub
parent 9b4f88c6f6
commit 67045aa90c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -117,17 +117,20 @@ function getCellStyle(
// Setup color variables // Setup color variables
let textColor: string | undefined = undefined; let textColor: string | undefined = undefined;
let bgColor: string | undefined = undefined; let bgColor: string | undefined = undefined;
let bgHoverColor: string | undefined = undefined;
// Get colors // Get colors
const colors = getCellColors(tableStyles, cellOptions, displayValue); const colors = getCellColors(tableStyles, cellOptions, displayValue);
textColor = colors.textColor; textColor = colors.textColor;
bgColor = colors.bgColor; bgColor = colors.bgColor;
bgHoverColor = colors.bgHoverColor;
// If we have definied colors return those styles // If we have definied colors return those styles
// Otherwise we return default styles // Otherwise we return default styles
return tableStyles.buildCellContainerStyle( return tableStyles.buildCellContainerStyle(
textColor, textColor,
bgColor, bgColor,
bgHoverColor,
!disableOverflowOnHover, !disableOverflowOnHover,
isStringValue, isStringValue,
shouldWrapText, shouldWrapText,

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

@ -14,6 +14,7 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
const buildCellContainerStyle = ( const buildCellContainerStyle = (
color?: string, color?: string,
background?: string, background?: string,
backgroundHover?: string,
overflowOnHover?: boolean, overflowOnHover?: boolean,
asCellText?: boolean, asCellText?: boolean,
textShouldWrap?: boolean, textShouldWrap?: boolean,
@ -56,7 +57,7 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
wordBreak: textShouldWrap ? 'break-word' : undefined, wordBreak: textShouldWrap ? 'break-word' : undefined,
whiteSpace: textShouldWrap && overflowOnHover ? 'normal' : 'nowrap', whiteSpace: textShouldWrap && overflowOnHover ? 'normal' : 'nowrap',
boxShadow: overflowOnHover ? `0 0 2px ${theme.colors.primary.main}` : undefined, boxShadow: overflowOnHover ? `0 0 2px ${theme.colors.primary.main}` : undefined,
background: rowStyled ? 'inherit' : background ?? theme.colors.background.primary, background: rowStyled ? 'inherit' : backgroundHover ?? theme.colors.background.primary,
zIndex: 1, zIndex: 1,
'.cellActions': { '.cellActions': {
color: '#FFF', color: '#FFF',
@ -165,11 +166,11 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
color: theme.colors.text.link, color: theme.colors.text.link,
}, },
}), }),
cellContainerText: buildCellContainerStyle(undefined, undefined, true, true), cellContainerText: buildCellContainerStyle(undefined, undefined, undefined, true, true),
cellContainerTextNoOverflow: buildCellContainerStyle(undefined, undefined, false, true), cellContainerTextNoOverflow: buildCellContainerStyle(undefined, undefined, undefined, false, true),
cellContainer: buildCellContainerStyle(undefined, undefined, true, false), cellContainer: buildCellContainerStyle(undefined, undefined, undefined, true, false),
cellContainerNoOverflow: buildCellContainerStyle(undefined, undefined, false, false), cellContainerNoOverflow: buildCellContainerStyle(undefined, undefined, undefined, false, false),
cellText: css({ cellText: css({
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',

1
packages/grafana-ui/src/components/Table/types.ts
View File

@ -146,4 +146,5 @@ export type TableFieldOptions = Omit<schema.TableFieldOptions, 'cellOptions'> &
export interface CellColors { export interface CellColors {
textColor?: string; textColor?: string;
bgColor?: string; bgColor?: string;
bgHoverColor?: string;
} }

8
packages/grafana-ui/src/components/Table/utils.ts
View File

@ -609,6 +609,7 @@ export function getCellColors(
// Setup color variables // Setup color variables
let textColor: string | undefined = undefined; let textColor: string | undefined = undefined;
let bgColor: string | undefined = undefined; let bgColor: string | undefined = undefined;
let bgHoverColor: string | undefined = undefined;
if (cellOptions.type === TableCellDisplayMode.ColorText) { if (cellOptions.type === TableCellDisplayMode.ColorText) {
textColor = displayValue.color; textColor = displayValue.color;
@ -617,15 +618,18 @@ export function getCellColors(
if (mode === TableCellBackgroundDisplayMode.Basic) { if (mode === TableCellBackgroundDisplayMode.Basic) {
textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark); textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark);
bgColor = tinycolor(displayValue.color).setAlpha(0.9).toRgbString(); bgColor = tinycolor(displayValue.color).toRgbString();
bgHoverColor = tinycolor(displayValue.color).setAlpha(1).toRgbString();
} else if (mode === TableCellBackgroundDisplayMode.Gradient) { } else if (mode === TableCellBackgroundDisplayMode.Gradient) {
const hoverColor = tinycolor(displayValue.color).setAlpha(1).toRgbString();
const bgColor2 = tinycolor(displayValue.color) const bgColor2 = tinycolor(displayValue.color)
.darken(10 * darkeningFactor) .darken(10 * darkeningFactor)
.spin(5); .spin(5);
textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark); textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark);
bgColor = `linear-gradient(120deg, ${bgColor2.toRgbString()}, ${displayValue.color})`; bgColor = `linear-gradient(120deg, ${bgColor2.toRgbString()}, ${displayValue.color})`;
bgHoverColor = `linear-gradient(120deg, ${bgColor2.setAlpha(1).toRgbString()}, ${hoverColor})`;
} }
} }
return { textColor, bgColor }; return { textColor, bgColor, bgHoverColor };
} }