From 511ef0105cbc6a08298cd63320283bf41090d4e3 Mon Sep 17 00:00:00 2001 From: Amine Hilaly Date: Thu, 16 May 2019 20:46:30 +0200 Subject: Webui: use grahql response to create labels colors --- webui/src/Label.js | 36 +++++++++--------------------------- webui/src/bug/Bug.js | 11 +++++++++-- webui/src/bug/LabelChange.js | 18 ++++++++++++++++-- webui/src/list/BugRow.js | 11 +++++++++-- 4 files changed, 43 insertions(+), 33 deletions(-) (limited to 'webui/src') 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 ( - - {label} + + {label.name} ); } 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 }) { @@ -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 && ( {bug.labels.map(l => ( - )} @@ -94,7 +94,14 @@ BugRow.fragment = gql` title status createdAt - labels + labels { + name + color { + R + G + B + } + } author { name displayName -- cgit From aa6247ce870075922a1309718e8fafee321ef51d Mon Sep 17 00:00:00 2001 From: Amine Hilaly Date: Fri, 17 May 2019 12:43:17 +0200 Subject: webui: Add Label gql fragment --- webui/src/Label.js | 12 ++++++++++++ webui/src/bug/Bug.js | 8 ++------ webui/src/bug/LabelChange.js | 15 +++------------ webui/src/list/BugRow.js | 8 ++------ 4 files changed, 19 insertions(+), 24 deletions(-) (limited to 'webui/src') diff --git a/webui/src/Label.js b/webui/src/Label.js index de2ccd61..fc8a3a22 100644 --- a/webui/src/Label.js +++ b/webui/src/Label.js @@ -1,4 +1,5 @@ import React from 'react'; +import gql from 'graphql-tag'; import { makeStyles } from '@material-ui/styles'; import { getContrastRatio, @@ -46,4 +47,15 @@ function Label({ label }) { ); } +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 3e003567..1b19149d 100644 --- a/webui/src/bug/Bug.js +++ b/webui/src/bug/Bug.js @@ -91,12 +91,7 @@ Bug.fragment = gql` status title labels { - name - color { - R - G - B - } + ...Label } createdAt author { @@ -105,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 73c05c43..1e05b4a6 100644 --- a/webui/src/bug/LabelChange.js +++ b/webui/src/bug/LabelChange.js @@ -50,23 +50,14 @@ LabelChange.fragment = gql` displayName } added { - name - color { - R - G - B - } + ...Label } removed { - name - color { - R - G - B - } + ...Label } } } + ${Label.fragment} `; export default LabelChange; diff --git a/webui/src/list/BugRow.js b/webui/src/list/BugRow.js index 81cccc5e..cfac4616 100644 --- a/webui/src/list/BugRow.js +++ b/webui/src/list/BugRow.js @@ -95,18 +95,14 @@ BugRow.fragment = gql` status createdAt labels { - name - color { - R - G - B - } + ...Label } author { name displayName } } + ${Label.fragment} `; export default BugRow; -- cgit