[ARVADOS-WORKBENCH2] updated: 2.1.0-19-gbcb55ad2
Git user
git at public.arvados.org
Thu Nov 5 04:35:21 UTC 2020
Summary of changes:
src/common/formatters.ts | 2 +-
.../details-attribute/details-attribute.tsx | 26 ++--
.../details-panel/collection-details.tsx | 2 +-
src/views/collection-panel/collection-panel.tsx | 135 ++++++++++++---------
4 files changed, 94 insertions(+), 71 deletions(-)
via bcb55ad2005ab4dc8c97624c1f56d410c36d15c2 (commit)
from b5c368012c8719fb1b5493dfed2443c4974d4f91 (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 bcb55ad2005ab4dc8c97624c1f56d410c36d15c2
Author: Peter Amstutz <peter.amstutz at curii.com>
Date: Wed Nov 4 23:32:52 2020 -0500
16719: Revise layout for collection panel.
Use responsive two-column layout.
Stack label and value instead of side-by-side.
Fix styling of "Copy to clipboard" icon.
Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz at curii.com>
diff --git a/src/common/formatters.ts b/src/common/formatters.ts
index 1386338c..55fb0507 100644
--- a/src/common/formatters.ts
+++ b/src/common/formatters.ts
@@ -28,7 +28,7 @@ export const formatFileSize = (size?: number) => {
}
}
}
- return "";
+ return "0 B";
};
export const formatTime = (time: number, seconds?: boolean) => {
diff --git a/src/components/details-attribute/details-attribute.tsx b/src/components/details-attribute/details-attribute.tsx
index 18d0d8b7..4b8ee837 100644
--- a/src/components/details-attribute/details-attribute.tsx
+++ b/src/components/details-attribute/details-attribute.tsx
@@ -20,24 +20,21 @@ type CssRules = 'attribute' | 'label' | 'value' | 'lowercaseValue' | 'link' | 'c
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
attribute: {
- display: 'flex',
- alignItems: 'flex-start'
+ marginBottom: ".6 rem"
},
label: {
boxSizing: 'border-box',
color: theme.palette.grey["500"],
- width: '40%'
+ width: '100%'
},
value: {
boxSizing: 'border-box',
- width: '60%',
alignItems: 'flex-start'
},
lowercaseValue: {
textTransform: 'lowercase'
},
link: {
- width: '60%',
color: theme.palette.primary.main,
textDecoration: 'none',
overflowWrap: 'break-word',
@@ -45,9 +42,12 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
copyIcon: {
marginLeft: theme.spacing.unit,
- fontSize: '1.125rem',
color: theme.palette.grey["500"],
- cursor: 'pointer'
+ cursor: 'pointer',
+ display: 'inline',
+ '& svg': {
+ fontSize: '1rem'
+ }
}
});
@@ -101,17 +101,19 @@ export const DetailsAttribute = connect(mapStateToProps)(withStyles(styles)(
valueNode = value;
}
return <Typography component="div" className={classes.attribute}>
- <Typography component="span" className={classnames([classes.label, classLabel])}>{label}</Typography>
+ <Typography component="div" className={classnames([classes.label, classLabel])}>{label}</Typography>
<Typography
onClick={onValueClick}
- component="span"
+ component="div"
className={classnames([classes.value, classValue, { [classes.lowercaseValue]: lowercaseValue }])}>
{valueNode}
{children}
{linkToUuid && <Tooltip title="Copy">
- <CopyToClipboard text={linkToUuid || ""} onCopy={() => this.onCopy("Copied")}>
- <CopyIcon className={classes.copyIcon} />
- </CopyToClipboard>
+ <span className={classes.copyIcon}>
+ <CopyToClipboard text={linkToUuid || ""} onCopy={() => this.onCopy("Copied")}>
+ <CopyIcon />
+ </CopyToClipboard>
+ </span>
</Tooltip>}
</Typography>
</Typography>;
diff --git a/src/views-components/details-panel/collection-details.tsx b/src/views-components/details-panel/collection-details.tsx
index 1089706d..625d8405 100644
--- a/src/views-components/details-panel/collection-details.tsx
+++ b/src/views-components/details-panel/collection-details.tsx
@@ -15,6 +15,6 @@ export class CollectionDetails extends DetailsData<CollectionResource> {
}
getDetails() {
- return <CollectionDetailsAttributes item={this.item} />;
+ return <CollectionDetailsAttributes item={this.item} twoCol={false} />;
}
}
diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index f41e8967..4cdd8c55 100644
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -14,7 +14,7 @@ import { ArvadosTheme } from '~/common/custom-theme';
import { RootState } from '~/store/store';
import { MoreOptionsIcon, CollectionIcon, ReadOnlyIcon, ExpandIcon, CollectionOldVersionIcon } from '~/components/icon/icon';
import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
-import { CollectionResource } from '~/models/collection';
+import { CollectionResource, getCollectionUrl } from '~/models/collection';
import { CollectionPanelFiles } from '~/views-components/collection-panel-files/collection-panel-files';
import { CollectionTagForm } from './collection-tag-form';
import { deleteCollectionTag, navigateToProcess, collectionPanelActions } from '~/store/collection-panel/collection-panel-action';
@@ -31,6 +31,7 @@ import { UserResource } from '~/models/user';
import { getUserUuid } from '~/common/getuser';
import { getProgressIndicator } from '~/store/progress-indicator/progress-indicator-reducer';
import { COLLECTION_PANEL_LOAD_FILES, loadCollectionFiles, COLLECTION_PANEL_LOAD_FILES_THRESHOLD } from '~/store/collection-panel/collection-panel-files/collection-panel-files-actions';
+import { Link } from 'react-router-dom';
type CssRules = 'root'
| 'filesCard'
@@ -113,7 +114,7 @@ export const CollectionPanel = withStyles(styles)(
if (item.ownerUuid === currentUserUUID) {
isWritable = true;
} else {
- const itemOwner = getResource<GroupResource|UserResource>(item.ownerUuid)(state.resources);
+ const itemOwner = getResource<GroupResource | UserResource>(item.ownerUuid)(state.resources);
if (itemOwner) {
isWritable = itemOwner.writableBy.indexOf(currentUserUUID || '') >= 0;
}
@@ -134,21 +135,21 @@ export const CollectionPanel = withStyles(styles)(
<Grid container justify="space-between">
<Grid item xs={11}><span>
<IconButton onClick={this.openCollectionDetails}>
- { isOldVersion
- ? <CollectionOldVersionIcon className={classes.iconHeader} />
- : <CollectionIcon className={classes.iconHeader} /> }
+ {isOldVersion
+ ? <CollectionOldVersionIcon className={classes.iconHeader} />
+ : <CollectionIcon className={classes.iconHeader} />}
</IconButton>
- <IllegalNamingWarning name={item.name}/>
+ <IllegalNamingWarning name={item.name} />
<span>
{item.name}
{isWritable ||
- <Tooltip title="Read-only">
- <ReadOnlyIcon data-cy="read-only-icon" className={classes.readOnlyIcon} />
- </Tooltip>
+ <Tooltip title="Read-only">
+ <ReadOnlyIcon data-cy="read-only-icon" className={classes.readOnlyIcon} />
+ </Tooltip>
}
</span>
</span></Grid>
- <Grid item xs={1} style={{textAlign: "right"}}>
+ <Grid item xs={1} style={{ textAlign: "right" }}>
<Tooltip title="Actions" disableFocusListener>
<IconButton
data-cy='collection-panel-options-btn'
@@ -166,16 +167,16 @@ export const CollectionPanel = withStyles(styles)(
<Typography variant="caption">
{item.description}
</Typography>
- <CollectionDetailsAttributes item={item} classes={classes} />
+ <CollectionDetailsAttributes item={item} classes={classes} twoCol={true} />
{(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. Copy it as a new one if you need to make changes. Go to the current version if you need to share it.
- </Typography>
+ <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>
@@ -192,25 +193,25 @@ export const CollectionPanel = withStyles(styles)(
<CollectionTagForm />
</Grid>}
<Grid item xs={12}>
- { Object.keys(item.properties).length > 0
- ? Object.keys(item.properties).map(k =>
- Array.isArray(item.properties[k])
- ? item.properties[k].map((v: string) =>
- getPropertyChip(
- k, v,
- isWritable
- ? this.handleDelete(k, item.properties[k])
- : undefined,
- classes.tag))
- : getPropertyChip(
- k, item.properties[k],
- isWritable
- ? this.handleDelete(k, item.properties[k])
- : undefined,
- classes.tag)
- )
- : <div className={classes.centeredLabel}>No properties set on this collection.</div>
- }
+ {Object.keys(item.properties).length > 0
+ ? Object.keys(item.properties).map(k =>
+ Array.isArray(item.properties[k])
+ ? item.properties[k].map((v: string) =>
+ getPropertyChip(
+ k, v,
+ isWritable
+ ? this.handleDelete(k, item.properties[k])
+ : undefined,
+ classes.tag))
+ : getPropertyChip(
+ k, item.properties[k],
+ isWritable
+ ? this.handleDelete(k, item.properties[k])
+ : undefined,
+ classes.tag)
+ )
+ : <div className={classes.centeredLabel}>No properties set on this collection.</div>
+ }
</Grid>
</Grid>
</ExpansionPanelDetails>
@@ -224,7 +225,7 @@ export const CollectionPanel = withStyles(styles)(
dispatch(collectionPanelActions.LOAD_BIG_COLLECTIONS(true));
dispatch<any>(loadCollectionFiles(this.props.item.uuid));
}
- } />
+ } />
</div>
</div>
: null;
@@ -276,31 +277,51 @@ export const CollectionPanel = withStyles(styles)(
)
);
-export const CollectionDetailsAttributes = (props: {item: CollectionResource, classes?: Record<CssRules, string>}) => {
+export const CollectionDetailsAttributes = (props: { item: CollectionResource, twoCol: boolean, classes?: Record<CssRules, string> }) => {
const item = props.item;
- const classes = props.classes || {label: '', value: ''};
+ const classes = props.classes || { label: '', value: '' };
const isOldVersion = item && item.currentVersionUuid !== item.uuid;
- return <span>
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label={isOldVersion ? "This version's UUID" : "Collection UUID"}
- linkToUuid={item.uuid} />
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label={isOldVersion ? "This version's PDH" : "Portable data hash"}
- linkToUuid={item.portableDataHash} />
+ const mdSize = props.twoCol ? 6 : 12;
+ return <Grid container>
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label={isOldVersion ? "This version's UUID" : "Collection UUID"}
+ linkToUuid={item.uuid} />
+ </Grid>
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label={isOldVersion ? "This version's PDH" : "Portable data hash"}
+ linkToUuid={item.portableDataHash} />
+ </Grid>
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='Owner' linkToUuid={item.ownerUuid} />
+ </Grid>
+
{isOldVersion &&
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Most recent version'
- linkToUuid={item.currentVersionUuid} />
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='Head version'
+ linkToUuid={item.currentVersionUuid} />
+ </Grid>
}
- <DetailsAttribute label='Last modified' value={formatDate(item.modifiedAt)} />
- <DetailsAttribute label='Created at' value={formatDate(item.createdAt)} />
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Version number' value={item.version} />
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Number of files' value={item.fileCount} />
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Content size' value={formatFileSize(item.fileSizeTotal)} />
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='Owner' linkToUuid={item.ownerUuid} />
- </span>;
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='Version number' value={item.version} />
+ </Grid>
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute label='Created at' value={formatDate(item.createdAt)} />
+ </Grid>
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute label='Last modified' value={formatDate(item.modifiedAt)} />
+ </Grid>
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='Number of files' value={item.fileCount} />
+ </Grid>
+ <Grid item xs={12} md={mdSize}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='Content size' value={formatFileSize(item.fileSizeTotal)} />
+ </Grid>
+ </Grid>;
};
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list