From d39e6c4c4391c1a3cd96f791b47d66b043da7f51 Mon Sep 17 00:00:00 2001 From: Tim Becker 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 ( - - {label.name} - + ); } - export default Label; -- cgit From 4d4172bb4c7bac5f801ef67f60ff9c58021d3080 Mon Sep 17 00:00:00 2001 From: Sascha 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 ( ); } -- cgit From 2f7c29153bb9628062aa883a369f6430beddb082 Mon Sep 17 00:00:00 2001 From: Sascha 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 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 ( + /> ); } export default Label; -- cgit