Merge pull request #113 from ludovicm67/patch-colors

bug: add label color directly in the core

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;