[arvados-workbench2] updated: 2.5.0-57-gcd89fd24
git repository hosting
git at public.arvados.org
Wed Mar 8 21:50:11 UTC 2023
Summary of changes:
src/views/collection-panel/collection-panel.tsx | 97 +++++++++++++---------
.../workflow-panel/registered-workflow-panel.tsx | 23 ++---
2 files changed, 73 insertions(+), 47 deletions(-)
via cd89fd24a8cdf7512a4352f1fc17101b225e32c4 (commit)
from c3bc34209f7dbbc80c62d8896af043c88cb6b9cf (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 cd89fd24a8cdf7512a4352f1fc17101b225e32c4
Author: Peter Amstutz <peter.amstutz at curii.com>
Date: Wed Mar 8 16:41:05 2023 -0500
19482: Use CardHeader/CardContent for more consistent styling
Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz at curii.com>
diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index df1b1f1d..54b7134e 100644
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -11,7 +11,7 @@ import {
Grid,
Tooltip,
Typography,
- Card
+ Card, CardHeader, CardContent
} from '@material-ui/core';
import { connect, DispatchProp } from "react-redux";
import { RouteComponentProps } from 'react-router';
@@ -51,7 +51,11 @@ type CssRules = 'root'
| 'centeredLabel'
| 'warningLabel'
| 'collectionName'
- | 'readOnlyIcon';
+ | 'readOnlyIcon'
+ | 'header'
+ | 'title'
+ | 'avatar'
+ | 'content';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
@@ -61,9 +65,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
cursor: 'pointer'
},
infoCard: {
- paddingLeft: theme.spacing.unit * 2,
- paddingRight: theme.spacing.unit * 2,
- paddingBottom: theme.spacing.unit * 2,
},
propertiesCard: {
padding: 0,
@@ -106,6 +107,26 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
readOnlyIcon: {
marginLeft: theme.spacing.unit,
fontSize: 'small',
+ },
+ header: {
+ paddingTop: theme.spacing.unit,
+ paddingBottom: theme.spacing.unit,
+ },
+ title: {
+ overflow: 'hidden',
+ paddingTop: theme.spacing.unit * 0.5,
+ color: theme.customs.colors.green700,
+ },
+ avatar: {
+ alignSelf: 'flex-start',
+ paddingTop: theme.spacing.unit * 0.5
+ },
+ content: {
+ padding: theme.spacing.unit * 1.0,
+ paddingTop: theme.spacing.unit * 0.5,
+ '&:last-child': {
+ paddingBottom: theme.spacing.unit * 1,
+ }
}
});
@@ -152,24 +173,28 @@ export const CollectionPanel = withStyles(styles)(connect(
? <MPVContainer className={classes.root} spacing={8} direction="column" justify-content="flex-start" wrap="nowrap" panelStates={panelsData}>
<MPVPanelContent xs="auto" data-cy='collection-info-panel'>
<Card className={classes.infoCard}>
- <Grid container justify="space-between">
- <Grid item xs={11}><span>
- <IconButton onClick={this.openCollectionDetails}>
- {isOldVersion
- ? <CollectionOldVersionIcon className={classes.iconHeader} />
- : <CollectionIcon className={classes.iconHeader} />}
- </IconButton>
- <IllegalNamingWarning name={item.name} />
+ <CardHeader
+ className={classes.header}
+ classes={{
+ content: classes.title,
+ avatar: classes.avatar,
+ }}
+ avatar={<IconButton onClick={this.openCollectionDetails}>
+ {isOldVersion
+ ? <CollectionOldVersionIcon className={classes.iconHeader} />
+ : <CollectionIcon className={classes.iconHeader} />}
+ </IconButton>}
+ title={
<span>
+ <IllegalNamingWarning name={item.name} />
{item.name}
{isWritable ||
<Tooltip title="Read-only">
<ReadOnlyIcon data-cy="read-only-icon" className={classes.readOnlyIcon} />
- </Tooltip>
- }
+ </Tooltip>}
</span>
- </span></Grid>
- <Grid item xs={1} style={{ textAlign: "right" }}>
+ }
+ action={
<Tooltip title="Actions" disableFocusListener>
<IconButton
data-cy='collection-panel-options-btn'
@@ -178,26 +203,24 @@ export const CollectionPanel = withStyles(styles)(connect(
<MoreOptionsIcon />
</IconButton>
</Tooltip>
- </Grid>
- </Grid>
- <Grid container justify="space-between">
- <Grid item xs={12}>
- <Typography variant="caption">
- {item.description}
+ }
+ />
+ <CardContent className={classes.content}>
+ <Typography variant="caption">
+ {item.description}
+ </Typography>
+ <CollectionDetailsAttributes item={item} classes={classes} twoCol={true} showVersionBrowser={() => dispatch<any>(openDetailsPanel(item.uuid, 1))} />
+ {(item.properties.container_request || item.properties.containerRequest) &&
+ <span onClick={() => dispatch<any>(navigateToProcess(item.properties.container_request || item.properties.containerRequest))}>
+ <DetailsAttribute classLabel={classes.link} label='Link to process' />
+ </span>
+ }
+ {isOldVersion &&
+ <Typography className={classes.warningLabel} variant="caption">
+ This is an old version. Make a copy to make changes. Go to the <Link to={getCollectionUrl(item.currentVersionUuid)}>head version</Link> for sharing options.
</Typography>
- <CollectionDetailsAttributes item={item} classes={classes} twoCol={true} showVersionBrowser={() => dispatch<any>(openDetailsPanel(item.uuid, 1))} />
- {(item.properties.container_request || item.properties.containerRequest) &&
- <span onClick={() => dispatch<any>(navigateToProcess(item.properties.container_request || item.properties.containerRequest))}>
- <DetailsAttribute classLabel={classes.link} label='Link to process' />
- </span>
- }
- {isOldVersion &&
- <Typography className={classes.warningLabel} variant="caption">
- This is an old version. Make a copy to make changes. Go to the <Link to={getCollectionUrl(item.currentVersionUuid)}>head version</Link> for sharing options.
- </Typography>
- }
- </Grid>
- </Grid>
+ }
+ </CardContent>
</Card>
</MPVPanelContent>
<MPVPanelContent xs>
@@ -205,7 +228,7 @@ export const CollectionPanel = withStyles(styles)(connect(
<CollectionPanelFiles isWritable={isWritable} />
</Card>
</MPVPanelContent>
- </MPVContainer>
+ </MPVContainer >
: null;
}
diff --git a/src/views/workflow-panel/registered-workflow-panel.tsx b/src/views/workflow-panel/registered-workflow-panel.tsx
index 4b658452..7b0f2a4c 100644
--- a/src/views/workflow-panel/registered-workflow-panel.tsx
+++ b/src/views/workflow-panel/registered-workflow-panel.tsx
@@ -7,11 +7,11 @@ import {
StyleRulesCallback,
WithStyles,
withStyles,
- Grid,
Tooltip,
Typography,
Card,
CardHeader,
+ CardContent,
IconButton,
} from '@material-ui/core';
import { Dispatch } from "redux";
@@ -44,7 +44,8 @@ type CssRules = 'root'
| 'readOnlyIcon'
| 'header'
| 'title'
- | 'avatar';
+ | 'avatar'
+ | 'content';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
@@ -54,9 +55,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
cursor: 'pointer'
},
infoCard: {
- paddingLeft: theme.spacing.unit * 2,
- paddingRight: theme.spacing.unit * 2,
- paddingBottom: theme.spacing.unit * 2,
},
propertiesCard: {
padding: 0,
@@ -113,6 +111,13 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
alignSelf: 'flex-start',
paddingTop: theme.spacing.unit * 0.5
},
+ content: {
+ padding: theme.spacing.unit * 1.0,
+ paddingTop: theme.spacing.unit * 0.5,
+ '&:last-child': {
+ paddingBottom: theme.spacing.unit * 1,
+ }
+ }
});
type RegisteredWorkflowPanelProps = RegisteredWorkflowPanelDataProps & DispatchProp & WithStyles<CssRules>
@@ -169,11 +174,9 @@ export const RegisteredWorkflowPanel = withStyles(styles)(connect(
/>
- <Grid container justify="space-between">
- <Grid item xs={12}>
- <WorkflowDetailsAttributes workflow={item} />
- </Grid>
- </Grid>
+ <CardContent className={classes.content}>
+ <WorkflowDetailsAttributes workflow={item} />
+ </CardContent>
</Card>
</MPVPanelContent>
<MPVPanelContent forwardProps xs data-cy="process-inputs">
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list