diff options
author | Michael Muré <batolettre@gmail.com> | 2019-05-22 20:56:37 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-05-22 20:56:37 +0200 |
commit | 6e20bf0e73862854aea0cd759a880a6b5f473880 (patch) | |
tree | 54c7b0f20fa8588f79f7bd9c121630d502b5e1be /webui/src/Label.js | |
parent | 485ca5900486b7fc3ea71cbcbb39b87272ae09fd (diff) | |
parent | aa6247ce870075922a1309718e8fafee321ef51d (diff) | |
download | git-bug-6e20bf0e73862854aea0cd759a880a6b5f473880.tar.gz |
Merge pull request #113 from ludovicm67/patch-colors
bug: add label color directly in the core
Diffstat (limited to 'webui/src/Label.js')
-rw-r--r-- | webui/src/Label.js | 48 |
1 files changed, 21 insertions, 27 deletions
diff --git a/webui/src/Label.js b/webui/src/Label.js index 826d21f5..fc8a3a22 100644 --- a/webui/src/Label.js +++ b/webui/src/Label.js @@ -1,46 +1,29 @@ import React from 'react'; +import gql from 'graphql-tag'; import { makeStyles } from '@material-ui/styles'; import { getContrastRatio, darken, } from '@material-ui/core/styles/colorManipulator'; -import * as allColors from '@material-ui/core/colors'; import { common } from '@material-ui/core/colors'; -// JS's modulo returns negative numbers sometimes. -// This ensures the result is positive. -const mod = (n, m) => ((n % m) + m) % m; - // Minimum contrast between the background and the text color const contrastThreshold = 2.5; -// Filter out the "common" color -const labelColors = Object.entries(allColors) - .filter(([key, value]) => value !== common) - .map(([key, value]) => value); - -// Generate a hash (number) from a string -const hash = string => - string.split('').reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0); - -// Get the background color from the label -const getColor = label => - labelColors[mod(hash(label), labelColors.length)][500]; - // Guess the text color based on the background color const getTextColor = background => getContrastRatio(background, common.white) >= contrastThreshold ? common.white // White on dark backgrounds : common.black; // And black on light ones -const _genStyle = background => ({ - backgroundColor: background, - color: getTextColor(background), - borderBottomColor: darken(background, 0.2), -}); +const _rgb = color => 'rgb(' + color.R + ',' + color.G + ',' + color.B + ')'; -// Generate a style object (text, background and border colors) from the label -const genStyle = label => _genStyle(getColor(label)); +// Create a style object from the label RGB colors +const createStyle = color => ({ + backgroundColor: _rgb(color), + color: getTextColor(_rgb(color)), + borderBottomColor: darken(_rgb(color), 0.2), +}); const useStyles = makeStyles(theme => ({ label: { @@ -58,10 +41,21 @@ const useStyles = makeStyles(theme => ({ function Label({ label }) { const classes = useStyles(); return ( - <span className={classes.label} style={genStyle(label)}> - {label} + <span className={classes.label} style={createStyle(label.color)}> + {label.name} </span> ); } +Label.fragment = gql` + fragment Label on Label { + name + color { + R + G + B + } + } +`; + export default Label; |