import * as React from 'react';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
import { ArvadosTheme } from '~/common/custom-theme';
-import { Grid, Typography, Switch } from '@material-ui/core';
+import { Typography, Switch } from '@material-ui/core';
-type CssRules = 'grid' | 'label' | 'value' | 'switch';
+type CssRules = 'container' | 'label' | 'value' | 'switch';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- grid: {
+ container: {
display: 'flex',
- height: '20px',
- paddingTop: '0px!important',
- paddingBottom: '0px!important',
- marginBottom: theme.spacing.unit
},
label: {
width: '86px',
export const SubprocessFilter = withStyles(styles)(
({ classes, label, value, key, checked, onToggle }: SubprocessFilterProps) =>
- <Grid item className={classes.grid} md={12} lg={6} >
+ <div className={classes.container} >
<Typography component="span" className={classes.label}>{label}:</Typography>
<Typography component="span" className={classes.value}>{value}</Typography>
{onToggle && <Switch classes={{ root: classes.switch }}
value={key}
color="primary" />
}
- </Grid>
+ </div>
);
\ No newline at end of file
process?: Process;
subprocesses: Array<Process>;
filters: Array<SubprocessFilterDataProps>;
+ totalSubprocessesLength: number;
}
export interface ProcessPanelRootActionProps {
export const ProcessPanelRoot = (props: ProcessPanelRootProps) =>
props.process
- ? <Grid container spacing={16}>
- <Grid item xs={7}>
+ ? <Grid container spacing={16} alignItems="stretch">
+ <Grid item sm={12} md={7} alignItems="stretch">
<ProcessInformationCard
process={props.process}
onContextMenu={props.onContextMenu} />
</Grid>
- <Grid item xs={5}>
+ <Grid item sm={12} md={5}>
<SubprocessesCard
- subprocesses={props.subprocesses}
+ subprocessesAmount={props.totalSubprocessesLength}
filters={props.filters}
onToggle={props.onToggle}
/>
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' | 'subtitle' | 'title' | 'gridFilter';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
- fontSize: '0.875rem'
+ fontSize: '0.875rem',
+ height: '100%'
},
subtitle: {
- paddingBottom: '28px!important'
+ paddingBottom: '32px!important'
},
title: {
color: theme.customs.colors.grey700
+ },
+ 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} className={classes.subtitle}>
+ <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} spacing={0} className={classes.gridFilter}>
+ <SubprocessFilter {...filter} onToggle={() => onToggle(filter.label)} />
+ </Grid>
)
}
</Grid>