@@ -21,78 +21,92 @@ var WebUIAssets = func() http.FileSystem {
fs := vfsgen۰FS{
"/": &vfsgen۰DirInfo{
name: "/",
- modTime: time.Date(2019, 3, 31, 19, 51, 59, 431078583, time.UTC),
+ modTime: time.Date(2019, 5, 22, 18, 37, 30, 890029596, time.UTC),
},
"/asset-manifest.json": &vfsgen۰CompressedFileInfo{
name: "asset-manifest.json",
- modTime: time.Date(2019, 3, 31, 19, 51, 59, 431078583, time.UTC),
- uncompressedSize: 577,
+ modTime: time.Date(2019, 5, 22, 18, 37, 30, 890848047, time.UTC),
+ uncompressedSize: 869,
- compressedContent: []byte("\x1f\x8b\x08\x00\x00\x00\x00\x00\x00\xff\x9c\x90\x5d\x4e\xc3\x30\x10\x84\xdf\x7b\x8a\x28\xcf\xd4\xf1\x4f\x6b\x1a\x6e\xb3\x5d\x6f\x15\x37\xd8\x44\xb6\x03\x48\x08\xce\x8e\x30\x22\x3f\xe0\x08\xc4\xa3\x77\xe7\x9b\xf1\xec\xcb\xae\xaa\x6a\x07\xd6\xb3\x6b\xac\xef\xaa\xba\x89\x09\x92\xc5\xe6\x1a\x9b\x3c\x25\xa5\x34\xf2\xa3\x62\xd8\x8d\xbe\xff\x10\xdd\x2c\x08\xe6\x60\xf8\x13\x95\x85\x99\x0c\xa3\x4f\xd6\xd1\x5b\x39\x73\xb5\x85\x13\xb4\x2d\x3f\xc2\x94\xfa\x8d\x2d\xa4\x6f\xf1\x73\xfe\xac\x95\xcc\x20\x68\x61\x44\x3b\x97\x5b\xbb\x95\x14\xbf\x9b\x14\xbe\xb5\xa5\xca\x66\xd6\x1b\x7a\x66\x5d\x72\xf7\x99\x5a\x3c\xf3\x7a\x08\x84\x80\x1d\xed\x1d\x78\x7b\xa1\x98\x18\x92\xd4\x67\x85\x82\x73\x81\xfa\xf6\x60\x0e\x27\x79\x96\x9a\x73\x23\x85\xbc\x90\xe4\x5f\x45\xfe\x47\x7e\x16\xa4\xf0\x68\x91\xf6\x4f\x0f\xa1\xa7\x30\x5d\xe6\xc7\x74\xf7\xfa\x1e\x00\x00\xff\xff\x66\x1b\x56\xc8\x41\x02\x00\x00"),
@@ -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>
);
}
@@ -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
@@ -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