Feature #13601
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
// 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';
import { Column } from '../column';
import { PopoverOrigin } from '@material-ui/core/Popover';
- const { columns, onColumnToggle } = this.props;
+ const { columns, onColumnToggle, classes } = this.props;
- <IconButton onClick={this.handleClick}><ColumnsIcon /></IconButton>
+ <IconButton onClick={this.handleClick}><MenuIcon /></IconButton>
<Popover
anchorEl={this.state.anchorEl}
open={Boolean(this.state.anchorEl)}
<Popover
anchorEl={this.state.anchorEl}
open={Boolean(this.state.anchorEl)}
anchorOrigin={this.transformOrigin}
>
<Paper>
anchorOrigin={this.transformOrigin}
>
<Paper>
+ <List dense>
+ <ListSubheader>
+ Configure table columns
+ </ListSubheader>
{
columns.map((column, index) => (
{
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>
<ListItemText>{column.header}</ListItemText>
</ListItem>
+type CssRules = "root" | "checkbox";
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
+ root: {},
+ checkbox: {
+ width: 24,
+ height: 24
+ }
});
export default withStyles(styles)(ColumnsConfigurator);
});
export default withStyles(styles)(ColumnsConfigurator);