aboutsummaryrefslogtreecommitdiffstats
path: root/webui
diff options
context:
space:
mode:
Diffstat (limited to 'webui')
-rw-r--r--webui/src/components/Label.tsx7
-rw-r--r--webui/src/pages/bug/Bug.tsx2
-rw-r--r--webui/src/pages/bug/LabelChange.tsx9
-rw-r--r--webui/src/pages/list/BugRow.tsx44
4 files changed, 40 insertions, 22 deletions
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;
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index 5f3dfd03..b32b0948 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -61,6 +61,8 @@ const useStyles = makeStyles((theme) => ({
label: {
marginTop: theme.spacing(0.1),
marginBottom: theme.spacing(0.1),
+ marginLeft: theme.spacing(0.25),
+ marginRight: theme.spacing(0.25),
},
noLabel: {
...theme.typography.body2,
diff --git a/webui/src/pages/bug/LabelChange.tsx b/webui/src/pages/bug/LabelChange.tsx
index fd466ab8..712c33fa 100644
--- a/webui/src/pages/bug/LabelChange.tsx
+++ b/webui/src/pages/bug/LabelChange.tsx
@@ -16,6 +16,11 @@ const useStyles = makeStyles((theme) => ({
author: {
fontWeight: 'bold',
},
+ label: {
+ maxWidth: '50ch',
+ marginLeft: theme.spacing(0.25),
+ marginRight: theme.spacing(0.25),
+ },
}));
type Props = {
@@ -30,12 +35,12 @@ function LabelChange({ op }: Props) {
<Author author={op.author} className={classes.author} />
{added.length > 0 && <span> added the </span>}
{added.map((label, index) => (
- <Label key={index} label={label} maxWidth="50ch" />
+ <Label key={index} label={label} className={classes.label} />
))}
{added.length > 0 && removed.length > 0 && <span> and</span>}
{removed.length > 0 && <span> removed the </span>}
{removed.map((label, index) => (
- <Label key={index} label={label} maxWidth="50ch" />
+ <Label key={index} label={label} className={classes.label} />
))}
<span>
{' '}
diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx
index 62f8df97..87e45581 100644
--- a/webui/src/pages/list/BugRow.tsx
+++ b/webui/src/pages/list/BugRow.tsx
@@ -59,25 +59,36 @@ const useStyles = makeStyles((theme) => ({
width: '100%',
lineHeight: '20px',
},
+ bugTitleWrapper: {
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ //alignItems: 'center',
+ },
title: {
display: 'inline',
color: theme.palette.text.primary,
fontSize: '1.3rem',
fontWeight: 500,
+ marginBottom: theme.spacing(1),
+ },
+ label: {
+ maxWidth: '40ch',
+ marginLeft: theme.spacing(0.25),
+ marginRight: theme.spacing(0.25),
},
details: {
lineHeight: '1.5rem',
color: theme.palette.text.secondary,
},
- labels: {
- paddingLeft: theme.spacing(1),
- },
commentCount: {
fontSize: '1rem',
marginLeft: theme.spacing(0.5),
},
commentCountCell: {
display: 'inline-flex',
+ minWidth: theme.spacing(5),
+ marginLeft: theme.spacing(0.5),
},
}));
@@ -95,15 +106,12 @@ function BugRow({ bug }: Props) {
<BugStatus status={bug.status} className={classes.status} />
<div className={classes.expand}>
<Link to={'bug/' + bug.humanId}>
- <div className={classes.expand}>
+ <div className={classes.bugTitleWrapper}>
<span className={classes.title}>{bug.title}</span>
- {bug.labels.length > 0 && (
- <span className={classes.labels}>
- {bug.labels.map((l) => (
- <Label key={l.name} label={l} maxWidth="40ch" />
- ))}
- </span>
- )}
+ {bug.labels.length > 0 &&
+ bug.labels.map((l) => (
+ <Label key={l.name} label={l} className={classes.label} />
+ ))}
</div>
</Link>
<div className={classes.details}>
@@ -112,12 +120,14 @@ function BugRow({ bug }: Props) {
&nbsp;by {bug.author.displayName}
</div>
</div>
- {commentCount > 0 && (
- <span className={classes.commentCountCell}>
- <CommentOutlinedIcon aria-label="Comment count" />
- <span className={classes.commentCount}>{commentCount}</span>
- </span>
- )}
+ <span className={classes.commentCountCell}>
+ {commentCount > 0 && (
+ <>
+ <CommentOutlinedIcon aria-label="Comment count" />
+ <span className={classes.commentCount}>{commentCount}</span>
+ </>
+ )}
+ </span>
</TableCell>
</TableRow>
);