Change column configurator icon, make column list more dense

[arvados-workbench2.git] / src / components / data-explorer / columns-configurator / columns-configurator.tsx

diff --git a/src/components/data-explorer/columns-configurator/columns-configurator.tsx b/src/components/data-explorer/columns-configurator/columns-configurator.tsx
index e0680e98bd28e104142451b25d4bcd8c6ab1220c..5a3fb014b003b36172526afad7926918adeedf00 100644 (file)
--- a/src/components/data-explorer/columns-configurator/columns-configurator.tsx
+++ b/src/components/data-explorer/columns-configurator/columns-configurator.tsx
@@ -3,14 +3,14 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { WithStyles, StyleRulesCallback, Theme, withStyles, IconButton, Popover, Paper, List, Checkbox, ListItemText, ListItem } from '@material-ui/core';
-import ColumnsIcon from "@material-ui/icons/ViewWeek";
+import { WithStyles, StyleRulesCallback, Theme, withStyles, IconButton, Popover, Paper, List, Checkbox, ListItemText, ListItem, Typography, ListSubheader } from '@material-ui/core';
+import MenuIcon from "@material-ui/icons/Menu";
 import { Column } from '../column';
 import { PopoverOrigin } from '@material-ui/core/Popover';
 
 export interface ColumnsConfiguratorProps {
     columns: Array<Column<any>>;
-    onColumnToggle: (column: Column<any>) => void
+    onColumnToggle: (column: Column<any>) => void;
 }
 
 
@@ -18,18 +18,18 @@ class ColumnsConfigurator extends React.Component<ColumnsConfiguratorProps & Wit
 
     state = {
         anchorEl: undefined
-    }
+    };
 
     transformOrigin: PopoverOrigin = {
         vertical: "top",
         horizontal: "right",
-    }
+    };
 
     render() {
-        const { columns, onColumnToggle } = this.props;
+        const { columns, onColumnToggle, classes } = this.props;
         return (
             <>
-                <IconButton onClick={this.handleClick}><ColumnsIcon /></IconButton>
+                <IconButton onClick={this.handleClick}><MenuIcon /></IconButton>
                 <Popover
                     anchorEl={this.state.anchorEl}
                     open={Boolean(this.state.anchorEl)}
@@ -38,11 +38,14 @@ class ColumnsConfigurator extends React.Component<ColumnsConfiguratorProps & Wit
                     anchorOrigin={this.transformOrigin}
                 >
                     <Paper>
-                        <List>
+                        <List dense>
+                            <ListSubheader>
+                                Configure table columns
+                            </ListSubheader>
                             {
                                 columns.map((column, index) => (
-                                    <ListItem dense key={index} button onClick={() => onColumnToggle(column)}>
-                                        <Checkbox disableRipple color="primary" checked={column.selected}/>
+                                    <ListItem key={index} button onClick={() => onColumnToggle(column)}>
+                                        <Checkbox disableRipple color="primary" checked={column.selected} className={classes.checkbox} />
                                         <ListItemText>{column.header}</ListItemText>
                                     </ListItem>
 
@@ -65,10 +68,14 @@ class ColumnsConfigurator extends React.Component<ColumnsConfiguratorProps & Wit
 
 }
 
-type CssRules = "root";
+type CssRules = "root" | "checkbox";
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
-    root: {}
+    root: {},
+    checkbox: {
+        width: 24,
+        height: 24
+    }
 });
 
 export default withStyles(styles)(ColumnsConfigurator);