From d39e6c4c4391c1a3cd96f791b47d66b043da7f51 Mon Sep 17 00:00:00 2001
From: Tim Becker <tim.becker@mni.thm.de>
Date: Wed, 24 Mar 2021 23:26:14 +0100
Subject: Add label menu to bug detail page

Also support label color in label filter menu on bug list page
---
 webui/src/components/Label.tsx | 41 ++++++++++++++---------------------------
 1 file changed, 14 insertions(+), 27 deletions(-)

(limited to 'webui/src/components/Label.tsx')

diff --git a/webui/src/components/Label.tsx b/webui/src/components/Label.tsx
index 111f6d7f..13c913c9 100644
--- a/webui/src/components/Label.tsx
+++ b/webui/src/components/Label.tsx
@@ -1,56 +1,43 @@
 import React from 'react';
 
+import { Chip } from '@material-ui/core';
 import { common } from '@material-ui/core/colors';
-import { makeStyles } from '@material-ui/core/styles';
 import {
-  getContrastRatio,
   darken,
+  getContrastRatio,
 } from '@material-ui/core/styles/colorManipulator';
 
-import { LabelFragment } from '../graphql/fragments.generated';
-import { Color } from 'src/gqlTypes';
+import { Color } from '../gqlTypes';
+
+import { LabelFragment } from './fragments.generated';
+
+const _rgb = (color: Color) =>
+  'rgb(' + color.R + ',' + color.G + ',' + color.B + ')';
 
 // Minimum contrast between the background and the text color
 const contrastThreshold = 2.5;
-
 // Guess the text color based on the background color
 const getTextColor = (background: string) =>
   getContrastRatio(background, common.white) >= contrastThreshold
     ? common.white // White on dark backgrounds
     : common.black; // And black on light ones
 
-const _rgb = (color: Color) =>
-  'rgb(' + color.R + ',' + color.G + ',' + color.B + ')';
-
 // Create a style object from the label RGB colors
 const createStyle = (color: Color) => ({
   backgroundColor: _rgb(color),
   color: getTextColor(_rgb(color)),
   borderBottomColor: darken(_rgb(color), 0.2),
+  margin: '3px',
 });
 
-const useStyles = makeStyles((theme) => ({
-  label: {
-    ...theme.typography.body1,
-    padding: '1px 6px 0.5px',
-    fontSize: '0.9em',
-    fontWeight: 500,
-    margin: '0.05em 1px calc(-1.5px + 0.05em)',
-    borderRadius: '3px',
-    display: 'inline-block',
-    borderBottom: 'solid 1.5px',
-    verticalAlign: 'bottom',
-  },
-}));
-
 type Props = { label: LabelFragment };
 function Label({ label }: Props) {
-  const classes = useStyles();
   return (
-    <span className={classes.label} style={createStyle(label.color)}>
-      {label.name}
-    </span>
+    <Chip
+      size={'small'}
+      label={label.name}
+      style={createStyle(label.color)}
+    ></Chip>
   );
 }
-
 export default Label;
-- 
cgit 


From 4d4172bb4c7bac5f801ef67f60ff9c58021d3080 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Tue, 30 Mar 2021 16:25:44 +0200
Subject: Cut of very long labels with an ellipse

---
 webui/src/components/Label.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'webui/src/components/Label.tsx')

diff --git a/webui/src/components/Label.tsx b/webui/src/components/Label.tsx
index 13c913c9..bbe7c158 100644
--- a/webui/src/components/Label.tsx
+++ b/webui/src/components/Label.tsx
@@ -23,20 +23,24 @@ const getTextColor = (background: string) =>
     : common.black; // And black on light ones
 
 // Create a style object from the label RGB colors
-const createStyle = (color: Color) => ({
+const createStyle = (color: Color, maxWidth?: string) => ({
   backgroundColor: _rgb(color),
   color: getTextColor(_rgb(color)),
   borderBottomColor: darken(_rgb(color), 0.2),
   margin: '3px',
+  maxWidth: maxWidth,
 });
 
-type Props = { label: LabelFragment };
-function Label({ label }: Props) {
+type Props = {
+  label: LabelFragment;
+  maxWidth?: string;
+};
+function Label({ label, maxWidth }: Props) {
   return (
     <Chip
       size={'small'}
       label={label.name}
-      style={createStyle(label.color)}
+      style={createStyle(label.color, maxWidth)}
     ></Chip>
   );
 }
-- 
cgit 


From 2f7c29153bb9628062aa883a369f6430beddb082 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Tue, 30 Mar 2021 17:24:45 +0200
Subject: Fix pipeline fail and remove unused file

---
 webui/src/components/Label.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'webui/src/components/Label.tsx')

diff --git a/webui/src/components/Label.tsx b/webui/src/components/Label.tsx
index bbe7c158..e719eee0 100644
--- a/webui/src/components/Label.tsx
+++ b/webui/src/components/Label.tsx
@@ -8,8 +8,7 @@ import {
 } from '@material-ui/core/styles/colorManipulator';
 
 import { Color } from '../gqlTypes';
-
-import { LabelFragment } from './fragments.generated';
+import { LabelFragment } from '../graphql/fragments.generated';
 
 const _rgb = (color: Color) =>
   'rgb(' + color.R + ',' + color.G + ',' + color.B + ')';
-- 
cgit 


From c37d3d771806f9709c0c9fc77b5bbf8806a2ec23 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 8 Apr 2021 18:02:33 +0200
Subject: Fix label alignment to title on bug list page

Also add className support for custom label component.
This allows to set the margin of an label where the label is used instead of
defining a fixed margin in the label component.
---
 webui/src/components/Label.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'webui/src/components/Label.tsx')

diff --git a/webui/src/components/Label.tsx b/webui/src/components/Label.tsx
index e719eee0..a1d3c6f9 100644
--- a/webui/src/components/Label.tsx
+++ b/webui/src/components/Label.tsx
@@ -26,21 +26,22 @@ const createStyle = (color: Color, maxWidth?: string) => ({
   backgroundColor: _rgb(color),
   color: getTextColor(_rgb(color)),
   borderBottomColor: darken(_rgb(color), 0.2),
-  margin: '3px',
   maxWidth: maxWidth,
 });
 
 type Props = {
   label: LabelFragment;
   maxWidth?: string;
+  className?: string;
 };
-function Label({ label, maxWidth }: Props) {
+function Label({ label, maxWidth, className }: Props) {
   return (
     <Chip
       size={'small'}
       label={label.name}
+      className={className}
       style={createStyle(label.color, maxWidth)}
-    ></Chip>
+    />
   );
 }
 export default Label;
-- 
cgit 

