[ARVADOS-WORKBENCH2] updated: 1.4.1-377-g0ef145be
Git user
git at public.arvados.org
Fri Jul 10 20:11:05 UTC 2020
Summary of changes:
src/common/custom-theme.ts | 16 ++++
.../collection-panel/collection-panel-action.ts | 3 -
src/store/workbench/workbench-actions.ts | 4 +
src/views/collection-panel/collection-panel.tsx | 106 +++++----------------
4 files changed, 42 insertions(+), 87 deletions(-)
via 0ef145be19d3ec0880cece45399c2b83950b4510 (commit)
via e364e8697dff2661ca386f14c38af9040af9fc8e (commit)
from 31b5226e2d0d5db1bf24802ba51d4baae264cab6 (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 0ef145be19d3ec0880cece45399c2b83950b4510
Author: Lucas Di Pentima <lucas at di-pentima.com.ar>
Date: Fri Jul 10 17:09:02 2020 -0300
15610: Uses only ExpansionPanel as the top 2 panels on collection's view.
This is to make both ExpansionPanels be by each other without any separation
when both are collapsed, saving a little more vertical space.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas at di-pentima.com.ar>
diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts
index 169358dc..270a81d6 100644
--- a/src/common/custom-theme.ts
+++ b/src/common/custom-theme.ts
@@ -103,6 +103,22 @@ export const themeOptions: ArvadosThemeOptions = {
fontSize: '1.25rem'
}
},
+ MuiExpansionPanel: {
+ expanded: {
+ marginTop: '8px',
+ }
+ },
+ MuiExpansionPanelSummary: {
+ content: {
+ '&$expanded': {
+ margin: 0,
+ },
+ color: grey700,
+ fontSize: '1.25rem',
+ margin: 0,
+ },
+ expanded: {},
+ },
MuiMenuItem: {
root: {
padding: '8px 16px'
diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index 5771a736..953e5b4c 100644
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -4,12 +4,10 @@
import * as React from 'react';
import {
- StyleRulesCallback, WithStyles, withStyles, Card,
- CardHeader, IconButton, CardContent, Grid, Tooltip
+ StyleRulesCallback, WithStyles, withStyles,
+ IconButton, Grid, Tooltip, Typography, ExpansionPanel,
+ ExpansionPanelSummary, ExpansionPanelDetails
} from '@material-ui/core';
-import MuiExpansionPanel from '@material-ui/core/ExpansionPanel';
-import MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import { connect, DispatchProp } from "react-redux";
import { RouteComponentProps } from 'react-router';
import { ArvadosTheme } from '~/common/custom-theme';
@@ -35,10 +33,7 @@ import { getProgressIndicator } from '~/store/progress-indicator/progress-indica
import { COLLECTION_PANEL_LOAD_FILES, loadCollectionFiles, COLLECTION_PANEL_LOAD_FILES_THRESHOLD } from '~/store/collection-panel/collection-panel-files/collection-panel-files-actions';
type CssRules = 'root'
- | 'card'
- | 'cardHeader'
| 'filesCard'
- | 'cardContent'
| 'iconHeader'
| 'tag'
| 'label'
@@ -47,61 +42,16 @@ type CssRules = 'root'
| 'centeredLabel'
| 'readOnlyIcon';
-const ExpansionPanel = withStyles({
- root: {
- margin: 0,
- padding: 0,
- }
-})(MuiExpansionPanel);
-
-const ExpansionPanelSummary = withStyles({
- root: {
- margin: 0,
- padding: 0,
- },
- content: {
- '&$expanded': {
- margin: 0,
- padding: 0,
- },
- margin: 0,
- padding: 0,
- },
- expanded: {},
-})(MuiExpansionPanelSummary);
-
-const ExpansionPanelDetails = withStyles({
- root: {
- margin: 0,
- padding: 0,
- }
-})(MuiExpansionPanelDetails);
-
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
display: 'flex',
flexFlow: 'column',
height: 'calc(100vh - 130px)', // (100% viewport height) - (top bar + breadcrumbs)
},
- card: {
- marginBottom: theme.spacing.unit * 2,
- },
- cardHeader: {
- paddingTop: theme.spacing.unit,
- paddingBottom: 0,
- },
filesCard: {
marginBottom: theme.spacing.unit * 2,
flex: 1,
},
- cardContent: {
- width: '100%',
- paddingTop: 0,
- paddingBottom: theme.spacing.unit,
- '&:last-child': {
- paddingBottom: theme.spacing.unit,
- }
- },
iconHeader: {
fontSize: '1.875rem',
color: theme.customs.colors.yellow700
@@ -167,35 +117,27 @@ export const CollectionPanel = withStyles(styles)(
const { classes, item, dispatch, isWritable, isLoadingFiles, tooManyFiles } = this.props;
return item
? <div className={classes.root}>
- <Card data-cy='collection-info-panel' className={classes.card}>
- <ExpansionPanel defaultExpanded>
- <ExpansionPanelSummary expandIcon={<ExpandIcon />}>
- <CardHeader
- className={classes.cardHeader}
- avatar={
+ <ExpansionPanel data-cy='collection-info-panel' defaultExpanded>
+ <ExpansionPanelSummary expandIcon={<ExpandIcon />}>
+ <span>
<IconButton onClick={this.openCollectionDetails}>
<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>
- }
- </span>
- }
- titleTypographyProps={this.titleProps}
- subheader={item.description}
- subheaderTypographyProps={this.titleProps} />
+ <IllegalNamingWarning name={item.name}/>
+ {item.name}
+ {isWritable ||
+ <Tooltip title="Read-only">
+ <ReadOnlyIcon data-cy="read-only-icon" className={classes.readOnlyIcon} />
+ </Tooltip>
+ }
+ </span>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
- <CardContent className={classes.cardContent}>
<Grid container justify="space-between">
<Grid item xs={11}>
+ <Typography variant="caption">
+ {item.description}
+ </Typography>
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
label='Collection UUID'
linkToUuid={item.uuid} />
@@ -225,18 +167,15 @@ export const CollectionPanel = withStyles(styles)(
</Tooltip>
</Grid>
</Grid>
- </CardContent>
</ExpansionPanelDetails>
</ExpansionPanel>
- </Card>
- <Card data-cy='collection-properties-panel' className={classes.card}>
- <ExpansionPanel defaultExpanded>
+ <ExpansionPanel data-cy='collection-properties-panel' defaultExpanded>
<ExpansionPanelSummary expandIcon={<ExpandIcon />}>
- <CardHeader title="Properties" />
+ {"Properties"}
</ExpansionPanelSummary>
- <ExpansionPanelDetails><CardContent className={classes.cardContent}>
- <Grid container direction="column">
+ <ExpansionPanelDetails>
+ <Grid container>
{isWritable && <Grid item xs={12}>
<CollectionTagForm />
</Grid>}
@@ -262,9 +201,8 @@ export const CollectionPanel = withStyles(styles)(
}
</Grid>
</Grid>
- </CardContent></ExpansionPanelDetails>
+ </ExpansionPanelDetails>
</ExpansionPanel>
- </Card>
<div className={classes.filesCard}>
<CollectionPanelFiles
isWritable={isWritable}
commit e364e8697dff2661ca386f14c38af9040af9fc8e
Author: Lucas Di Pentima <lucas at di-pentima.com.ar>
Date: Fri Jul 10 14:51:41 2020 -0300
15610: Clears the collection's files panel before loading the UI.
This avoids flickering on the files panel.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas at di-pentima.com.ar>
diff --git a/src/store/collection-panel/collection-panel-action.ts b/src/store/collection-panel/collection-panel-action.ts
index 35c3c3d3..13943665 100644
--- a/src/store/collection-panel/collection-panel-action.ts
+++ b/src/store/collection-panel/collection-panel-action.ts
@@ -5,8 +5,6 @@
import { Dispatch } from "redux";
import { loadCollectionFiles, COLLECTION_PANEL_LOAD_FILES_THRESHOLD } from "./collection-panel-files/collection-panel-files-actions";
import { CollectionResource } from '~/models/collection';
-import { collectionPanelFilesAction } from "./collection-panel-files/collection-panel-files-actions";
-import { createTree } from "~/models/tree";
import { RootState } from "~/store/store";
import { ServiceRepository } from "~/services/services";
import { TagProperty } from "~/models/tag";
@@ -32,7 +30,6 @@ export const COLLECTION_TAG_FORM_NAME = 'collectionTagForm';
export const loadCollectionPanel = (uuid: string) =>
async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
dispatch(collectionPanelActions.LOAD_COLLECTION({ uuid }));
- dispatch(collectionPanelFilesAction.SET_COLLECTION_FILES({ files: createTree() }));
const collection = await services.collectionService.get(uuid);
dispatch(loadDetailsPanel(collection.uuid));
dispatch(collectionPanelActions.LOAD_COLLECTION_SUCCESS({ item: collection }));
diff --git a/src/store/workbench/workbench-actions.ts b/src/store/workbench/workbench-actions.ts
index e2ff01f7..944c48cf 100644
--- a/src/store/workbench/workbench-actions.ts
+++ b/src/store/workbench/workbench-actions.ts
@@ -101,6 +101,8 @@ import { subprocessPanelActions } from '~/store/subprocess-panel/subprocess-pane
import { subprocessPanelColumns } from '~/views/subprocess-panel/subprocess-panel-root';
import { loadAllProcessesPanel, allProcessesPanelActions } from '../all-processes-panel/all-processes-panel-action';
import { allProcessesPanelColumns } from '~/views/all-processes-panel/all-processes-panel';
+import { collectionPanelFilesAction } from '../collection-panel/collection-panel-files/collection-panel-files-actions';
+import { createTree } from '~/models/tree';
export const WORKBENCH_LOADING_SCREEN = 'workbenchLoadingScreen';
@@ -278,6 +280,8 @@ export const loadCollection = (uuid: string) =>
async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
const userUuid = getUserUuid(getState());
if (userUuid) {
+ // Clear collection files panel
+ dispatch(collectionPanelFilesAction.SET_COLLECTION_FILES({ files: createTree() }));
const match = await loadGroupContentsResource({ uuid, userUuid, services });
match({
OWNED: async collection => {
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list