From 30587cc03f0b1a8fe0c5621207882b9c6714093e Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 26 Feb 2021 16:26:37 +0100 Subject: Fix color of open/close filter buttons in dark mode --- webui/src/pages/list/Filter.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'webui/src/pages/list') diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx index 5c4a3d17..66702078 100644 --- a/webui/src/pages/list/Filter.tsx +++ b/webui/src/pages/list/Filter.tsx @@ -65,7 +65,7 @@ function stringify(params: Query): string { const useStyles = makeStyles((theme) => ({ element: { ...theme.typography.body2, - color: '#444', + color: theme.palette.text.secondary, padding: theme.spacing(0, 1), fontWeight: 400, textDecoration: 'none', @@ -75,7 +75,7 @@ const useStyles = makeStyles((theme) => ({ }, itemActive: { fontWeight: 600, - color: '#333', + color: theme.palette.text.primary, }, icon: { paddingRight: theme.spacing(0.5), -- cgit From b996779197539a429c4ad54fba225421e523702b Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 26 Feb 2021 16:39:18 +0100 Subject: Fix backgroundcolor of toolbar for dark mode --- webui/src/pages/list/FilterToolbar.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'webui/src/pages/list') diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx index 21626416..68473974 100644 --- a/webui/src/pages/list/FilterToolbar.tsx +++ b/webui/src/pages/list/FilterToolbar.tsx @@ -3,7 +3,7 @@ import { LocationDescriptor } from 'history'; import React from 'react'; import Toolbar from '@material-ui/core/Toolbar'; -import { makeStyles } from '@material-ui/core/styles'; +import { fade, makeStyles } from '@material-ui/core/styles'; import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline'; import ErrorOutline from '@material-ui/icons/ErrorOutline'; @@ -19,8 +19,8 @@ import { useBugCountQuery } from './FilterToolbar.generated'; const useStyles = makeStyles((theme) => ({ toolbar: { - backgroundColor: theme.palette.grey['100'], - borderColor: theme.palette.grey['300'], + backgroundColor: fade(theme.palette.text.hint, 0.05), + borderColor: theme.palette.divider, borderWidth: '1px 0', borderStyle: 'solid', margin: theme.spacing(0, -1), -- cgit From 7beffb87182355c72ceffa29325815e71ead5f59 Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 26 Feb 2021 16:39:46 +0100 Subject: Fix searchbar background-color for dark mode --- webui/src/pages/list/ListQuery.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'webui/src/pages/list') diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx index 87c21e3c..58660b32 100644 --- a/webui/src/pages/list/ListQuery.tsx +++ b/webui/src/pages/list/ListQuery.tsx @@ -56,10 +56,10 @@ const useStyles = makeStyles((theme) => ({ }, search: { borderRadius: theme.shape.borderRadius, - borderColor: fade(theme.palette.primary.main, 0.2), + borderColor: theme.palette.divider, borderStyle: 'solid', borderWidth: '1px', - backgroundColor: fade(theme.palette.primary.main, 0.05), + backgroundColor: fade(theme.palette.text.hint, 0.05), padding: theme.spacing(0, 1), width: ({ searching }) => (searching ? '20rem' : '15rem'), transition: theme.transitions.create([ -- cgit From 9f6dcc887d31ce5c9cb5438b4e0e6c834c9d81d6 Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 2 Mar 2021 17:13:11 +0100 Subject: Use proper semantic color values Adjust header colors on light theme - Use adjusted background-color for header instead of text.hint. - Use slightly darker secondary font color for better readability against the head background color. Use more semantic theme colors for bug list Use more semantic theme colors for bug messages Fix usage of text hint for filter header --- webui/src/pages/list/FilterToolbar.tsx | 4 ++-- webui/src/pages/list/ListQuery.tsx | 21 ++++++++++++--------- 2 files changed, 14 insertions(+), 11 deletions(-) (limited to 'webui/src/pages/list') diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx index 68473974..e4cd8e6a 100644 --- a/webui/src/pages/list/FilterToolbar.tsx +++ b/webui/src/pages/list/FilterToolbar.tsx @@ -3,7 +3,7 @@ import { LocationDescriptor } from 'history'; import React from 'react'; import Toolbar from '@material-ui/core/Toolbar'; -import { fade, makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline'; import ErrorOutline from '@material-ui/icons/ErrorOutline'; @@ -19,7 +19,7 @@ import { useBugCountQuery } from './FilterToolbar.generated'; const useStyles = makeStyles((theme) => ({ toolbar: { - backgroundColor: fade(theme.palette.text.hint, 0.05), + backgroundColor: theme.palette.primary.light, borderColor: theme.palette.divider, borderWidth: '1px 0', borderStyle: 'solid', diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx index 58660b32..d4ce7f80 100644 --- a/webui/src/pages/list/ListQuery.tsx +++ b/webui/src/pages/list/ListQuery.tsx @@ -6,7 +6,7 @@ import { Button } from '@material-ui/core'; import IconButton from '@material-ui/core/IconButton'; import InputBase from '@material-ui/core/InputBase'; import Paper from '@material-ui/core/Paper'; -import { fade, makeStyles, Theme } from '@material-ui/core/styles'; +import { makeStyles, Theme } from '@material-ui/core/styles'; import ErrorOutline from '@material-ui/icons/ErrorOutline'; import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'; import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'; @@ -56,10 +56,11 @@ const useStyles = makeStyles((theme) => ({ }, search: { borderRadius: theme.shape.borderRadius, + color: theme.palette.text.secondary, borderColor: theme.palette.divider, borderStyle: 'solid', borderWidth: '1px', - backgroundColor: fade(theme.palette.text.hint, 0.05), + backgroundColor: theme.palette.primary.light, padding: theme.spacing(0, 1), width: ({ searching }) => (searching ? '20rem' : '15rem'), transition: theme.transitions.create([ @@ -69,13 +70,11 @@ const useStyles = makeStyles((theme) => ({ ]), }, searchFocused: { - borderColor: fade(theme.palette.primary.main, 0.4), backgroundColor: theme.palette.background.paper, - width: '20rem!important', }, placeholderRow: { padding: theme.spacing(1), - borderBottomColor: theme.palette.grey['300'], + borderBottomColor: theme.palette.divider, borderBottomWidth: '1px', borderBottomStyle: 'solid', display: 'flex', @@ -91,7 +90,8 @@ const useStyles = makeStyles((theme) => ({ ...theme.typography.h5, padding: theme.spacing(8), textAlign: 'center', - borderBottomColor: theme.palette.grey['300'], + color: theme.palette.text.hint, + borderBottomColor: theme.palette.divider, borderBottomWidth: '1px', borderBottomStyle: 'solid', '& > p': { @@ -99,12 +99,15 @@ const useStyles = makeStyles((theme) => ({ }, }, errorBox: { - color: theme.palette.error.main, + color: theme.palette.error.dark, '& > pre': { fontSize: '1rem', textAlign: 'left', - backgroundColor: theme.palette.grey['900'], - color: theme.palette.common.white, + borderColor: theme.palette.divider, + borderWidth: '1px', + borderRadius: theme.shape.borderRadius, + borderStyle: 'solid', + color: theme.palette.text.primary, marginTop: theme.spacing(4), padding: theme.spacing(2, 3), }, -- cgit From 8e8ca99bd5f72de60f6e0e1b334f33312cab5388 Mon Sep 17 00:00:00 2001 From: Sascha Date: Wed, 3 Mar 2021 17:49:53 +0100 Subject: Use colors from theme palette - Use theme colors for title input. - Remove inputTitle classes as they are not applied to the TextField. This will lead to double borders and artifacts at the field corners. --- webui/src/pages/list/ListQuery.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) (limited to 'webui/src/pages/list') diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx index d4ce7f80..021f70b0 100644 --- a/webui/src/pages/list/ListQuery.tsx +++ b/webui/src/pages/list/ListQuery.tsx @@ -112,12 +112,9 @@ const useStyles = makeStyles((theme) => ({ padding: theme.spacing(2, 3), }, }, - greenButton: { - backgroundColor: '#2ea44fd9', - color: '#fff', - '&:hover': { - backgroundColor: '#2ea44f', - }, + newIssueButton: { + backgroundColor: theme.palette.success.main, + color: theme.palette.success.contrastText, }, })); @@ -318,7 +315,7 @@ function ListQuery() { {() => ( )} -- cgit From 07e1c45cd70554630640bb1ea25968078a36fd6c Mon Sep 17 00:00:00 2001 From: Michael MurĂ© Date: Fri, 19 Mar 2021 17:04:59 +0100 Subject: webui: minor code fixes --- webui/src/pages/list/FilterToolbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webui/src/pages/list') diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx index e4cd8e6a..74eefe4c 100644 --- a/webui/src/pages/list/FilterToolbar.tsx +++ b/webui/src/pages/list/FilterToolbar.tsx @@ -40,7 +40,7 @@ function CountingFilter({ query, children, ...props }: CountingFilterProps) { variables: { query }, }); - var prefix; + let prefix; if (loading) prefix = '...'; else if (error || !data?.repository) prefix = '???'; // TODO: better prefixes & error handling -- cgit From 4c7761461bf7cd6a32af60a75bc2ed75ca91ae3a Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 19 Mar 2021 19:23:16 +0100 Subject: Add message icon with placeholder count --- webui/src/pages/list/BugRow.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'webui/src/pages/list') diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx index 8d8fb5cb..b06097ad 100644 --- a/webui/src/pages/list/BugRow.tsx +++ b/webui/src/pages/list/BugRow.tsx @@ -1,11 +1,13 @@ import React from 'react'; import { Link } from 'react-router-dom'; +import Grid from '@material-ui/core/Grid'; import TableCell from '@material-ui/core/TableCell/TableCell'; import TableRow from '@material-ui/core/TableRow/TableRow'; import Tooltip from '@material-ui/core/Tooltip/Tooltip'; import { makeStyles } from '@material-ui/core/styles'; import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline'; +import CommentOutlinedIcon from '@material-ui/icons/CommentOutlined'; import ErrorOutline from '@material-ui/icons/ErrorOutline'; import Date from 'src/components/Date'; @@ -106,6 +108,14 @@ function BugRow({ bug }: Props) { + + + + + + Count + + ); } -- cgit From 688cc33ccca5fd6653ee6f2ee2946dc30a9052ae Mon Sep 17 00:00:00 2001 From: Sascha Date: Fri, 19 Mar 2021 20:36:09 +0100 Subject: Display real number of comment --- webui/src/pages/list/BugRow.graphql | 3 +++ webui/src/pages/list/BugRow.tsx | 20 +++++++++++++++----- 2 files changed, 18 insertions(+), 5 deletions(-) (limited to 'webui/src/pages/list') diff --git a/webui/src/pages/list/BugRow.graphql b/webui/src/pages/list/BugRow.graphql index 547c09d8..e4e2760c 100644 --- a/webui/src/pages/list/BugRow.graphql +++ b/webui/src/pages/list/BugRow.graphql @@ -9,5 +9,8 @@ fragment BugRow on Bug { labels { ...Label } + comments { + totalCount + } ...authored } diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx index b06097ad..f9a50487 100644 --- a/webui/src/pages/list/BugRow.tsx +++ b/webui/src/pages/list/BugRow.tsx @@ -76,6 +76,10 @@ const useStyles = makeStyles((theme) => ({ display: 'inline-block', }, }, + commentCount: { + fontSize: '1rem', + marginLeft: theme.spacing(0.5), + }, })); type Props = { @@ -84,6 +88,8 @@ type Props = { function BugRow({ bug }: Props) { const classes = useStyles(); + // Subtract 1 from totalCount as 1 comment is the bug description + const commentCount = bug.comments.totalCount - 1; return ( @@ -109,12 +115,16 @@ function BugRow({ bug }: Props) { - - - + {commentCount > 0 && ( + + + + + + {commentCount} + - Count - + )} ); -- cgit From b7ddb22558bd4b429e810157b343ee41a6575945 Mon Sep 17 00:00:00 2001 From: Sascha Date: Sat, 20 Mar 2021 14:30:10 +0100 Subject: Fixate message counter to end of bug row Previously the counter has shifted around depending on the length of the bug titles. --- webui/src/pages/list/BugRow.tsx | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) (limited to 'webui/src/pages/list') diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx index f9a50487..1f5d22aa 100644 --- a/webui/src/pages/list/BugRow.tsx +++ b/webui/src/pages/list/BugRow.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import Grid from '@material-ui/core/Grid'; import TableCell from '@material-ui/core/TableCell/TableCell'; import TableRow from '@material-ui/core/TableRow/TableRow'; import Tooltip from '@material-ui/core/Tooltip/Tooltip'; @@ -80,6 +79,9 @@ const useStyles = makeStyles((theme) => ({ fontSize: '1rem', marginLeft: theme.spacing(0.5), }, + commentCountCell: { + display: 'inline-flex', + }, })); type Props = { @@ -113,17 +115,11 @@ function BugRow({ bug }: Props) {  by {bug.author.displayName} - - {commentCount > 0 && ( - - - - - - {commentCount} - - + + + {commentCount} + )} -- cgit