projects
/
arvados-workbench2.git
/ blobdiff
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
Merge branch 'master' into 14363-warning-note
[arvados-workbench2.git]
/
src
/
views
/
process-panel
/
subprocesses-card.tsx
diff --git
a/src/views/process-panel/subprocesses-card.tsx
b/src/views/process-panel/subprocesses-card.tsx
index ac60c9f66ef56a4e3842bf1465ce5473e10f15f0..9cff1e981630ed6a72e8a2868bb8c70c413b22cd 100644
(file)
--- a/
src/views/process-panel/subprocesses-card.tsx
+++ b/
src/views/process-panel/subprocesses-card.tsx
@@
-4,39
+4,57
@@
import * as React from 'react';
import { ArvadosTheme } from '~/common/custom-theme';
import * as React from 'react';
import { ArvadosTheme } from '~/common/custom-theme';
-import { StyleRulesCallback, withStyles, WithStyles, Card, CardHeader, CardContent, Grid,
Switch
} 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 { SubprocessFilter } from '~/components/subprocess-filter/subprocess-filter';
import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
-type CssRules = 'root';
+type CssRules = 'root'
| 'title' | 'gridFilter'
;
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
- fontSize: '0.875rem'
+ fontSize: '0.875rem',
+ height: '100%'
+ },
+ title: {
+ color: theme.palette.grey["700"]
+ },
+ gridFilter: {
+ height: '20px',
+ marginBottom: theme.spacing.unit,
+ paddingTop: '0px!important',
+ paddingBottom: '0px!important',
}
});
interface SubprocessesDataProps {
}
});
interface SubprocessesDataProps {
- subprocesses: number;
+ subprocesses
Amount
: number;
filters: SubprocessFilterDataProps[];
filters: SubprocessFilterDataProps[];
- onToggle: (
filter: SubprocessFilterDataProps
) => void;
+ onToggle: (
status: string
) => void;
}
type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
export const SubprocessesCard = withStyles(styles)(
}
type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
export const SubprocessesCard = withStyles(styles)(
- ({ classes, filters, subprocesses
, onToggle }: SubprocessesProps) =>
+ ({ classes, filters, subprocesses
Amount, onToggle }: SubprocessesProps) =>
<Card className={classes.root}>
<Card className={classes.root}>
- <CardHeader title="Subprocess and filters" />
+ <CardHeader
+ className={classes.title}
+ title={
+ <Typography noWrap variant="title" color='inherit'>
+ Subprocess and filters
+ </Typography>} />
<CardContent>
<Grid container direction="column" spacing={16}>
<Grid item xs={12} container spacing={16}>
<CardContent>
<Grid container direction="column" spacing={16}>
<Grid item xs={12} container spacing={16}>
- <SubprocessFilter label='Subprocesses' value={subprocesses} />
- </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)} />
+ filters.map(filter =>
+ <Grid item md={12} lg={6} key={filter.key} className={classes.gridFilter}>
+ <SubprocessFilter {...filter} onToggle={() => onToggle(filter.label)} />
+ </Grid>
)
}
</Grid>
)
}
</Grid>