diff options
author | Sascha <GlancingMind@outlook.com> | 2021-03-30 17:02:15 +0200 |
---|---|---|
committer | Sascha <GlancingMind@outlook.com> | 2021-04-08 14:57:39 +0200 |
commit | cb609c28b5d1fa6cde79e2ef6b884988182f57c2 (patch) | |
tree | 37f05b89c772fcab47010166c049811371e2171d /webui/src/pages/list | |
parent | 4d4172bb4c7bac5f801ef67f60ff9c58021d3080 (diff) | |
download | git-bug-cb609c28b5d1fa6cde79e2ef6b884988182f57c2.tar.gz |
Increase width of list/labelmenu and stretch color for menuitems
Diffstat (limited to 'webui/src/pages/list')
-rw-r--r-- | webui/src/pages/list/Filter.tsx | 23 |
1 files changed, 18 insertions, 5 deletions
diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx index 119480e7..3559b3ce 100644 --- a/webui/src/pages/list/Filter.tsx +++ b/webui/src/pages/list/Filter.tsx @@ -10,6 +10,7 @@ import TextField from '@material-ui/core/TextField'; import { makeStyles, withStyles } from '@material-ui/core/styles'; import { darken } from '@material-ui/core/styles/colorManipulator'; import ArrowDropDown from '@material-ui/icons/ArrowDropDown'; +import CheckIcon from '@material-ui/icons/Check'; import { Color } from '../../gqlTypes'; @@ -102,11 +103,21 @@ const useStyles = makeStyles((theme) => ({ icon: { paddingRight: theme.spacing(0.5), }, + labelMenu: { + '& .MuiMenu-paper': { + //somehow using "width" won't override the default width... + minWidth: '35ch', + }, + }, + labelMenuItem: { + whiteSpace: 'normal', + wordBreak: 'break-word', + display: 'flex', + alignItems: 'initial', + }, labelcolor: { - minWidth: '15px', - minHeight: '15px', + minWidth: '0.5rem', display: 'flex', - backgroundColor: 'blue', borderRadius: '0.25rem', marginRight: '5px', marginLeft: '3px', @@ -170,6 +181,7 @@ function FilterDropdown({ <ArrowDropDown fontSize="small" /> </button> <Menu + className={classes.labelMenu} getContentAnchorEl={null} ref={searchRef} anchorOrigin={{ @@ -205,13 +217,14 @@ function FilterDropdown({ .filter((d) => d[1].toLowerCase().includes(filter.toLowerCase())) .map(([key, value, color]) => ( <MenuItem - style={{ whiteSpace: 'normal', wordBreak: 'break-all' }} component={Link} to={to(key)} - className={itemActive(key) ? classes.itemActive : undefined} + className={classes.labelMenuItem} + selected={itemActive(key)} onClick={() => setOpen(false)} key={key} > + {itemActive(key) && <CheckIcon />} {color && ( <div className={classes.labelcolor} |