15768: multiselect toolbar visibilty toggle Arvados-DCO-1.1-Signed-off-by: Lisa Knox...

[arvados-workbench2.git] / src / components / data-table-multiselect-popover / data-table-multiselect-popover.tsx

diff --git a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
index a23ed79ff2953d9120169c996265b2a479f32bba..ae2eda41c1f861108df88e57728211e8c244868d 100644 (file)
--- a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
+++ b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx
@@ -3,27 +3,11 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React, { useEffect } from 'react';
-import {
-    WithStyles,
-    withStyles,
-    ButtonBase,
-    StyleRulesCallback,
-    Theme,
-    Popover,
-    Button,
-    Card,
-    CardActions,
-    Typography,
-    CardContent,
-    Tooltip,
-    IconButton,
-} from '@material-ui/core';
+import { WithStyles, withStyles, ButtonBase, StyleRulesCallback, Theme, Popover, Button, Card, CardActions, Tooltip, IconButton } from '@material-ui/core';
 import classnames from 'classnames';
 import { DefaultTransformOrigin } from 'components/popover/helpers';
-import { createTree } from 'models/tree';
-import { getNodeDescendants } from 'models/tree';
 import debounce from 'lodash/debounce';
-import { green, grey } from '@material-ui/core/colors';
+import { grey } from '@material-ui/core/colors';
 
 export type CssRules = 'root' | 'icon' | 'iconButton' | 'optionsContainer' | 'option';
 
@@ -44,6 +28,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         '&:hover': {
             color: theme.palette.text.primary,
         },
+        paddingBottom: '5px',
     },
     iconButton: {
         color: theme.palette.text.primary,
@@ -52,14 +37,14 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         paddingBottom: 5,
     },
     optionsContainer: {
-        padding: '3px 15px',
+        paddingTop: '1rem',
         flex: 1,
     },
     option: {
         cursor: 'pointer',
         display: 'flex',
-        padding: '3px',
-        fontSize: '1rem',
+        padding: '3px 2rem',
+        fontSize: '0.9rem',
         alignItems: 'center',
         '&:hover': {
             backgroundColor: 'rgba(0, 0, 0, 0.08)',
@@ -90,10 +75,10 @@ export const DataTableMultiselectPopover = withStyles(styles)(
         icon = React.createRef<HTMLElement>();
 
         render() {
-            const { name, classes, children, options, checkedList } = this.props;
+            const { classes, children, options, checkedList } = this.props;
             return (
                 <>
-                    <Tooltip disableFocusListener title='Multiselect Actions'>
+                    <Tooltip disableFocusListener title='Select Options'>
                         <ButtonBase className={classnames(classes.root)} component='span' onClick={this.open} disableRipple>
                             {children}
                             <IconButton component='span' classes={{ root: classes.iconButton }} tabIndex={-1}>
@@ -109,13 +94,17 @@ export const DataTableMultiselectPopover = withStyles(styles)(
                         onClose={this.close}
                     >
                         <Card>
-                            <CardContent>
-                                <Typography variant='caption'>{'Options'}</Typography>
-                            </CardContent>
                             <div className={classes.optionsContainer}>
                                 {options.length &&
                                     options.map((option, i) => (
-                                        <div key={i} className={classes.option} onClick={() => option.fn(checkedList)}>
+                                        <div
+                                            key={i}
+                                            className={classes.option}
+                                            onClick={() => {
+                                                option.fn(checkedList);
+                                                this.close();
+                                            }}
+                                        >
                                             {option.name}
                                         </div>
                                     ))}