From: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
Date: Thu, 14 Jun 2018 10:30:30 +0000 (+0200)
Subject: Change column configurator icon, make column list more dense
X-Git-Tag: 1.2.0~75^2~20
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/d183e99c2202a1bfce258af2fe96a6cb1d08cad7

Change column configurator icon, make column list more dense

Feature #13601

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
---

diff --git a/src/components/data-explorer/columns-configurator/columns-configurator.tsx b/src/components/data-explorer/columns-configurator/columns-configurator.tsx
index e4accbed..5a3fb014 100644
--- a/src/components/data-explorer/columns-configurator/columns-configurator.tsx
+++ b/src/components/data-explorer/columns-configurator/columns-configurator.tsx
@@ -3,8 +3,8 @@
 // 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';
 
@@ -26,10 +26,10 @@ class ColumnsConfigurator extends React.Component<ColumnsConfiguratorProps & Wit
     };
 
     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);