Increase width of list/labelmenu and stretch color for menuitems

Sascha created 4 years ago

Change summary

webui/src/pages/bug/labels/LabelMenu.tsx |  9 +++------
webui/src/pages/list/Filter.tsx          | 23 ++++++++++++++++++-----
2 files changed, 21 insertions(+), 11 deletions(-)

Detailed changes

webui/src/pages/bug/labels/LabelMenu.tsx

@@ -67,10 +67,8 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   labelcolor: {
-    minWidth: '1rem',
-    minHeight: '1rem',
+    minWidth: '0.5rem',
     display: 'flex',
-    backgroundColor: 'blue',
     borderRadius: '0.25rem',
     marginRight: '5px',
     marginLeft: '3px',
@@ -81,8 +79,7 @@ const useStyles = makeStyles((theme) => ({
   },
   menuRow: {
     display: 'flex',
-    alignItems: 'center',
-    flexWrap: 'wrap',
+    alignItems: 'initial',
   },
 }));
 
@@ -194,7 +191,7 @@ function FilterDropdown({
               selected={itemActive(key)}
             >
               <div className={classes.menuRow}>
-                {itemActive(key) && <CheckIcon fontSize={'small'} />}
+                {itemActive(key) && <CheckIcon />}
                 <div
                   className={classes.labelcolor}
                   style={createStyle(color)}

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}