import * as React from 'react';
import { ArvadosTheme } from '~/common/custom-theme';
-import { StyleRulesCallback, withStyles, WithStyles, Card, CardHeader, CardContent, Grid, Switch, Typography } from '@material-ui/core';
+import { StyleRulesCallback, withStyles, WithStyles, Card, CardHeader, CardContent, Grid, Typography } from '@material-ui/core';
import { SubprocessFilter } from '~/components/subprocess-filter/subprocess-filter';
import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
-import { Process } from '~/store/processes/process';
-type CssRules = 'root' | 'subtitle' | 'title';
+type CssRules = 'root' | 'title' | 'gridFilter';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
- fontSize: '0.875rem'
- },
- subtitle: {
- paddingBottom: '28px!important'
+ fontSize: '0.875rem',
+ height: '100%'
},
title: {
- color: theme.customs.colors.grey700
+ color: theme.palette.grey["700"]
+ },
+ gridFilter: {
+ height: '20px',
+ marginBottom: theme.spacing.unit,
+ paddingTop: '0px!important',
+ paddingBottom: '0px!important',
}
});
interface SubprocessesDataProps {
- subprocesses: Array<Process>;
+ subprocessesAmount: number;
filters: SubprocessFilterDataProps[];
onToggle: (status: string) => void;
}
type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
export const SubprocessesCard = withStyles(styles)(
- ({ classes, filters, subprocesses, onToggle }: SubprocessesProps) =>
+ ({ classes, filters, subprocessesAmount, onToggle }: SubprocessesProps) =>
<Card className={classes.root}>
- <CardHeader
+ <CardHeader
className={classes.title}
title={
<Typography noWrap variant="title" color='inherit'>
</Typography>} />
<CardContent>
<Grid container direction="column" spacing={16}>
- <Grid item xs={12} container spacing={16} className={classes.subtitle}>
- <SubprocessFilter label='Subprocesses' value={subprocesses.length} />
- </Grid>
<Grid item xs={12} container spacing={16}>
+ <Grid item md={12} lg={6}>
+ <SubprocessFilter label='Subprocesses' value={subprocessesAmount} />
+ </Grid>
+ <Grid item md={12} lg={6}/>
{
filters.map(filter =>
- <SubprocessFilter {...filter} key={filter.key} onToggle={() => onToggle(filter.label)} />
+ <Grid item md={12} lg={6} key={filter.key} className={classes.gridFilter}>
+ <SubprocessFilter {...filter} onToggle={() => onToggle(filter.label)} />
+ </Grid>
)
}
</Grid>