Commit b506b6b5 authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

Optimized datatable button layout. Minor fixes.

parent 5fd55b73
...@@ -38,6 +38,10 @@ class DataTableToolbarUnStyled extends React.Component { ...@@ -38,6 +38,10 @@ class DataTableToolbarUnStyled extends React.Component {
color: theme.palette.secondary.main color: theme.palette.secondary.main
}, },
title: { title: {
whiteSpace: 'nowrap',
marginRight: theme.spacing.unit
},
grow: {
flex: '1 1 100%' flex: '1 1 100%'
} }
}) })
...@@ -79,13 +83,53 @@ class DataTableToolbarUnStyled extends React.Component { ...@@ -79,13 +83,53 @@ class DataTableToolbarUnStyled extends React.Component {
const { anchorEl } = this.state const { anchorEl } = this.state
const open = Boolean(anchorEl) const open = Boolean(anchorEl)
const regularActions = <React.Fragment>
{actions || <React.Fragment/>}
<Tooltip title="Change displayed columns">
<IconButton onClick={this.handleClick}>
<ViewColumnIcon />
</IconButton>
</Tooltip>
<Popover
open={open}
anchorEl={anchorEl}
onClose={this.handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center'
}}
>
<List>
{Object.keys(columns).map(key => {
const column = columns[key]
return (
<ListItem key={key} role={undefined} dense button onClick={() => this.handleToggle(key)}>
<Checkbox
checked={selectedColumns.indexOf(key) !== -1}
tabIndex={-1}
disableRipple
/>
<ListItemText primary={column.label} />
</ListItem>
)
})}
</List>
</Popover>
</React.Fragment>
if (numSelected > 0) { if (numSelected > 0) {
return ( return (
<Toolbar className={clsx(classes.root, {[classes.selected]: true})} > <Toolbar className={clsx(classes.root, {[classes.selected]: true})} >
<Typography className={classes.title} color="inherit" variant="h6"> <Typography className={classes.title} color="inherit" variant="h6">
{numSelected.toLocaleString()} selected {numSelected.toLocaleString()} selected:
</Typography> </Typography>
{selectActions} {selectActions}
<span className={classes.grow} />
{regularActions}
</Toolbar> </Toolbar>
) )
} else { } else {
...@@ -94,41 +138,8 @@ class DataTableToolbarUnStyled extends React.Component { ...@@ -94,41 +138,8 @@ class DataTableToolbarUnStyled extends React.Component {
<Typography className={classes.title} variant="h6" id="tableTitle"> <Typography className={classes.title} variant="h6" id="tableTitle">
{title || ''} {title || ''}
</Typography> </Typography>
{actions || <React.Fragment/>} <span className={classes.grow} />
<Tooltip title="Change displayed columns"> {regularActions}
<IconButton onClick={this.handleClick}>
<ViewColumnIcon />
</IconButton>
</Tooltip>
<Popover
open={open}
anchorEl={anchorEl}
onClose={this.handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center'
}}
>
<List>
{Object.keys(columns).map(key => {
const column = columns[key]
return (
<ListItem key={key} role={undefined} dense button onClick={() => this.handleToggle(key)}>
<Checkbox
checked={selectedColumns.indexOf(key) !== -1}
tabIndex={-1}
disableRipple
/>
<ListItemText primary={column.label} />
</ListItem>
)
})}
</List>
</Popover>
</Toolbar> </Toolbar>
) )
} }
......
...@@ -48,6 +48,7 @@ class DomainProviderBase extends React.Component { ...@@ -48,6 +48,7 @@ class DomainProviderBase extends React.Component {
exploring capabilities (menu items on the left). exploring capabilities (menu items on the left).
`, `,
entryLabel: 'entry', entryLabel: 'entry',
entryLabelPlural: 'entries',
searchPlaceholder: 'enter atoms, codes, functionals, or other quantity values', searchPlaceholder: 'enter atoms, codes, functionals, or other quantity values',
/** /**
* A component that is used to render the search aggregations. The components needs * A component that is used to render the search aggregations. The components needs
...@@ -181,6 +182,7 @@ class DomainProviderBase extends React.Component { ...@@ -181,6 +182,7 @@ class DomainProviderBase extends React.Component {
methods and respective data. methods and respective data.
`, `,
entryLabel: 'experiment', entryLabel: 'experiment',
entryLabelPlural: 'experiments',
searchPlaceholder: 'enter atoms, experimental methods, or other quantity values', searchPlaceholder: 'enter atoms, experimental methods, or other quantity values',
/** /**
* A component that is used to render the search aggregations. The components needs * A component that is used to render the search aggregations. The components needs
......
...@@ -312,7 +312,7 @@ export class EntryListUnstyled extends React.Component { ...@@ -312,7 +312,7 @@ export class EntryListUnstyled extends React.Component {
return ( return (
<div className={classes.root}> <div className={classes.root}>
<DataTable <DataTable
entityLabels={['domain.entryLabel', domain.entryLabel + 's']} entityLabels={[domain.entryLabel, domain.entryLabelPlural]}
selectActions={selectActions} selectActions={selectActions}
id={row => row.calc_id} id={row => row.calc_id}
total={total} total={total}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment