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 | |
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')
-rw-r--r-- | webui/src/Label.js | 48 | ||||
-rw-r--r-- | webui/src/bug/Bug.js | 7 | ||||
-rw-r--r-- | webui/src/bug/LabelChange.js | 9 | ||||
-rw-r--r-- | webui/src/list/BugRow.js | 7 |
4 files changed, 38 insertions, 33 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; diff --git a/webui/src/bug/Bug.js b/webui/src/bug/Bug.js index 829a4af2..1b19149d 100644 --- a/webui/src/bug/Bug.js +++ b/webui/src/bug/Bug.js @@ -74,7 +74,7 @@ function Bug({ bug }) { <ul className={classes.labelList}> {bug.labels.map(l => ( <li className={classes.label}> - <Label label={l} key={l} /> + <Label label={l} key={l.name} /> </li> ))} </ul> @@ -90,7 +90,9 @@ Bug.fragment = gql` humanId status title - labels + labels { + ...Label + } createdAt author { email @@ -98,6 +100,7 @@ Bug.fragment = gql` displayName } } + ${Label.fragment} `; export default Bug; diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js index 76b6e6e2..1e05b4a6 100644 --- a/webui/src/bug/LabelChange.js +++ b/webui/src/bug/LabelChange.js @@ -49,10 +49,15 @@ LabelChange.fragment = gql` email displayName } - added - removed + added { + ...Label + } + removed { + ...Label + } } } + ${Label.fragment} `; export default LabelChange; diff --git a/webui/src/list/BugRow.js b/webui/src/list/BugRow.js index e82d81db..cfac4616 100644 --- a/webui/src/list/BugRow.js +++ b/webui/src/list/BugRow.js @@ -70,7 +70,7 @@ function BugRow({ bug }) { {bug.labels.length > 0 && ( <span className={classes.labels}> {bug.labels.map(l => ( - <Label key={l} label={l} /> + <Label key={l.name} label={l} /> ))} </span> )} @@ -94,12 +94,15 @@ BugRow.fragment = gql` title status createdAt - labels + labels { + ...Label + } author { name displayName } } + ${Label.fragment} `; export default BugRow; |