[ARVADOS-WORKBENCH2] updated: 1.2.0-271-g013ec8c
Git user
git at public.curoverse.com
Tue Sep 4 07:43:32 EDT 2018
Summary of changes:
.../subprocess-filter/subprocess-filter.tsx | 14 ++++-----
.../process-panel/process-information-card.tsx | 3 +-
src/views/process-panel/process-panel-root.tsx | 9 +++---
src/views/process-panel/process-panel.tsx | 3 +-
src/views/process-panel/process-subprocesses.tsx | 2 +-
src/views/process-panel/subprocesses-card.tsx | 33 ++++++++++++++--------
6 files changed, 35 insertions(+), 29 deletions(-)
via 013ec8ccb46d5438aca45dc5173f838ec863ca7b (commit)
from f5c0cb11102a006cda59711f29458b7569b9a21f (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 013ec8ccb46d5438aca45dc5173f838ec863ca7b
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Tue Sep 4 13:43:19 2018 +0200
css changes
Feature #13860
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
diff --git a/src/components/subprocess-filter/subprocess-filter.tsx b/src/components/subprocess-filter/subprocess-filter.tsx
index f136685..23c1e65 100644
--- a/src/components/subprocess-filter/subprocess-filter.tsx
+++ b/src/components/subprocess-filter/subprocess-filter.tsx
@@ -5,17 +5,13 @@
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',
@@ -46,7 +42,7 @@ type SubprocessFilterProps = SubprocessFilterDataProps & WithStyles<CssRules>;
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 }}
@@ -55,5 +51,5 @@ export const SubprocessFilter = withStyles(styles)(
value={key}
color="primary" />
}
- </Grid>
+ </div>
);
\ No newline at end of file
diff --git a/src/views/process-panel/process-information-card.tsx b/src/views/process-panel/process-information-card.tsx
index 01bb3ae..788f253 100644
--- a/src/views/process-panel/process-information-card.tsx
+++ b/src/views/process-panel/process-information-card.tsx
@@ -19,7 +19,7 @@ type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'c
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
card: {
- marginBottom: theme.spacing.unit * 2
+ height: '100%'
},
iconHeader: {
fontSize: '1.875rem',
@@ -57,7 +57,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
content: {
'&:last-child': {
paddingBottom: theme.spacing.unit * 2,
- paddingTop: '0px'
}
},
title: {
diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index 9db16bc..f76efe0 100644
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -16,6 +16,7 @@ export interface ProcessPanelRootDataProps {
process?: Process;
subprocesses: Array<Process>;
filters: Array<SubprocessFilterDataProps>;
+ totalSubprocessesLength: number;
}
export interface ProcessPanelRootActionProps {
@@ -27,15 +28,15 @@ export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRoot
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}
/>
diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
index e9bba3a..b3e36ab 100644
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@ -21,7 +21,8 @@ const mapStateToProps = ({ router, resources, processPanel }: RootState): Proces
return {
process: getProcess(uuid)(resources),
subprocesses: subprocesses.filter(subprocess => processPanel.filters[getProcessStatus(subprocess)]),
- filters: getFilters(processPanel, subprocesses)
+ filters: getFilters(processPanel, subprocesses),
+ totalSubprocessesLength: subprocesses.length,
};
};
diff --git a/src/views/process-panel/process-subprocesses.tsx b/src/views/process-panel/process-subprocesses.tsx
index 5ee5938..6e00deb 100644
--- a/src/views/process-panel/process-subprocesses.tsx
+++ b/src/views/process-panel/process-subprocesses.tsx
@@ -15,7 +15,7 @@ export interface ProcessSubprocessesDataProps {
export const ProcessSubprocesses = ({ onContextMenu, subprocesses }: ProcessSubprocessesDataProps) => {
return <Grid container spacing={16}>
{subprocesses.map(subprocess =>
- <Grid item xs={2} key={subprocess.containerRequest.uuid}>
+ <Grid item xs={12} sm={6} md={4} lg={2} key={subprocess.containerRequest.uuid}>
<ProcessSubprocessesCard onContextMenu={onContextMenu} subprocess={subprocess} />
</Grid>
)}
diff --git a/src/views/process-panel/subprocesses-card.tsx b/src/views/process-panel/subprocesses-card.tsx
index 8033222..6c5562d 100644
--- a/src/views/process-panel/subprocesses-card.tsx
+++ b/src/views/process-panel/subprocesses-card.tsx
@@ -4,27 +4,33 @@
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;
}
@@ -32,9 +38,9 @@ interface SubprocessesDataProps {
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'>
@@ -42,13 +48,16 @@ export const SubprocessesCard = withStyles(styles)(
</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>
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list