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

Update styles of selected named color swatch

Browse Source
This commit is contained in:
Dominik Prokop 2019-01-23 14:59:43 +01:00
parent 8cce80a851
commit 3c7a5bdf7b
2 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx
View File

@ -1,5 +1,5 @@
import React, { FunctionComponent } from 'react';
import { Themeable } from '../../types';
import { Themeable, GrafanaTheme } from '../../types';
import { ColorDefinition, getColorForTheme } from '../../utils/colorsPalette';
import { Color } from 'csstype';
import { find, upperFirst } from 'lodash';
@ -11,7 +11,7 @@ export enum ColorSwatchVariant {
Large = 'large',
}
interface ColorSwatchProps extends React.DOMAttributes<HTMLDivElement> {
interface ColorSwatchProps extends Themeable, React.DOMAttributes<HTMLDivElement> {
color: string;
label?: string;
variant?: ColorSwatchVariant;
@ -23,17 +23,19 @@ const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
label,
variant = ColorSwatchVariant.Small,
isSelected,
theme,
...otherProps
}) => {
const isSmall = variant === ColorSwatchVariant.Small;
const swatchSize = isSmall ? '16px' : '32px';
const selectedSwatchBorder = theme === GrafanaTheme.Light ? '#ffffff' : '#1A1B1F';
const swatchStyles = {
width: swatchSize,
height: swatchSize,
borderRadius: '50%',
background: `${color}`,
marginRight: isSmall ? '0px' : '8px',
boxShadow: isSelected ? `inset 0 0 0 2px ${color}, inset 0 0 0 4px white` : 'none',
boxShadow: isSelected ? `inset 0 0 0 2px ${color}, inset 0 0 0 4px ${selectedSwatchBorder}` : 'none',
cursor: isSelected ? 'default' : 'pointer',
};
@ -76,6 +78,7 @@ const NamedColorsGroup: FunctionComponent<NamedColorsGroupProps> = ({
color={getColorForTheme(primaryColor, theme)}
label={upperFirst(primaryColor.hue)}
onClick={() => onColorSelect(primaryColor)}
theme={theme}
/>
)}
<div

1
packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx
View File

@ -10,7 +10,6 @@ interface NamedColorsPaletteProps extends Themeable {
const NamedColorsPalette = ({ color, onChange, theme }: NamedColorsPaletteProps) => {
const swatches: JSX.Element[] = [];
ColorsPalette.forEach((colors, hue) => {
swatches.push(
<NamedColorsGroup