diff options
Diffstat (limited to 'webui/src')
-rw-r--r-- | webui/src/Label.js | 36 | ||||
-rw-r--r-- | webui/src/bug/Bug.js | 11 | ||||
-rw-r--r-- | webui/src/bug/LabelChange.js | 18 | ||||
-rw-r--r-- | webui/src/list/BugRow.js | 11 |
4 files changed, 43 insertions, 33 deletions
diff --git a/webui/src/Label.js b/webui/src/Label.js index 826d21f5..de2ccd61 100644 --- a/webui/src/Label.js +++ b/webui/src/Label.js @@ -4,43 +4,25 @@ 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,8 +40,8 @@ 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> ); } diff --git a/webui/src/bug/Bug.js b/webui/src/bug/Bug.js index 829a4af2..3e003567 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,14 @@ Bug.fragment = gql` humanId status title - labels + labels { + name + color { + R + G + B + } + } createdAt author { email diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js index 76b6e6e2..73c05c43 100644 --- a/webui/src/bug/LabelChange.js +++ b/webui/src/bug/LabelChange.js @@ -49,8 +49,22 @@ LabelChange.fragment = gql` email displayName } - added - removed + added { + name + color { + R + G + B + } + } + removed { + name + color { + R + G + B + } + } } } `; diff --git a/webui/src/list/BugRow.js b/webui/src/list/BugRow.js index e82d81db..81cccc5e 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,7 +94,14 @@ BugRow.fragment = gql` title status createdAt - labels + labels { + name + color { + R + G + B + } + } author { name displayName |